Line Chart MVVM with Multiple Series from ObservableObject

[Michael]

I am trying to configure a kendo line chart using MVVM.  I am binding it to a ObservableObject.

            var viewModel = kendo.observable({
                issues: [
                    { month: new Date('1/1/2013'), cnt: 10 },
                    { month: new Date('2/1/2013'), cnt: 20 },
                    { month: new Date('3/1/2013'), cnt: 30 },
                    { month: new Date('4/1/2013'), cnt: 20 },
                    { month: new Date('5/1/2013'), cnt: 10 }
                ],
                cancels: [
                    { month: new Date('1/1/2013'), cnt: 5 },
                    { month: new Date('2/1/2013'), cnt: 10 },
                    { month: new Date('3/1/2013'), cnt: 15 },
                    { month: new Date('4/1/2013'), cnt: 10 },
                    { month: new Date('5/1/2013'), cnt: 5 }
                ]
            });

When I specify the data-bind attribute as "source: issues" I get a single series plotted on the chart..

My question is how can I bind the chart to plot both the "issues" data and "cancels" data from the ObservableObject

[Iliana Dyankova]

Hi Michael,

I replied to the same question in your support ticket, however I am pasting my reply here too so the other users who are following this thread can read it:

Generally speaking series in Kendo UI Chart are a simple array (link). Hence in order to achieve the desired result you should pass the series by the following way: 

//....
data-series='[{field: "issues", name: "issues"}, {field: "cancels", name: "cancels"}]'
//....

Also the data in the ViewModel should be: 

var viewModel = kendo.observable({
  data: [
    {
      "month": new Date('1/1/2013'),
      "issues": 10,
      "cancels": 5
    },{
      "month": new Date('2/1/2013'),
      "issues": 20,
      "cancels": 10
    },
    {
      "month": new Date('3/1/2013'),
      "issues": 30,
      "cancels": 15
    },{
      "month": new Date('4/1/2013'),
      "issues": 20,
      "cancels": 10
    },                                {
      "month": new Date('5/1/2013'),
      "issues": 10,
      "cancels": 5
    }
  ]
});

For your convenience I prepared a simple jsBin example which demonstrates a possible implementation.  

Regards,
Iliana Nikolova
the Telerik team