This is a migrated thread and some comments may be shown as answers.

Line Chart series color from datasource

5 Answers 323 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ronald
Top achievements
Rank 1
Ronald asked on 06 Aug 2013, 08:25 AM
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

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 08 Aug 2013, 07:40 AM
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!
0
Ronald
Top achievements
Rank 1
answered on 12 Aug 2013, 07:38 AM
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
0
Daniel
Telerik team
answered on 15 Aug 2013, 06:31 AM
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!
0
Greivin
Top achievements
Rank 1
answered on 15 Aug 2013, 09:08 PM
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
0
Angel
Top achievements
Rank 1
answered on 23 Jul 2020, 12:28 PM

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!

Tags
Charts
Asked by
Ronald
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Ronald
Top achievements
Rank 1
Greivin
Top achievements
Rank 1
Angel
Top achievements
Rank 1
Share this question
or