Chart series colors based on datasource groups

4 posts, 0 answers
  1. Amrinder
    Amrinder avatar
    10 posts
    Member since:
    Aug 2012

    Posted 22 Jan 2013 Link to this post

    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

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 23 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. osman
    osman avatar
    19 posts
    Member since:
    May 2013

    Posted 13 Jun 2013 Link to this post

    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"
    }
    }); 
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 13 Jun 2013 Link to this post

    Hello Osman,

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

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top