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);
                }
            });

Answer 1

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>