Line Chart series color from datasource

[Ronald]

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

[Daniel]

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

[Ronald]

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

[Daniel]

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

[Greivin]

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

[Angel]

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!