Dynamically created Series overlapping lines priority and conditional plotting

2 posts, 0 answers
  1. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 27 Jul 2018 Link to this post

    Hi,

    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.

    Thanks,

    Lee.

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 31 Jul 2018 Link to this post

    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:
    @(Html.Kendo().Chart<TelerikMvcApp13.Models.OrderViewModel>()
            .Name("chart")
            .Title("Spain electricity production (GWh)")
            .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
            )
            .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?

    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.
Back to Top