Line Chart MVVM with Multiple Series from ObservableObject

2 posts, 0 answers
  1. Michael
    Michael avatar
    1 posts
    Member since:
    Dec 2012

    Posted 09 May 2013 Link to this post

    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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 10 May 2013 Link to this post

    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!
Back to Top