This is a migrated thread and some comments may be shown as answers.

Kendo UI Column Bar chart

10 Answers 45 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Vvamc
Top achievements
Rank 1
Vvamc asked on 01 Aug 2017, 07:59 PM

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

 

 

10 Answers, 1 is accepted

Sort by
0
Vvamc
Top achievements
Rank 1
answered on 01 Aug 2017, 08:04 PM
Team 1 2 3 4 5 are column names in the database table 
0
Vvamc
Top achievements
Rank 1
answered on 01 Aug 2017, 08:05 PM
team 1 2 3 4 5 are database column names
0
Vvamc
Top achievements
Rank 1
answered on 01 Aug 2017, 08:05 PM
team 1 2 3 4 5 are database column names
0
Alex Hajigeorgieva
Telerik team
answered on 03 Aug 2017, 01:25 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Vvamc
Top achievements
Rank 1
answered on 03 Aug 2017, 02:28 PM

Hi Alex,

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

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 07 Aug 2017, 08:09 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
EZ
Top achievements
Rank 2
answered on 07 Aug 2017, 03:58 PM

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...  },
  ...
]
0
Vvamc
Top achievements
Rank 1
answered on 07 Aug 2017, 04:43 PM

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
   }
]

0
Vvamc
Top achievements
Rank 1
answered on 07 Aug 2017, 04:45 PM
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
   }
]
0
EZ
Top achievements
Rank 2
answered on 07 Aug 2017, 06:14 PM

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.

Tags
Charts
Asked by
Vvamc
Top achievements
Rank 1
Answers by
Vvamc
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
EZ
Top achievements
Rank 2
Share this question
or