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

Bar Column Chart is not produced with below data

3 Answers 72 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Vvamc
Top achievements
Rank 1
Vvamc asked on 02 Aug 2017, 12: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. 

Above team 1 2 3 4 5 are column headers in the sql table

I need to display data in the below format. Please help me.

3 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 04 Aug 2017, 07:00 AM
Hi Vvamc,

To achieve the illustrated outcome bind the chart to a dataSource with the following JSON structure: 
      [{
          "team": "1",
          "series1": 100,
          "series2": 50,
          "series3": 40,
          "series4": 30,
          "series5": 20,
        },{
          "team": "2",
          "series1": 200,
          "series2": 250,
          "series3": 200,
          "series4": 50,
          "series5": 0,
        },
//....

Hence define 5 series - series1, series2 etc.
series: [{
    field: "series1",
    name: "Series 1"
  },{
    field: "series2",
    name: "Series 2"
  },
  //....

For your convenience here is an example which demonstrates the above approach in action -> http://dojo.telerik.com/@Iliana/AYUMaM

More details about binding Kendo UI Chart to a dataSource as well as defying series can be found in the following documentation section:

http://docs.telerik.com/kendo-ui/controls/charts/data-binding#bind-series-to-data-source 

Regards,
Iliana Nikolova
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 06 Aug 2017, 02:55 PM

HI lliana,

I want the series on x axis.(1,2,3,4,5)on x axis . The team names on the projections.Can you please help me ? Should I use the Group?

 

Regards,
Vamsi Adivi

0
Alex Hajigeorgieva
Telerik team
answered on 08 Aug 2017, 02:58 PM
Hello Vvamc,

I believe this thread is a duplicate of this forum post:

http://www.telerik.com/forums/kendo-ui-column-bar-chart

Please let us continue the thread there to avoid duplicated topics.

Thank you very much for your understanding.

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.
Tags
Charts
Asked by
Vvamc
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Vvamc
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or