multi language support for Y-axis

TeeChart for Javascript for the HTML5 Canvas
Post Reply
SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

multi language support for Y-axis

Post by SenSeo » Thu Aug 11, 2016 4:34 pm

Hi,

We have assigned the decimal value between 0 to 30 ( like 1.1 , 2.2 , 3.3, 4.4 )to Y-axis value. This value needs to be changed automatically based on selected language. For example if I select German as language, then "," should be display instead of "."

For example

If it is English language then, Y-axis value is 1.1 , 2.2 , 3.3 ,4.4 ,etc .
If it is German language then, Y-axis value is 1,1 , 2,2 ,3,3 , 4,4 , etc ( here decimal separator is "," instead of ".")

How can we achieve this on teechart?

Yeray
Site Admin
Site Admin
Posts: 8848
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: multi language support for Y-axis

Post by Yeray » Wed Aug 17, 2016 10:40 am

Hello,

The Axis labels use toLocaleString without parameters to convert the axis values to strings to be drawn, so the system default locale is being used.
If it doesn't fit your requirements you can use the ongetlabel event to modify the labels. Ie:

Code: Select all

            Chart1.axes.left.labels.ongetlabel = function(value,s) {
                return value.toLocaleString('en-GB');
                //return value.toLocaleString('de-DE');
            };
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: multi language support for Y-axis

Post by SenSeo » Thu Aug 18, 2016 4:34 pm

Thank you for reply.

Using "ongetlabel" function, I was able to customize the Y-Axis value as per requirement.Also I want to customize the legend of pie chart( change number style based on language) but not able to do that.
I have attached my code here.In this example, I have changed number style format in all places in the pie chart except legend.

So,can we customize the same as customized Y-Axis number style?

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <!--[if lt IE 9]>
        <script src="../../../src/excanvas/excanvas_text.js"></script>
        <script src="../../../src/excanvas/canvas.text.js"></script>
    <![endif]-->

    <title>TeeChart JavaScript Pie Series Example</title>

    <script src="../../../src/teechart.js" type="text/javascript"></script>

    <script type="text/javascript">

function draw() {
    try {
        var cLow = 56.6;
        var cWithinTarget = 13.3;
        var cHigh = 30.1;

        var a1, a2, a3;
        a1 = 10.4;

        var currentLanguage = "de-DE";
        var unit = "ml";

        var cLabelHigh = "% Below Test1 " + " ( " + " " + unit + ")";
        var cLabelWithinTarget = "% Winthin Test1 " + " ("  + " " + unit + ")";
        var cLabelLow = "% Above Test1 " + " ( "  + " " + unit + ")";

        var TimeInTargtChart = new Tee.Chart("canvas");
        TimeInTargtChart.panel.margins.bottom = 0;
        var currentPie = new Tee.Pie();
        currentPie.title = "Average";
        currentPie.data.values = [cLow, cWithinTarget, cHigh];
        currentPie.data.labels = [cLabelLow, cLabelWithinTarget, cLabelHigh];

        var segmentColors = ["#D41717", "#A7CA70", "#575757"];
        currentPie.palette.colors = segmentColors; //apply specific color to each slice in the piechart.
        currentPie.colorEach = "yes";
        currentPie.explode = [1, 1, 1, 1, 1]; //give space between slice of pie chart
        currentPie.rotation = 0;

        currentPie.hover.stroke.fill = "";
        TimeInTargtChart.addSeries(currentPie);

        currentPie.marks.antioverlap = true;

        var test = "10.5";
        console.log(test.toLocaleString('de-DE'));

        TimeInTargtChart.series.items[0].marks.ongettext = function (series, index, text) {
            var formatValue = parseFloat( text.replace("%", " "));
          //  console.log(formatValue.toLocaleString('de-DE'));
            return formatValue.toLocaleString('de-DE') + " %";
        };

        //TimeInTargtChart.axes.bottom.labels.ongetlabel = function (value, s) {
        //    return "3%";
        //};

        currentPie.marks.drawPolar = function (center, radius, angle, index) {
            var text = this.series.markText(index),
                    px = center.x + Math.cos(angle) * radius,
                    py = center.y + Math.sin(angle) * radius,
                    c = this.chart.ctx;

            this.text = text;
            // this.resize();

            var b = this.bounds, p2x, p2y, p = this.position;

            radius += this.arrow.length;
            p2x = center.x + Math.cos(angle) * radius,
                    p2y = center.y + Math.sin(angle) * radius;

            if (p2x - b.width < 0)
                p2x -= (p2x - b.width - 4);

            if (this.antioverlap) {
                if (!this.positions) {
                    this.positions = [];
                }

                var p1 = new Rectangle(p2x, p2y, b.width, b.height);

                for (var i = 0; i < this.positions.length; i++) {
                    if (i != index) {
                        var p2 = this.positions[i];

                        while (p2 && (p1.contains(new Point(p2.x, p2.y)) ||
                        p1.contains(new Point(p2.x, p2.y + p2.height)) ||
                        p1.contains(new Point(p2.x + p2.width, p2.y)) ||
                        p1.contains(new Point(p2.x + p2.width, p2.y + p2.height)))) {

                            p1.x += 2;
                            p1.y += 2;
                        }
                    }
                }

                this.positions[index] = p1;
                p2x = p1.x;
                p2y = p1.y;
            }

            if (Math.abs(p2x - center.x) < b.width)
                p.x = p2x - b.width * 0.5;
            else
                p.x = (p2x < center.x) ? p2x - b.width : p2x;

            if (Math.abs(p2y - center.y) < b.height)
                p.y = p2y - b.height * 0.5;
            else
                p.y = (p2y < center.y) ? p2y - b.height : p2y;

            c.beginPath();
            c.moveTo(px, py);
            c.lineTo(p2x, p2y);

            if (this.arrow.underline) {
                if ((p2y <= p.y) || (p2y >= (p.y + b.height))) {
                    c.moveTo(p.x, p2y);
                    c.lineTo(p.x + b.width, p2y);
                }
            }
            this.arrow.stroke.prepare();
            c.stroke();
            this.draw();
        }

        //panel
        TimeInTargtChart.panel.format.stroke.fill = "silver";
        TimeInTargtChart.panel.format.stroke.size = 1;
        TimeInTargtChart.panel.format.gradient.colors[0] = "white";
        TimeInTargtChart.panel.format.gradient.colors[1] = "white";

        for (i = 0; i < 1; i++) {
            TimeInTargtChart.series.items[i].format.gradient.visible = false;
            TimeInTargtChart.series.items[i].format.gradient.colors = ["rgba(204,204,204,1)", "white", "white"];
            TimeInTargtChart.series.items[i].format.stroke.fill = "white"; // "rgba(0,0,0,0.0)";
            TimeInTargtChart.series.items[i].format.shadow.visible = true;
            TimeInTargtChart.series.items[i].marks.visible = true;
            TimeInTargtChart.series.items[i].sort = "labels";
            TimeInTargtChart.series.items[i].decimals = 1;
            TimeInTargtChart.series.items[i].format.stroke.size = 1;
            TimeInTargtChart.series.items[i].format.shadow.visible = false;
        }

        //Title
        TimeInTargtChart.title.visible = true;
        TimeInTargtChart.title.format.font.fill = "black";
        TimeInTargtChart.title.text = "Test title";
        TimeInTargtChart.title.margins.top = 0;
        TimeInTargtChart.title.margins.bottom = 20;

        TimeInTargtChart.footer.visible = true;
        TimeInTargtChart.footer.text = " "; //"Sales figures";

        //Legend
        TimeInTargtChart.legend.title.visible = false;
        TimeInTargtChart.legend.title.format.font.fill = "rgba(0,0,0,0.6)";
        TimeInTargtChart.legend.title.format.font.setSize(10);
        TimeInTargtChart.legend.format.font.setSize(12);
        TimeInTargtChart.legend.format.stroke.fill = "silver";
        TimeInTargtChart.legend.format.stroke.size = 1;
        TimeInTargtChart.legend.format.font.shadow.visible = false;
        TimeInTargtChart.legend.format.shadow.visible = false;
        TimeInTargtChart.legend.position = "bottom";
        TimeInTargtChart.legend.symbol.width = 15;
        TimeInTargtChart.legend.format.gradient.visible = true;
        //Ernesto Godoy 07/11/2016 - Marketing input
        // Disable hover in legend
        TimeInTargtChart.legend.hover.enabled = false;

        TimeInTargtChart.series.items[0].format.gradient.visible = false;
        TimeInTargtChart.axes.bottom.labelStyle = "text";
        TimeInTargtChart.series.items[0].format.stroke.fill = "white"; // "rgba(0,0,0,0.0)";

        TimeInTargtChart.draw();
    }
    catch (err) {
        console.log(err);

    }
}

function Rectangle(x, y, width, height) {
    this.set(x, y, width, height);
}

Rectangle.prototype.contains = function (p) {
    return (p.x >= this.x) && (p.x <= (this.x + this.width)) &&
        (p.y >= this.y) && (p.y <= (this.y + this.height));
};

Rectangle.prototype.set = function (x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
};

function Point(x, y) {
    this.x = x;
    this.y = y;
}



    </script>
</head>
<body onload="draw()">

  
    <center>
        <br><canvas id="canvas" width="600" height="400">
            This browser does not seem to support HTML5 Canvas.
        </canvas>
    </center>
</body>
</html>


Yeray
Site Admin
Site Admin
Posts: 8848
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: multi language support for Y-axis

Post by Yeray » Tue Aug 23, 2016 10:50 am

Hello,

We are working on a solution allowing you to choose what language to use to format all the strings in the chart, including legend and axes.
In the meanwhile, you can override the series' valueText function as follows:

Code: Select all

                TimeInTargtChart.series.items[0].oldValueText =TimeInTargtChart.series.items[0].valueText;
                TimeInTargtChart.series.items[0].valueText=function(index) {
                    //return parseFloat(this.oldValueText(index)).toLocaleString('en-GB');
                    return parseFloat(this.oldValueText(index)).toLocaleString('de-DE');
                }
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: multi language support for Y-axis

Post by SenSeo » Tue Aug 23, 2016 2:00 pm

Thanks a lot.

I have added the same code and decimal number is got formatted based on language.

Post Reply