Legend with Custom Labels

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
matt
Newbie
Newbie
Posts: 13
Joined: Fri Nov 07, 2014 12:00 am

Legend with Custom Labels

Post by matt » Tue Mar 24, 2015 2:04 pm

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

}
Attachments
linechart_sup.png
checkboxes within legend
linechart_sup.png (17.02 KiB) Viewed 14183 times
Last edited by matt on Wed Mar 25, 2015 11:27 am, edited 2 times in total.

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

Re: Legend with Custom Labels

Post by Yeray » Tue Mar 24, 2015 3:37 pm

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

matt
Newbie
Newbie
Posts: 13
Joined: Fri Nov 07, 2014 12:00 am

Re: Legend with Custom Labels

Post by matt » Wed Mar 25, 2015 11:23 am

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
Attachments
legend_sup.PNG
legend_sup.PNG (37.17 KiB) Viewed 14125 times

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

Re: Legend with Custom Labels

Post by Yeray » Thu Mar 26, 2015 8:24 am

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 14114 times
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

matt
Newbie
Newbie
Posts: 13
Joined: Fri Nov 07, 2014 12:00 am

Re: Legend with Custom Labels

Post by matt » Mon Mar 30, 2015 11:22 am

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
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Legend with Custom Labels

Post by Yeray » Mon Mar 30, 2015 11:47 am

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

Post Reply