This is a migrated thread and some comments may be shown as answers.

Grouped data and multi axis

6 Answers 208 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Troy
Top achievements
Rank 1
Troy asked on 09 Sep 2015, 02:56 PM

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

Sort by
0
Troy
Top achievements
Rank 1
answered on 09 Sep 2015, 04:42 PM
Partially figured it out, apparently it is valueAxes I need to be looking at.
0
Troy
Top achievements
Rank 1
answered on 09 Sep 2015, 06:08 PM

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

0
Iliana Dyankova
Telerik team
answered on 11 Sep 2015, 02:01 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Troy
Top achievements
Rank 1
answered on 11 Sep 2015, 07:59 PM

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

0
Iliana Dyankova
Telerik team
answered on 15 Sep 2015, 12:03 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Troy
Top achievements
Rank 1
answered on 16 Sep 2015, 07:15 PM

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

Tags
Charts
Asked by
Troy
Top achievements
Rank 1
Answers by
Troy
Top achievements
Rank 1
Iliana Dyankova
Telerik team
Share this question
or