Grouped data and multi axis

[Troy]

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

[Troy]

Partially figured it out, apparently it is valueAxes I need to be looking at.

[Troy]

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

[Iliana Dyankova]

Hi 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

 

 

[Troy]

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

[Iliana Dyankova]

Hi 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

 

 

[Troy]

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