This is a migrated thread and some comments may be shown as answers.
Line Chart MVVM with Multiple Series from ObservableObject
1 Answer 48 Views
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 09 May 2013, 03:25 PM
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

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 10 May 2013, 11:32 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Michael
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or