Legend with Custom Labels
Posted: 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
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);
}