This is a migrated thread and some comments may be shown as answers.
Combine stacks bar + line chart (MVC)
6 Answers 12 Views
This is a migrated thread and some comments may be shown as answers.
Ricky
Top achievements
Rank 1
Ricky asked on 04 Mar 2020, 11:00 PM

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 06 Mar 2020, 01:34 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Ricky
Top achievements
Rank 1
answered on 06 Mar 2020, 04:07 PM

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.

0
Ricky
Top achievements
Rank 1
answered on 06 Mar 2020, 09:08 PM
I have updated the sample code and it is fully functional.
0
Viktor Tachev
Telerik team
answered on 10 Mar 2020, 01:23 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Ricky
Top achievements
Rank 1
answered on 10 Mar 2020, 01:55 PM

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.

0
Viktor Tachev
Telerik team
answered on 12 Mar 2020, 01:12 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Chart
Asked by
Ricky
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Ricky
Top achievements
Rank 1
Share this question
or