4 Answers, 1 is accepted
Rank 1
Ok so i think I've made some progress, is this how it should be achieved? http://dojo.telerik.com/eZuze
One thing with this is, when clicking on the legend to hide a series, the series hides in that the related bars are hidden, but the space they took up remains, from what I can tell this is what happens when series.categoryField is used ? is there a way javascript ? to remove them from the chart & redraw, then add them back etc when clicking on the legend.
Thanks
-----
var data = [
{ ptId: 1, ptName: "cat1", levelId: "PT1-L1", name: "level1", value: 10 },
{ ptId: 1, ptName: "cat1", levelId: "PT1-L2", name: "level2", value: 20 },
{ ptId: 1, ptName: "cat1", levelId: "PT1-L3", name: "level3", value: 30 },
//
{ ptId: 2, ptName: "cat2", levelId: "PT2-L1", name: "A", value: 40 },
{ ptId: 2, ptName: "cat2", levelId: "PT2-L2", name: "B", value: 25 },
//
{ ptId: 3, ptName: "cat3", levelId: "PT3-L1", name: "Level1", value: 40 },
{ ptId: 3, ptName: "cat3", levelId: "PT3-L2", name: "Level2", value: 105 },
{ ptId: 3, ptName: "cat3", levelId: "PT3-L3", name: "Level3", value: 123 },
{ ptId: 3, ptName: "cat3", levelId: "PT3-L4", name: "Level4", value: 65 },
{ ptId: 3, ptName: "cat3", levelId: "PT3-L5", name: "Level5", value: 35 },
//
{ ptId: 4, ptName: "cat4", levelId: "PT4-L1", name: "windows 1", value: 230 },
//
{ ptId: 5, ptName: "cat5", levelId: "PT5-L1", name: "A", value: 130 },
{ ptId: 5, ptName: "cat5", levelId: "PT5-L2", name: "B", value: 100 },
{ ptId: 5, ptName: "cat5", levelId: "PT5-L3", name: "C", value: 90 },
//
{ ptId: 6, ptName: "cat7", levelId: "PT6-L1", name: "D", value: 15 },
{ ptId: 6, ptName: "cat7", levelId: "PT6-L2", name: "E", value: 34 },
{ ptId: 6, ptName: "cat7", levelId: "PT6-L3", name: "F", value: 67 },
//
{ ptId: 7, ptName: "cat8", levelId: "PT7-L1", name: "1", value: 22 },
{ ptId: 7, ptName: "cat8", levelId: "PT7-L2", name: "2", value: 25 },
{ ptId: 7, ptName: "cat8", levelId: "PT7-L3", name: "3", value: 45 },
];
var options = {
dataSource: {
data: data,
group: [
{ field: "ptId"}
]
},
seriesDefaults: {
spacing: -1,
gap: 0.5,
column: {
categoryField: "levelId",
field: "value",
tooltip: {
visible: true,
template: "#: series.name # #: dataItem.name # (#: value #)"
}
}
},
series: [
{
type: "column",
name: "#: group.items[0].ptName #"
}
],
legend: {
position: "bottom"
},
valueAxis: [{
}],
categoryAxis: [
{
labels: { visible: true, rotation: -90, template: "#: dataItem.ptName # \r\n #: dataItem.name #" }
},
]
};
$("#chart").kendoChart(options);
Rank 1
OK got something working - would be good to validate this is all ok? http://dojo.telerik.com/uGEhI
var data = [
{ ptId: 1, ptName: "cat1", levelId: "PT1-L1", name: "level1", value: 10 },
{ ptId: 1, ptName: "cat1", levelId: "PT1-L2", name: "level2", value: 20 },
{ ptId: 1, ptName: "cat1", levelId: "PT1-L3", name: "level3", value: 30 },
//
{ ptId: 2, ptName: "cat2", levelId: "PT2-L1", name: "A", value: 40 },
{ ptId: 2, ptName: "cat2", levelId: "PT2-L2", name: "B", value: 25 },
//
{ ptId: 3, ptName: "cat3", levelId: "PT3-L1", name: "Level1", value: 40 },
{ ptId: 3, ptName: "cat3", levelId: "PT3-L2", name: "Level2", value: 105 },
{ ptId: 3, ptName: "cat3", levelId: "PT3-L3", name: "Level3", value: 123 },
{ ptId: 3, ptName: "cat3", levelId: "PT3-L4", name: "Level4", value: 65 },
{ ptId: 3, ptName: "cat3", levelId: "PT3-L5", name: "Level5", value: 35 },
//
{ ptId: 4, ptName: "cat4", levelId: "PT4-L1", name: "windows 1", value: 230 },
//
{ ptId: 5, ptName: "cat5", levelId: "PT5-L1", name: "A", value: 130 },
{ ptId: 5, ptName: "cat5", levelId: "PT5-L2", name: "B", value: 100 },
{ ptId: 5, ptName: "cat5", levelId: "PT5-L3", name: "C", value: 90 },
//
{ ptId: 6, ptName: "cat7", levelId: "PT6-L1", name: "D", value: 15 },
{ ptId: 6, ptName: "cat7", levelId: "PT6-L2", name: "E", value: 34 },
{ ptId: 6, ptName: "cat7", levelId: "PT6-L3", name: "F", value: 67 },
//
{ ptId: 7, ptName: "cat8", levelId: "PT7-L1", name: "1", value: 22 },
{ ptId: 7, ptName: "cat8", levelId: "PT7-L2", name: "2", value: 25 },
{ ptId: 7, ptName: "cat8", levelId: "PT7-L3", name: "3", value: 45 },
];
var dataSource = new kendo.data.DataSource({
data: data,
group: [
{ field: "ptId"}
]
});
dataSource.fetch(function(){
var groupedData = dataSource.view();
var series = [];
var chart;
for(vIndex = 0; vIndex < groupedData.length; vIndex++){
series.push({
name: groupedData[vIndex].items[0].ptName,
type:"column",
data: groupedData[vIndex].items
});
}
var options = {
seriesDefaults: {
spacing: -1,
gap: 0.5,
column: {
categoryField: "levelId",
field: "value",
tooltip: {
visible: true,
template: "#: series.name # #: dataItem.name # (#: value #)"
}
}
},
series:series,
legend: {
position: "bottom"
},
valueAxis: [{
}],
categoryAxis: [
{
//labels: { visible: true, rotation: -90, template: "#: dataItem.ptName # \r\n #: dataItem.name #" }
labels: { visible: true, rotation: -90, template: function(x){
return x.dataItem ? x.dataItem.name : "";
}
}
},
],
legendItemClick: function(l){
var s = chart.findSeriesByIndex(l.seriesIndex);
if(!l.series.visible == false)
{
s.data([]);
}
else{
s.data(series[l.seriesIndex].data);
}
}
};
chart = $("#chart").kendoChart(options).getKendoChart();
});
The solution looks correct. You could also use the built-in binding to grouped data and get the original series data from the dataSource on legend item click. I would also suggest to prevent the default action and manually toggle the visible state of the series options to avoid redrawing the chart twice - example.
Regards,
Daniel
Progress Telerik
Rank 1