How to add multiple series dynamically in kendo UI chart

Method1

<script type="text/javascript">

    var dataSource;

    function GetSelectedDuration() {
        return $("input:radio[name=Duration]:checked").val();
    }

    function ReBindDataSource() {
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://localhost/Home/GetDummydata",
                    cache: false,
                    data: { Duration: GetSelectedDuration() }
                }
            }
        });

        dataSource.fetch(function () {
            if (dataSource._data.length > 0) {
                var keys = Object.keys(dataSource._data[0]);
                ReDrawChart(keys);
            }
        });
    }


    function radioClicks() {
        ReBindDataSource();
    }


    $(document).ready(function () {

        $("input:radio[name=Duration]").bind("click", radioClicks);

        $("#mychart").kendoChart({
            title: {
                text: "Dynamic Column"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "column"
            },
            valueAxis: {
                labels: {
                    format: "{0}%"
                },
                line: {
                    visible: true
                }
            },
            categoryAxis: {
                field: "Field1",
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "{0}%",
                template: "#= series.field #: #= value #%"
            }

        });


        ReBindDataSource();
    });

    // Add series dynamically in chart
    function ReDrawChart(keys) {

        var InvalidColumnName = new Array("_events", "uid", "parent", "Field1");

        var chart = $("#mychart").data("kendoChart");
        var chartOptions = chart.options;

        var SeriesCount = 0;
        for (var k = 0; k < keys.length; k++) {
            var mykey = keys[k];
            if ($.inArray(mykey, InvalidColumnName) == -1) {
                chartOptions.series.push(new Object());
                chartOptions.series[SeriesCount].field = mykey;
                SeriesCount++;
            }
        }
        chart.setDataSource(dataSource);
        chart.redraw();
    }

</script>
<div>
<input checked="checked" name="Duration" type="radio" value="1" />Annully
    <input name="Duration" type="radio" value="2" />Monthly
    <input name="Duration" type="radio" value="3" />Weekly
    <input name="Duration" type="radio" value="4" />Daily
</div>
<div id="mychart">
</div>

Below code snippet is only for reference to create Dummy data in MVC. Controller

public class HomeController : Controller
{
    [AllowAnonymous]
    [HttpGet]
    public JsonResult GetDummydata(int Duration)
    {
        List>TestModels> models = GetDummyData(Duration);

        return Json(models, JsonRequestBehavior.AllowGet);
    }

    public List<TestModels> GetDummyData(int Duration)
    {
        List<TestModels> models = new List<TestModels>();

        switch (Duration)
        {
            case (int)DurationType.Annully:

                TestModels testModel = new TestModels();
                testModel.Field1 = "Annully";
                testModel.Field2 = 20;
                testModel.Field3 = 50;
                testModel.Field4 = 70;
                models.Add(testModel);

                break;
            case (int)DurationType.Monthly:

                TestModels testModel2 = new TestModels();
                testModel2.Field1 = "Monthly";
                testModel2.Field2 = 50;
                testModel2.Field3 = 50;
                testModel2.Field4 = 50;
                models.Add(testModel2);

                break;
            case (int)DurationType.Weekly:
                TestModels testModel3 = new TestModels();
                testModel3.Field1 = "Weekly";
                testModel3.Field2 = 70;
                testModel3.Field3 = 10;
                testModel3.Field4 = 90;
                models.Add(testModel3);
                break;
            case (int)DurationType.Daily:
                TestModels testModel4 = new TestModels();
                testModel4.Field1 = "Daily";
                testModel4.Field2 = 11;
                testModel4.Field3 = 111;
                testModel4.Field4 = 1111;
                models.Add(testModel4);
                break;

        }

        return models;
    }
}

Model

[Serializable]
public class TestModels
{   
        public string Field1 { get; set; }
        public int Field2 { get; set; }
        public int Field3 { get; set; }
        public int Field4 { get; set; }
}

Method2

<script type="text/javascript">

    var dataSource;

    function radioClicks() {
        getDataSource();
    }


    function GetSelectedDuration() {
        return $("input:radio[name=Duration]:checked").val();
    }

    function getDataSource() {
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://localhost:2116/Home/GetDummydata2",
                    cache: false,
                    data: { Duration: GetSelectedDuration() }
                }
            }
        });

        dataSource.fetch(function () {
            GenerateChartFromData();
        });
    }

    function GenerateChartFromData() {

        var chartSeries = [];

        var keys = Object.keys(dataSource._data[0]);
        var InvalidColumnName = new Array("_events", "uid", "parent", "Price");

        for (var k = 0; k < keys.length; k++) {
            var mykey = keys[k];
            if ($.inArray(mykey, InvalidColumnName) == -1) {
                chartSeries.push({ xField: "Price", yField: mykey, name: mykey.replace("_", ""), style: "smooth" });
            }
        }

        var titletxt = "Title text comes here - ";

        switch (parseInt(GetSelectedDuration())) {
            case 1:
                titletxt += "on " + chartSeries[0].name;
                break;
            case 2:
                titletxt += "with multiple series";
                break;
        }



        $("#chart").kendoChart({
            title: {
                text: titletxt
            },
            legend: {
                position: "right"
            },
            dataSource: dataSource,
            seriesDefaults: {
                type: "scatterLine"
            },
            series: chartSeries,
            xAxis: {
                min: 19,
                max: 46,
                labels: {
                    format: "{0}"
                }
            },
            yAxis: {
                // min: 80,
                labels: {
                    format: "{0}"
                },
                title: {
                    text: "testTitle"
                }
            }
        });

    }

    $(document).ready(function () {

        $("input:radio[name=Duration]").bind("click", radioClicks);

        getDataSource();
    });

</script>
<div>
<input checked="checked" name="Duration" type="radio" value="1" />Single series
    <input name="Duration" type="radio" value="2" />multiple series
</div>
<div id="chart">
</div>

Below code snippet is only for reference to create Dummy data in MVC. Controller

public JsonResult GetDummydata2(int Duration)
{


    switch (Duration)
    {
        case 1:

            List<testmodels_1> lst = new List<testmodels_1>();

            for (int i = 0; i < 20; i++)
            {
                int dtValue = 0;

                if (i < 10)
                {
                    dtValue = -478;
                }
                else if (i < 12)
                {
                    dtValue = -78;
                }
                else if (i < 14)
                {
                    dtValue = -28;
                }
                else if (i < 16)
                {
                    dtValue = 22;
                }
                else if (i < 18)
                {
                    dtValue = 72;
                }
                else
                {
                    dtValue = 122;
                }

                lst.Add(new TestModels_1() { Price = 20 + i, _07072014 = dtValue });
                lst.Add(new TestModels_1() { Price = 20.5M + i, _07072014 = dtValue });


            }

            return Json(lst, JsonRequestBehavior.AllowGet);
            break;
        case 2:

            List<testmodels_2> lst1 = new List<testmodels_2>();

            for (int j = 0; j < 20; j++)
            {
                int dtValue1 = 0;

                if (j < 10)
                {
                    dtValue1 = -478;
                }
                else if (j < 12)
                {
                    dtValue1 = -78;
                }
                else if (j < 14)
                {
                    dtValue1 = -28;
                }
                else if (j < 16)
                {
                    dtValue1 = 22;
                }
                else if (j < 18)
                {
                    dtValue1 = 72;
                }
                else
                {
                    dtValue1 = 122;
                }

                lst1.Add(new TestModels_2() { Price = 20 + j, _07072014 = dtValue1, _08072014 = dtValue1 - 20, _08082014 = dtValue1 - 30 });
                lst1.Add(new TestModels_2() { Price = 20.5M + j, _07072014 = dtValue1, _08072014 = dtValue1 - 70, _08082014 = dtValue1 - 80 });


            }
            return Json(lst1, JsonRequestBehavior.AllowGet);
            break;


    }


    return Json(new { IsError = true }, JsonRequestBehavior.AllowGet);
}

public DateTime? GetDateTimeFromString(string strDateTime)
{
    if (!string.IsNullOrEmpty(strDateTime.Trim()))
    {
        string pattern = "dd/MM/yyy";
        DateTime parsedDate;

        if (DateTime.TryParseExact(strDateTime.Trim(), pattern, null, System.Globalization.DateTimeStyles.None, out parsedDate))
        {
            return parsedDate;
        }
    }

    return null;
}

Model

[Serializable]
public class TestModels_1
{
        public decimal Price { get; set; }
        public decimal _07072014 { get; set; }
}

public class TestModels_2
    {
        public decimal Price { get; set; }
        public decimal _07072014 { get; set; }
        public decimal _08072014 { get; set; }
        public decimal _08082014 { get; set; }
}

DOWNLOAD DEMO