Kendo UI Chart DataSource with multiple children

247 views Asked by At

I have a remote data and I am trying to build Kendo UI Chart's DataSource. The remote data represents a generic data model for most charts. The model goes like this,

     model: {
          fields: {
             Title: { field: "Title", type: "string" },
             XLabel: { field: "XLabel", type: "string" },
             YLabel: { field: "YLabel", type: "string" },
             Legend: [
                 {?????????{ type: "string" }}
                  ]
          },
          hasChildren: true,
          children: "ChartDataSets"
       }
     }

Sample of remote data:

    {
      "Chart": [
        {
          "Title": "1",
          "XLabel": "",
          "YLabel": "",
          "Legend": [ "P1","P2","P3"],
          "ChartDataSets": [
                   {
                      "GroupName": "Week 0",
                       "Series": [
                         {
                           "Key": "2015",
                           "Value": 42
                         },
                         {
                           "Key": "2016",
                           "Value": 42
                         }
                       ]  
                    },
                   {
                      "GroupName": "Week 1",
                       "Series": [
                         {
                           "Key": "2015",
                           "Value": 52
                         },
                         {
                           "Key": "2016",
                           "Value": 32
                         }
                       ]  
                    }
           ]
         }
      ]
   }...

So Legend is an array of strings and ChartDataSets is an array of json objects. How do I represent Legend as an array or that it has children?

Also, would you recommend using Hierarchical DataSource? How is the performance affected if I use Hierarchical DataSource?

__________Never Mind - Found it ____________ Solution:

     model: {
          fields: {
             Title: { field: "Title", type: "string" },
             XLabel: { field: "XLabel", type: "string" },
             YLabel: { field: "YLabel", type: "string" },
             Legend: [{field: "Legend"}]
          },
          hasChildren: true, ...
0

There are 0 answers