Setting Multiple chart series datasource for a Kendo chart through JQuery

Question

I have a Kendo Chart defined on my cshtml page as below:

@(Html.Kendo().Chart<MyModel>()
        .Name("chart")
        .Title("")
        .Legend(legend => legend
            .Visible(false)
        )
        .Series(series =>
         {
                    series.Scatter(model => model.X, model => model.Y);
                    series.Scatter(model => model.X, model => model.Y);
        })
        )

I need to set the data of each of these series using a JQuery call. My JQuery call and returning data works fine, and the below will populate the first series data:

 function GetChartData(ex,ten) {
            var str = "{'arg': '" + ex + "', 'arg2': '" + ten ' }";
            $.ajax({
                type: 'POST',
                url: '/Controller/CreateChartData',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: str ,
                success: function (data) {

                    var grid = $("#chart").data("kendoChart");
                    grid.dataSource.data(data.ChartData);
                    grid.refresh();

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });

I am however, unable to set the second series data. I have tried the following which rendered nothing on the chart:

 function GetChartData(ex,ten) {
            var str = "{'arg': '" + ex + "', 'arg2': '" + ten ' }";
            $.ajax({
                type: 'POST',
                url: '/Controller/CreateChartData',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: str ,
                success: function (data) {

                    var grid = $("#chart").data("kendoChart");
            grid.options.series[0].data = data.ChartData;
           grid.options.series[1].data = data.ChartDataSeries2; 

                    grid.refresh();

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });

I'm using Kendo UI charts on a couple sites and they can be really picky sometimes. Do you get any js errors while trying to bind two series? — Andrew Walters
No, no errors at all. The data is coming back ok, but setting the datasource only sets the first series. — Ben

Andrew Walters Andrew Walters · Accepted Answer · 2012-09-19T14:36:40

Something you might try, is to not initialize that chart until after you have all the data.

That way instead of calling refresh() you can pass both series to the .kendoChart() method

function GetChartData(ex,ten) {
        var str = "{'arg': '" + ex + "', 'arg2': '" + ten ' }";
        $.ajax({
            type: 'POST',
            url: '/Controller/CreateChartData',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: str ,
            success: function (data) {

                 $("#chart").kendoChart({
                    theme: $(document).data("kendoSkin") || "default",
                    title: {
                        text: "Example"
                    },
                    legend: {
                        visible: true
                    },
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    series: [{
                        name: "series1",
                        data: data.ChartData
                    }, {
                        name: "series2",
                        data: data.ChartDataSeries2
                    }, {
                        name: "series3",
                        data: data.ChartDataSeries3
                    }]
                });
            }

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });

Working aspx example page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GraphTest.aspx.cs" Inherits="GraphTest" %>

<link rel="stylesheet" href="/css/kendo.common.min.css" />
<link rel="stylesheet" href="/css/kendo.metro.min.css" />
<link rel="stylesheet" href="/css/kendo.kendo.min.css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>        window.jQuery || document.write('<script src="/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script src="/js/libs/kendo.all.min.js" type="text/javascript"></script>
<title></title>

    <div id="example" class="k-content">
        <div class="chart-wrapper">
            <div id="chart"></div>
        </div>
        <script>
            function createChart() {

                var data1 = [[10, 10], [15, 20], [20, 25], [32, 40], [43, 50], [55, 60], [60, 70], [70, 80], [90, 100]];

                $("#chart").kendoChart({
                    theme: $(document).data("kendoSkin") || "default",
                    title: {
                        text: "Charge current vs. charge time"
                    },
                    legend: {
                        visible: true
                    },
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    series: [{
                        name: "0.8C",
                        data: data1
                    }, {
                        name: "1.6C",
                        data: [[10, 40], [17, 50], [18, 70], [35, 90], [47, 95], [60, 100]]
                    }, {
                        name: "3.1C",
                        data: [[10, 70], [13, 90], [25, 100]]
                    }],
                    xAxis: {
                        max: 90,
                        labels: {
                            format: "{0}m"
                        },
                        title: {
                            text: "Time"
                        }
                    },
                    yAxis: {
                        max: 100,
                        labels: {
                            format: "{0}%"
                        },
                        title: {
                            text: "Charge"
                        }
                    },
                    tooltip: {
                        visible: true,
                        format: "{1}% in {0} minutes"
                    }
                });
            }

            $(document).ready(function () {
                setTimeout(function () {
                    // Initialize the chart with a delay to make sure
                    // the initial animation is visible
                    createChart();

                    $("#example").bind("kendo:skinChange", function (e) {
                        createChart();
                    });
                }, 400);
            });
        </script>
    </div>


</div>
</form>

Setting Multiple chart series datasource for a Kendo chart through JQuery

1 Answers