Create Bar Chart Using Kendo Data Viz MVC

Question

I want to create one Bar Chart using Kendo Data Viz with Data Like below

     Service Center      Trouble Found      Total Trouble Found
     Al Badia            dark screen        6
     Al Badia            no/small sound     6
     Al Badia            Others             2
     Al Ain              dark screen        2

I want to shown the above data in two Bars

For Al Badia (there will be one bar which will show 3 color for each trouble found @particular service center and when hovering on each it will show total troubles of that service center , like this for Al Ain there will be only one bar because there is only one trouble found for that.

Can i achieve this using kendo mvc wrapper? How Should we create POCO for achieving this ?

score 2 · Answer 1 · answered Dec 26 '13 at 15:22

You should group them by Service Center such that your objects are as such

[{ServiceCenter: Al Bandia,
 DarkScreen: 6,
 SmallSround: 6,
 Other: 2
 },
 {ServiceCenter: Al Ain,
 DarkScreen: 2,
 SmallSround: 0,
 Other: 0
 }]

You could then build an kendo chart with stacked columns like this (I use ViewModels in my projects)

@(Html.Kendo().Chart<Project.ViewModels.ServiceCenterViewModel>()
 .Name("ChartName")
 .Series(series =>
 {
     series.Bar(s => s.DarkScreen);
     series.Bar(s => s.SmallSound);
     series.Bar(s => s.Other);
 })
 .SeriesDefaults(sd => sd.Bar().Stack(true))
 .CategoryAxis(axis => axis.Categories(c => c.ServiceCenter))
 .Tooltip(t => t.Template("Center: #= data.category # <br> Total: #= dataItem.DarkScreen + dataItem.SmallSound + dataItem.Other #"))
)

Create Bar Chart Using Kendo Data Viz MVC

1 Answers1