Using DHTMLX v3.6
I created a line chart and added several series to it. After the chart is rendered, I am hoping to provide a set of checkboxes to the right of the chart which will represent each of the added series which can be checked/unchecked and eventually hide or show respective series in the chart.
I believe DHX also provides a similar feature when using legend’s toggle property but I do not want the legend items disappear upon clicking. Hence I opted to create a custom legend section with 5 checkboxes representing each of the 5 series I added in the chart using addSeries() function and hopefully use the hideSeries(index) and showSeries(index) methods of the dhtmlxchart to toggle between showing and hiding each series but keeping the legend items visible.
I attempted to pass index values ‘0’ to ‘4’ in the showSeries(index) and hideSeries(index) functions to toggle visibility of the 5 series I added but for some reason it does not work. Will the series index be the same order it was added to the chart? Thanks.
Below is my script to create the dhtml chart and another function I call to hide/show series…
var dhxTrendChart;
//Function to create dhtmlx chart; added with 6 line series
function loadTrendChart()
{
var trend_data = [
{ “Month”:“Aug”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“Sep”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“Oct”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“Nov”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“Dec”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“Jan”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“Feb”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“Mar”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“Apr”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“May”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“Jun”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” },
{ “Month”:“Jul”, “Actual”:“40.00”, “Target”:“76.50”, “Chain”:“60.00”, “Operation”:“50.00”, “Market”:“10.00”, “District”:“30.00” }
];
dhxTrendChart = new dhtmlXChart(
{
view: “line”,
container: “dhxTrendChartDiv”,
padding:
{
top: 10,
bottom: 15
},
xAxis:
{
template: “#Month#”,
lines: false,
color: “#A6A6A6”
},
yAxis:
{
template: function(val)
{
return “” + val + “%”
},
color: “#A6A6A6”
},
legend:{
layout:“y”,
align:“right”,
valign:“middle”,
width:0,
toggle:false,
values:[
]
}
});
dhxTrendChart.addSeries(
{
value: “#Actual#”,
tooltip:
{
template: “#Actual#”
},
line:
{
color: “#0000A0”,
width: 2
},
item:
{
radius:1,
borderColor: “#0000A0”,
color: “#0000A0” /,
type: “circle”/
}
});
dhxTrendChart.addSeries(
{
value: “#Target#”,
tooltip:
{
template: “#Target#”
},
line:
{
color: “#000000”,
width: 2
},
item:
{
radius:1,
borderColor: “#000000”,
color: “#000000” /,
type: “square”/
}
});
dhxTrendChart.addSeries(
{
value: “#Chain#”,
tooltip:
{
template: “#Chain#”
},
line:
{
color: “#b25151”,
width: 2
},
item:
{
radius:1,
borderColor: “#b25151”,
color: “#b25151” /,
type: “triangle”/
}
});
dhxTrendChart.addSeries(
{
value: “#Operation#”,
tooltip:
{
template: “#Operation#”
},
line:
{
color: “#FF7F50”,
width: 2
},
item:
{
radius:1,
borderColor: “#FF7F50”,
color: “#FF7F50” /,
type: “diamond”/
}
});
dhxTrendChart.addSeries(
{
value: “#Market#”,
tooltip:
{
template: “#Market#”
},
line:
{
color: “#008B8B”,
width: 2
},
item:
{
radius:1,
borderColor: “#008B8B”,
color:“#008B8B” /,
type: “square”/
}
});
dhxTrendChart.addSeries(
{
value: “#District#”,
tooltip:
{
template: “#District#”
},
line:
{
color: “#6A5ACD”,
width: 2
},
item:
{
radius:1,
borderColor: “#6A5ACD”,
color: “#6A5ACD” /*,
type: “triangle” */
}
});
dhxTrendChart.parse( trend_data, “json” );
}