Legend with Custom Labels

[matt]

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

}

[Yeray]

Hello,

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];
        };

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

[matt]

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

[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 (45.19 KiB) Viewed 16146 times

[matt]

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

[Yeray]

Hi Julianne,

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