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

How to Show a Data

1 Answer 66 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 08 Jan 2019, 01:29 PM

I'm trying to show a line chart (date axis) that changes color. I realize the best way to do this is probably to have multiple series and each series a different color.

 

@model TimeLineChartViewModel
 
<div style="">
     
 
    @(Html.Kendo().Chart(Model.Data)
          .Name("chart123jjhj423")
          .Title("Probability of Failure")
          .Legend(false)
          .Series(series =>
          {
 
              foreach (var dataGroup in Model.Data.GroupBy(x => x.Color))
              {
                  series.Line(x => x.Value, x => x.DateTime)
                      .NoteTextField(Util.GetPropertyName<TimeLineChartDataPoint>(x => x.Note))
                      //.CategoryField("Color") // causes error (Cannot read property 'getTime' of undefined)
                      .Notes(notes => notes
                          .Label(label => label
                              .Position(ChartNoteLabelPosition.Outside))
                          .Position(ChartNotePosition.Bottom))
                      .Color(dataGroup.Key)
                      .Style(ChartLineStyle.Smooth)
                      .Markers(x => x.Visible(false));
              }
 
 
 
          })
          .CategoryAxis(axis => axis
              .Date()
              .BaseUnit(ChartAxisBaseUnit.Days)
              .RoundToBaseUnit(false)
              // .Title("time")
              .Labels(labels => labels.Rotation(310).Step(365 * 5).Format("yyyy"))
              .MajorGridLines(lines => lines.Visible(false))
              .MinorGridLines(lines => lines.Visible(false))
              .MajorTicks(lines => lines.Visible(true).Step(365 * 5).Size(15))
              .MinorTicks(lines => lines.Visible(false).Step(365))
          )
          .ValueAxis(axis => axis.Numeric()
              .Max(1.05)
              .Labels(labels =>
                  labels.Template("#= kendo.format('{0:P0}', value  ) #")
              //  labels.Visible(true)
              )
              .Title("Probability of Asset Failure")
              .MajorGridLines(lines => lines.Visible(false))
              //.MajorUnit(0.2)
              //.MinorUnit(0.5)
              .Visible(true)
          )
          //.Zoomable(zoomable => zoomable
          //    .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
          //    .Selection(selection => selection.Lock(ChartAxisLock.Y))
          //)
          .Tooltip(tooltip => tooltip
              .Visible(true)
              .Template("#= kendo.format('{0:p0}', value) # - #= kendo.toString(category, 'd') #")
          //.Template("#= kendo.toString(category, 'd')  # ")
          ))
</div>

 

public class TimeLineChartViewModel
{
 
    public List<TimeLineChartDataPoint> Data { get; set; }
    public bool Legend { get;  set; }
    public string Title { get; set; }
    public string XAxisTitle { get; set; }
 
    public string YAxisTitle { get; set; }
}
 
public class TimeLineChartDataPoint
{
    public DateTime DateTime { get; set; }
 
    public double Value { get; set; }
 
    public string Note { get; set; }
 
    public string Color { get; set; }
}

 

 

When I try running the above, only one color shows for all data points? How do I get the line color to be different? Setting the Category field in the series generates an error:

 

jquery?v=iMGCS2tVV4GjIWlaD6Jt8YXksWeHsA8tUmaXpQPvHJw1:1 Uncaught TypeError: Cannot read property 'getTime' of undefined
    at fu (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)
    at wo (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)
    at hi (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)
    at init.roundToTotalStep (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)
    at new init (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)
    at initFields (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)
    at init (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)
    at i [as constructor] (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)
    at new i (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)
    at i.createCategoryAxes (kendo?v=Ch_M82a2Ve1skh_-TT5n-noxLIMFwTpBlRrbN6I9v7c1:1)

Attached I have attached some sample data (sorry it's a screenshot).

 

 

 

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 10 Jan 2019, 09:25 AM
Hi Alex,

First, I want to make sure I understand the main requirement. Do you mean that you want a single line series to appear with multiple colors for different data points? This is not possible as the line series is a single path object and it can have a single color assigned. You can, however, bind the markers color to a field in the DataSource. You can see a client-side example that demonstrates the idea here:
https://dojo.telerik.com/eJuliKOQ

Let me know if you decide to use this approach and need help with translating it to the MVC Chart syntax.

As for the error that you are getting, it happens because your Chart declares a Date category axis by the series definition tries to bind the categories to the color instead of Date values:
.CategoryAxis(axis => axis
    .Date()
    .BaseUnit(ChartAxisBaseUnit.Days)
    .RoundToBaseUnit(false)
    // .Title("time")
    .Labels(labels => labels.Rotation(310).Step(365 * 5).Format("yyyy"))
    .MajorGridLines(lines => lines.Visible(false))
    .MinorGridLines(lines => lines.Visible(false))
    .MajorTicks(lines => lines.Visible(true).Step(365 * 5).Size(15))
    .MinorTicks(lines => lines.Visible(false).Step(365))
)

So, you need to set CategoryField("Date") instead in the series.

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart
Asked by
Alex
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or