Page 1 of 1

Legend with Custom Labels

Posted: Tue Mar 24, 2015 2:04 pm
by 17770651
Hello,
A requirement of our chart component is to have custom labels in the Legend. I have looked at textStyle-possibilities.
Problem 1: The key (targo1, targo2, targo3 /please, see code-example) should appear at each legend item.
Problem 2: I’ve added checkboxes, similar to your demo (Basic Example), generated by JavaScript using DOM. Is there a possibility to merge checkboxes with legend/ color of series (short line, please, refer to image below)?
Thanks, Juliane

Code: Select all

function draw() {

    var lineData;
    chart1 = new Tee.Chart("canvas");
    data_ser = [
        ['time1', 'time2', 'time3'],
        {targo1: [0.0013, 0.014, 0.015], targo2: [0.3, 0.5, 0.8], targo3: [0.6, 0.7, 0.008]},
        't_name1'
    ];
    var point_names = data_ser[0];
    var taro_vals = data_ser[1];
    var taro_vals_strings = [];

    var key_array = [];
    var number_point = point_names.length;
    var point_names_numb = new Array(number_point);
    point_names_numb[0] = 1;
    for (var i = 0; i < number_point; ++i) {
        point_names_numb[i] = i;
    }

    function serchart(chart_ser, taros, vdata_x, x_labels) {

        for (key in taros) {

            key_array.push(key);
            taro_vals_strings = taros[key];
            var val_array = [];
            for (var k = 0; k < taro_vals_strings.length; k++) {
                val_array.push(taros[key][k]);
            }
            vdata = new Tee.Line();
            vals = val_array;
            vdata.data.values = vals;
            vdata.data.x = vdata_x;
            chart_ser.addSeries(vdata);
            console.log(vdata);
            //key should appear as legend item
        }
        chart_ser.title.text = "Signal";
        vdata.data.x = vdata_x;
        lineData = vdata;
        var vfont = chart_ser.title.format.font;
        chart_ser.axes.bottom.labels.ongetlabel = function (value, s) {
            return x_labels[value]
        };
        chart_ser.draw();
    }
    serchart(chart1, taro_vals, point_names_numb, point_names);

}

Re: Legend with Custom Labels

Posted: Tue Mar 24, 2015 3:37 pm
by yeray
Hello,
matt wrote:Problem 1: The key (taro1, taro2, taro3 /please, see code-example) should appear at each legend item.
If I understand it correctly, you already have the taro1, taro2 and taro3 variable names converted into string in key_array. So you can just do this:

Code: Select all

        chart_ser.axes.bottom.labels.ongetlabel = function (value, s) {
		    return key_array[value];
        };
matt wrote:Problem 2: I’ve added checkboxes, similar to your demo (Basic Example), generated by JavaScript using DOM. Is there a possibility to merge checkboxes with legend/ color of series (short line, please, refer to image below)?
I'm afraid TeeChart HTML5 doesn't support checkboxes in the legend yet. I've added it to the public tracker:
http://bugs.teechart.net/show_bug.cgi?id=1176

Re: Legend with Custom Labels

Posted: Wed Mar 25, 2015 11:23 am
by 17770651
Hello Yeray,
Thank you for your reply.We need the custom labels at the legend, maybe the image below can visualize 'Problem 1'. The labels at bottom axis are different.
Regards, Juliane

Re: Legend with Custom Labels

Posted: Thu Mar 26, 2015 8:24 am
by yeray
Hi Juliane,

Try adding this inside the for-loop in your serchart function:

Code: Select all

vdata.title = key;
This is the how complete function looks like:

Code: Select all

    function serchart(chart_ser, taros, vdata_x, x_labels) {

        for (key in taros) {

            key_array.push(key);
            taro_vals_strings = taros[key];
            var val_array = [];
            for (var k = 0; k < taro_vals_strings.length; k++) {
                val_array.push(taros[key][k]);
            }
            vdata = new Tee.Line();
            vals = val_array;
            vdata.data.values = vals;
            vdata.data.x = vdata_x;
            vdata.title = key;
            chart_ser.addSeries(vdata);
            console.log(vdata);
            //key should appear as legend item
        }
        chart_ser.title.text = "Signal";
        vdata.data.x = vdata_x;
        lineData = vdata;
        var vfont = chart_ser.title.format.font;
        chart_ser.axes.bottom.labels.ongetlabel = function (value, s) {
            return x_labels[value]
        };
        chart_ser.draw();
    }
And this is what I get here:
2015-03-26_0924.png
2015-03-26_0924.png (45.19 KiB) Viewed 3124 times

Re: Legend with Custom Labels

Posted: Mon Mar 30, 2015 11:22 am
by 17770651
Hi Yeray,
Thank you very much, ‘Problem 1’ is solved. But we need the checkboxes within the legend as soon as possible. Is there a schedule for this request?
Regards, Juliane

Re: Legend with Custom Labels

Posted: Mon Mar 30, 2015 11:47 am
by yeray
Hi Julianne,
matt wrote:But we need the checkboxes within the legend as soon as possible. Is there a schedule for this request?
I'm afraid I can't tell you a date for this to be implemented.
I'd suggest you to add your mail to the ticket's CC list to be automatically notified when it will be modified.
http://bugs.teechart.net/show_bug.cgi?id=1176