Chart series colors based on datasource groups

[Amrinder]

Hi Kendo  team,

Scenario:
Let's say I am building a chart (bar, column etc.). The data comes from a datasource and the datasource has grouping applied to it. How can I map series color to a group value. For example, datasource can be something like:
year: 2000, agegroup: group_a, pop: 1000
year: 2000, agegroup: group_b, pop: 1200
year: 2001, agegroup: group_a, pop: 1001
year: 2001, agegroup: group_b, pop: 1201
year: 2002, agegroup: group_a, pop: 1002
year: 2002, agegroup: group_b, pop: 1202

Say I group by 'year' and 'agegroup'. I want to apply series colors mapped to the groups. Also, the groups can be dynamic meaning, I can have group_c, group_d and so on in there returned by the server-side. I also have colors corresponding to a group value already there in the database, meaning group_a - red, group_b - green etc.

Hope I was able to provide sufficient details above.

Thanks,
Amrinder

[Iliana Dyankova]

Hello Amrinder,

I have already answered to your support ticket on the same subject, however I am pasting my reply here so the other users who are interested in the same scenario can read it:

In order to achieve the desired outcome I would suggest using the colorField of Kendo UI Chart. Please have in mind that when you get the group's color from the data, it will not apply for the legend. In order to match the colors in series and legend you need manually to set them. For this purpose you can hook up to the Chart's dataBound event and set the color via the options. For example:  

Copy Code

$("#chart").kendoChart({
  //....
  series: [{
        //....
     colorField: "color"
  }],
  dataBound: onDb
});

function onDb(){
  var chart = $("#chart").data("kendoChart");
  chart.options.series[0].color = chart.options.series[0].data[0].color;
  //....
}

Regards,
Iliana Nikolova
the Telerik team

[osman]

I made What You Say But Its not works ?
Please Look My Atteched File.
var mydata=[{"color":"#ec001f","name":"A","mach":"1","data":16524},{"color":"#8B8B00","name":"B","mach":"1","data":70908},{"color":"#603311","name":"C","mach":"1","data":24537},{"color":"#FF6103","name":"D","mach":"1","data":14654}];
$('#stacked').kendoChart({
dataSource:{
data:mydata,
group: {
field:"name",
dir:"asc"

},
schema:{
model:{
fields:{
"name":{"type":"string"},
"data":{"type":"number"},
"mach":{"type":"string"}
}
}
}
},
seriesDefaults : {
stack:true
},
series: [{type:"bar", field:"data", stack:true,colorField: "color"}],
categoryAxis: [{
field: "mach",
title: {
text: "Test",
padding: {
left: 20
}
}
}],
valueAxis: {

line: {
visible: true
},


title: {
text: "Time",
padding: {
top: 20
}
}
},
tooltip: {
visible: true,

template: "${dataItem.name}-${category} - ${value}",
color:"white"
}
}); 

[Iliana Dyankova]

Hello Osman,

Please check this forum thread - it describes the reason for the observed outcome and a possible solution.

Regards,
Iliana Nikolova
Telerik