multi language support for Y-axis

SenSeo · 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?

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');
            };

SenSeo · 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>

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');
                }

SenSeo · 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.

multi language support for Y-axis

multi language support for Y-axis

Re: multi language support for Y-axis

Re: multi language support for Y-axis

Re: multi language support for Y-axis

Re: multi language support for Y-axis

	Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP)
	Please read our Bug Fixing Policy