Kendo UI Column Bar chart

[Vvamc]

Hi,

I have a JSON data coming from a webapi  from the table which is displayed in the below format

 

Team                        1             2          3            4         5

Series1                     100     200      300         50       10

Series2                      50        250       300      340      20 

Series3                     40      200       300       400       30

Series4                      30         50        70       80           90

Series5                        20        0          5          0            0

 

I need to display a column bar chart  in the format attached below

 

 

[Vvamc]

Team 1 2 3 4 5 are column names in the database table 

[Vvamc]

team 1 2 3 4 5 are database column names

[Vvamc]

team 1 2 3 4 5 are database column names

[Alex Hajigeorgieva]

Hello Vvamc,

The provided screenshot looks very much like the Kendo UI Columns Charts:

http://demos.telerik.com/kendo-ui/bar-charts/column

Have a look at their configuration and let me know if there is something which I can help with.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Vvamc]

Hi Alex,

I need to display 1,2,3,4,5 on the x axis and the Group of team on Y 

[Alex Hajigeorgieva]

Hello Vvamc,

I have prepared a runnable demo using the provided table data.

To have 1,2,3,4,5 on the xAxis, add them to the categoryAxis.categories like so:

http://dojo.telerik.com/@bubblemaster/EFEKa

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[EZ]

What does your JSON actually look like

e.g. 

[
  { "Category": "Series1", "Team1": 100, "Team2": 200... },
  { "Category": "Series2", "Team1": 50, "Team2": 250...  },
  ...
]

or

[
  { "Team": "1", "Series1": 100, "Series2": 50... },
  { "Team": "2", "Series1": 200, "Series1": 250...  },
  ...
]

[Vvamc]

Hi Eric,

[  
   {  
      "Team":"Series1",
      "1":47.25,
      "2":80.0,
      "3":133.0,
      "4":81.0,
      "5":139.0
   },
   {  
      "Team":"Series2",
      "1":21.0,
      "2":14.0,
      "3":null,
      "4":1.25,
      "5":34.75
   },
   {  
      "Team":"Series3",
      "1":11.0,
      "2":null,
      "3":474.0,
      "4":15.75,
      "5":159.25
   },
   {  
      "Team":"Series 4",
      "1":73.0,
      "2":null,
      "3":670.0,
      "4":0.25,
      "5":58.25
   },
   {  
      "Team":"Series 5",
      "1":9.5,
      "2":null,
      "3":39.5,
      "4":null,
      "5":45.75
   }
]

[Vvamc]

Hi Eric,
[  
   {  
      "Team":"Series1",
      "1":47.25,
      "2":80.0,
      "3":133.0,
      "4":81.0,
      "5":139.0
   },
   {  
      "Team":"Series2",
      "1":21.0,
      "2":14.0,
      "3":null,
      "4":1.25,
      "5":34.75
   },
   {  
      "Team":"Series3",
      "1":11.0,
      "2":null,
      "3":474.0,
      "4":15.75,
      "5":159.25
   },
   {  
      "Team":"Series 4",
      "1":73.0,
      "2":null,
      "3":670.0,
      "4":0.25,
      "5":58.25
   },
   {  
      "Team":"Series 5",
      "1":9.5,
      "2":null,
      "3":39.5,
      "4":null,
      "5":45.75
   }
]

[EZ]

It is bad practice to have JSON parameters that start with numbers (or just numbers in your case) as JavaScript has problems when converting to an Object. I believe the KendoUI chart does not handle this well either...

If you don't know the number of teams and points ahead of time, I would take the data from the database in this format:

var data = [
  {"Team": "Series 1", "X": 1, "Y": 47.25},
  {"Team": "Series 1", "X": 2, "Y": 80},
  {"Team": "Series 1", "X": 3, "Y": 133},
  {"Team": "Series 1", "X": 4, "Y": 81},
  {"Team": "Series 1", "X": 5, "Y": 139},
  {"Team": "Series 2", "X": 1, "Y": 21},
  {"Team": "Series 2", "X": 2, "Y": 14},
  {"Team": "Series 2", "X": 3, "Y": null},
  {"Team": "Series 2", "X": 4, "Y": 1.25},
  {"Team": "Series 2", "X": 5, "Y": 34.75},
  {"Team": "Series 3", "X": 1, "Y": 11},
  {"Team": "Series 3", "X": 2, "Y": null},
  {"Team": "Series 3", "X": 3, "Y": 474},
  {"Team": "Series 3", "X": 4, "Y": 15.75},
  {"Team": "Series 3", "X": 5, "Y": 159.25},
  {"Team": "Series 4", "X": 1, "Y": 73},
  {"Team": "Series 4", "X": 2, "Y": null},
  {"Team": "Series 4", "X": 3, "Y": 670},
  {"Team": "Series 4", "X": 4, "Y": 0.25},
  {"Team": "Series 4", "X": 5, "Y": 58.25},
  {"Team": "Series 5", "X": 1, "Y": 9.5},
  {"Team": "Series 5", "X": 2, "Y": null},
  {"Team": "Series 5", "X": 3, "Y": 39.5},
  {"Team": "Series 5", "X": 4, "Y": null},
  {"Team": "Series 5", "X": 5, "Y": 45.75},
]

 

Then you can use Grouping on the team field to get what you want:

var theDataSource = new kendo.data.DataSource({
  data: data,
  group: {
    field: "Team"
  },
   sort: {
    field: "X",
    dir: "asc"
  }
 });

 

DOJO DEMO

With this JSON structure and grouping on team, the chart will render correctly no matter the number of teams or points.