Combine stacks bar + line chart (MVC)

[Ricky]

I would like to combine a stacked bar and line chart in the same graph. I am able to generate the stacked bars, however, I am having difficulties generating the line graph. The data for the chart is fed from the Model. Any help is appreciated.

Here is the "View"

01.@(Html.Kendo().Chart<MyModelName>()
02.                        .Name("MyChartName")
03.                        .AutoBind(true)
04.                        .Legend(legend => legend
05.                        .Visible(true)
06.                        )
07.                        .DataSource(ds => ds
08.                        .Read(read => read.Action("MyAction", "MyController"))
09.                        .Group(group => group.Add(model => model.Country))
10.                        )
11.                        .SeriesDefaults(seriesDefaults =>
12.                        seriesDefaults.Column().Stack(true)
13.                        )
14.                        .Series(series =>
15.                        {
16.                        series
17.                        .Column(model => model.ValueAmount)
18.                        .CategoryField("ValueYearMonth")
19.                        .Labels(labels => labels
20.                                .Visible(true)
21.                                .Background("transparent").Visible(true)
22.                                .Position(ChartBarLabelsPosition.OutsideEnd))
23.                        ;
24.                        series
25.                            .Line(model => <!!! NOT SURE HERE !!!>) //model.ValueAmount does not work
26.                        //.Line (new int[] { 35, 25, 50, -10, 15, 5, 35 })  //
27.                            .Color("#ff1c1c");
28.
29.    })
30.                        .CategoryAxis(axis => axis
31.                        .Labels(label => label
32.                        .Position(ChartAxisLabelsPosition.Start)
33.                        )
34.                        .MajorGridLines(lines => lines.Visible(true))
35.                        .Line(line => line.Visible(false))
36.                        .Visible(true)
37.                        )
38.                        .ValueAxis(axis => axis.Numeric()
39.                        .MajorGridLines(lines => lines.Visible(false))
40.                        .Visible(true)
41.                        )
42.                        .Tooltip(tooltip => tooltip
43.                        .Visible(true)
44.                        )
45.                        .Events(events => events
46.                            .DataBound("onDataBoundStackedChart")
47.                        )
48.                    )

 

The Model:

01.public class MyModel
02.{
03.    public string Country { get; set; }
04.    public decimal ValueAmount { get; set; }
05.    public string Color { get; set; }
06.    public DateTime ValueDate { get; set; }
07.    public int ValueYearMonth { get; set; }
08.    public decimal GlobalValueAmountByMonth { get; set; }
09.}

 

And the Controller reads the data into the Model  and  "return Json(result);"

Thanks in advance,

Ricky

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Viktor Tachev]

Hi Ricky,

 

I examined the code and did not notice something obvious that would prevent showing the two types of series. 

Would you send us a sample project where the behavior is reproduced? This will enable us to examine it locally and look for what is causing the behavior.

 

Regards,
Viktor Tachev
Progress Telerik

[Ricky]

I have attached the sample project. However, for some reason, my visual studio was not recognizing the @(Html.Kendo().Chart<> tag. There is probably something simple that I am missing. The code is all there otherwise. I have also removed the bin directory to meet the maximum size of the attachment.

Thanks for the help.

[Ricky]

I have updated the sample code and it is fully functional.

[Viktor Tachev]

Hello Ricky,

 

Thank you for the runnable project.

I examined it and noticed that the data is grouped by Country. With this configuration there will be a separate series for each group. This is why there is a line only for the last two categories - both belong to the group "CAN". The other groups have a single data point and that is why there is only a single dot for each line series.

If you would like an example on binding a line chart to grouped data check out the example below that illustrates the approach:

https://demos.telerik.com/aspnet-mvc/line-charts/grouped-data

 

Regards,
Viktor Tachev
Progress Telerik

[Ricky]

Viktor,

Given your comments, is there a way to create a trend line that follows the stacked bar? Is it even possible? I have attached a picture as an example.

Thanks.

[Viktor Tachev]

Hello Ricky,

 

In order to achieve the behavior I would suggest returning additional data from the server. The additional data will be used by the line chart so it can be drawn as expected.

 

Regards,
Viktor Tachev
Progress Telerik