Line Chart series color from datasource

6 posts, 0 answers
  1. Ronald
    Ronald avatar
    19 posts
    Member since:
    Jun 2012

    Posted 06 Aug 2013 Link to this post

    Hi,

    How can I specify different series color for a Line chart in ASP.NET MVC using Razor?  I'm binding to grouped data and the color is in a field of the model.

    Thanks,
    Ronald
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 08 Aug 2013 Link to this post

    Hello Ronald,

    Do all objects for a group have the same color? If yes, then you could group the data and use the series Color method to set the color for the series based on the value in an object from the group. I attached a small sample project that shows this approach. 

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Ronald
    Ronald avatar
    19 posts
    Member since:
    Jun 2012

    Posted 12 Aug 2013 Link to this post

    Thanks for replying, Daniel.

    Yes, all objects of a group have the same color.

    I'm getting the data for the chart by calling the action using the DataSource option.  So the code for my chart looks something like the following:

    @(Html.Kendo().Chart<ViewModel>()
      .Name("chart")
      .DataSource(ds => ds
          .Read(read => read.Action("GetProducts","Products")
          .Group(group => group.Add(model => model.Country))
    .
    .
    .
    )
    The view model has a field Color. How do I use that in the code to set the series color?

    Thanks,
    Ronald
  4. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 15 Aug 2013 Link to this post

    Hello Ronald,

    There isn't a way to use the dataSource to pass the data and specify the color for each group. You should either bind the data on the server as demonstrated in the attached project or load the data via Ajax and then set the series to the chart options.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Greivin
    Greivin avatar
    1 posts
    Member since:
    Jul 2013

    Posted 15 Aug 2013 Link to this post

    Hi, I came here looking for an answer to the same need but using javascript, this is my code:
    var dataSource = new kendo.data.DataSource({
               //Your transport object here
               group: {
                    field: 'Manager' //Whatever group you need
                },
                schema: {
                    data: 'Data',
                    model: {
                        fields: {
                            Date: {
                                type: "date"
                            }
                        }
                    }
                }
            });
      
     var chart = $("#chart").kendoChart({
                dataSource: dataSource,
                legend: {
                    position: "bottom"
                },
                series:[
                {
                    type: 'line',
                    field: 'Amount',
                    categoryField: 'Date',
                    colorField: 'Color',
                    groupColor: function(item)
                    {
                        var series = item.series;
                          
                        series.color = series.data[item.index].Color;
                    }
                }]);
    And my json is:
    {"Data":[{"Date":"2013-08-01T00:00:00", "Amount":100, "Manager": "Greivin Britton", "Color":"#D13487"}, {... more records here..}]}
    Hope it helps

    --
    Greivin
  6. Angel
    Angel avatar
    1 posts
    Member since:
    Jul 2020

    Posted 23 Jul in reply to Greivin Link to this post

    A truly life saver! :D I had this very same problem and I was getting mad not being able to solve it. Your solution worked great and it is very interesting because:

    1 - colorField is not officially suported for line charts but it works with your solution though

    2 -groupColor is not in the official docs :O

    Thanks again!

Back to Top