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

Dynamically created Series overlapping lines priority and conditional plotting

1 Answer 15 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Lee asked on 28 Jul 2018, 03:12 AM


I'm currently creating Charts dynamically with a mixture of Columns and Lines.

I have two lines in this particular chart 1. Cumulative Total (CT) and 2. Forecast Cumulative Total (FCT).

What I'm trying to achieve is, for this financial year we calculate our "CT" up to the current month/year and anything after that we calculate our "FCT". 

How do i get these lines to match as the end of the period of the "CT" and start of "FCT".

I have attached an example that i can easy do in Excel.



1 Answer, 1 is accepted

Sort by
Telerik team
answered on 31 Jul 2018, 01:34 PM
Hello Lee,

In order to have two lines overlapping, the two series need to have one overlapping value. This means that for the current month/year category, you need to have both a CT value and a FCT value equal to the CT one. Otherwise, there will be a gap between the ending of the first series and the start of the second. 
However, the above logic requires the Chart to actually be bound to data items that are instances of a given model, so that you can have null values for the CT and FCT fields in different categories. For example:
        .Title("Spain electricity production (GWh)")
        .Legend(legend => legend
        .DataSource(ds => ds.Read(read => read.Action("Orders_Read", "Grid")))
        .Series(series =>
            series.Line(model => model.Freight).Name("Nuclear").CategoryField("OrderDate");
            series.Line(model => model.Freight2).Name("Hydro").CategoryField("OrderDate");

public ActionResult Orders_Read()
    List<OrderViewModel> result = new List<OrderViewModel>();
    result.Add(new OrderViewModel { OrderID = 1, OrderDate = DateTime.Now.AddDays(-10), Freight = 23 });
    result.Add(new OrderViewModel { OrderID = 2, OrderDate = DateTime.Now.AddDays(-9), Freight = 14 });
    result.Add(new OrderViewModel { OrderID = 3, OrderDate = DateTime.Now.AddDays(-8), Freight = 18 });
    result.Add(new OrderViewModel { OrderID = 4, OrderDate = DateTime.Now.AddDays(-7), Freight = 22 });
    result.Add(new OrderViewModel { OrderID = 5, OrderDate = DateTime.Now.AddDays(-6), Freight = 16 });
    result.Add(new OrderViewModel { OrderID = 6, OrderDate = DateTime.Now.AddDays(-5), Freight = 23, Freight2 = 23 });
    result.Add(new OrderViewModel { OrderID = 7, OrderDate = DateTime.Now.AddDays(-4), Freight2 = 15 });
    result.Add(new OrderViewModel { OrderID = 8, OrderDate = DateTime.Now.AddDays(-3), Freight2 = 18 });
    result.Add(new OrderViewModel { OrderID = 9, OrderDate = DateTime.Now.AddDays(-2), Freight2 = 17 });
    result.Add(new OrderViewModel { OrderID = 10, OrderDate = DateTime.Now.AddDays(-1), Freight2 = 22 });
    return Json(result, JsonRequestBehavior.AllowGet);

You can find a runnable example attached to this message.

However, you mentioned dynamic series. If the above solution does not work for you, could you explain how you currently declare your Chart and generate the series?

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.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question