I have data showing on a Kendo chart almost exactly the way I want, with the exception I have to break out to of the series into the y2 axis.
function createMyChart(data) {
var chart = $("#myChart").data("kendoChart");
chart.setOptions({
valueAxis: { min: 0 },
dataSource: {
data: data.ChartModel,
group: {
field: "Series"
}
},
title: {
text: "My Chart"
},
legend: {
position: "right"
},
categoryAxis: {
field: "Group"
},
seriesColors:["blue", "red", "lightblue", "green"],
series: [{
name: "#= group.value #",
field: "Value",
color: "blue",
spacing: 0
}]
});
}
Essentially I have my data returning from an Ajax call, all properly formatted (Series = 1 of 4 possible series (string), Group = The desired grouping on the X-Axis (string), Value = self explanatory (int)). How can I tell the chart that I want Series 3-4 to be displayed on the y2 axis? All the examples I have seen want the series divided up and/or want a crossing point for the X-Axis to be a number.
Thanks,
Troy
6 Answers, 1 is accepted
I have it figured out, however the chart sorts by the series name, when I want it in the order of the array.
function createMyChart(data) {
var chart = $("#myChart").data("kendoChart");
chart.setOptions({
valueAxis: {
min: 0
},
seriesDefaults: {
type: "column"
},
dataSource: {
data: data.ChartModel,
group: {
field: "Series"
}
},
title: {
text: "My Chart"
},
legend: {
position: "right"
},
categoryAxis: {
field: "Group",
axisCrossingValues: [0, 100], //set the second value high, moves y2 right
title: {
text: "My X Axis Title"
}
},
seriesColors:["blue", "red", "lightblue", "green"],
series: [{
name: "#= group.value #",
field: "Value",
spacing: 0
}],
valueAxes: [{
title: { text: "My Y Axis Title" },
}, {
name: "y2AxisName",
title: { text: "My Y2 Axis Title" },
}]
});
chart.options.series[1].axis = "y2AxisName";
chart.options.series[2].axis = "y2AxisName";
chart.options.series[0].name = chart.options.series[0].name.substring(1);
chart.options.series[1].name = chart.options.series[1].name.substring(1);
chart.options.series[2].name = chart.options.series[2].name.substring(1);
chart.options.series[3].name = chart.options.series[3].name.substring(1);
chart.refresh();
Now my name of the series is set as "1SeriesName", "2SeriesName" etc. So all I am doing is removing the first character after. I have tried adding an order field to my Json data, but the chart seems to ignore it wherever I try to place the order.
Is there anyway to do everything inside setoptions and not call chart.refresh()? Otherwise it is working exactly as I want.
Troy
You could set these options in the chart dataBound event. Take a look at this dojo and let me know if this will fit the current requirements.
Regards,
Iliana Nikolova
Telerik
Hello Iliana,
That is definately preferable, and is working quite well with one minor annoyance. For whatever reason in my application I am having the databound event fire twice. As a result I have had to add the following lines:
var chart = e.sender;
if (chart.options.series[0].name[0] !== "1")
return;
Since I am prefixing the series with numbers, this will work ok as a quick check. The only thing I can see different between your example and my code, is that I am assigning the datasource directly from an ajax call as I am returning a few complex objects/arrays where the calculations I am returning have to go in two different directions. Any idea as to what could be causing the databound to fire twice?
Not a big deal as I can dump out immediately, however I am worried I have set something up wrong.
Thanks and Kind Regards,
Troy
The dataBound event will be triggered when calling refresh / setOptions methods. What I would suggest as a workaround is to bind the event after the setOptions call. For your I modified the dojo.
Regards,
Iliana Nikolova
Telerik
Unfortunately in my instance, I am not getting the databound event raised after setOptions. I imagine it is because I do not have a read event since my ajax call is already done. At any rate the solution I presented above is working well enough for what I need to do and while not elegant, I don't think I will experience any problems with it, or that cannot be quickly modified if I do encounter a series starting with "1".
Thank you for your time,
Troy