Kendo Bar chart with grouped data with one list and line based on different list

Question

I have a kendo chart where in i have data from jan to jun in which it has multiple locations. For example Jan with A,B,Total as location and Feb with A,B,Total. Now i have to show the chart with bar with location and Line chart for Total. For showing the bar chart we have to do group by location and because of this for line also it is showing for all locations. Could you please help me how to resolve this.I have to draw the line chart without location it should be like for each month one total.

@(Html.Kendo().Chart(Model.CertifiedIronProductionReports)
 @(Html.Kendo().Chart(Model.CertifiedIronProductionReports)
                                .Name("CertifiedIronProduced")
                                .Legend(legend => legend
                                .Visible(true)
                                .Position(ChartLegendPosition.Top)
                                )
                                .ChartArea(chartArea => chartArea
                                .Background("transparent")
                                )
            .DataSource(datasource => datasource
                .Group(group => group.Add(model => model.Location))
                .Sort(sort => sort.Add(model => model.Month))
            )
                                .Series(series =>
                                {
                                    series.Column(Model.CertifiedIronProductionReports).CategoryField("Month").Field("IronCount");
                                })
                                .Series(series =>
                                {
                                    series.Line(Model.CertifiedIronProductionReports).CategoryField("Month").Field("Total").Axis("TotalAxis");
                                })
                                .CategoryAxis(axis => axis
                                    .Categories(categories => categories.Month)
                                    .AxisCrossingValue(0, 20)
                                )
                                .ValueAxis(axis => axis
                                .Numeric()
                                .Line(line => line.Visible(false))
                                .MajorGridLines(lines => lines.Visible(true))
                                )
            .ValueAxis(axis => axis
            .Numeric("TotalAxis")
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
            )
                                .Tooltip(tooltip => tooltip
                                .Visible(true)
                                .Template("#= series.name #: #= value #")
                                )
                            )

[{"lstTotal":null,"Location":"Tomball","IronCount":383,"Month":"Jan-2015","Total":0},{"lstTotal":null,"Location":"Average","IronCount":413,"Month":"Jan-2015","Total":0},{"lstTotal":null,"Location":"Grand Junction","IronCount":443,"Month":"Jan-2015","Total":0},{"lstTotal":null,"Location":"Total","IronCount":0,"Month":"Jan-2015","Total":826},{"lstTotal":null,"Location":"Tomball","IronCount":180,"Month":"Feb-2015","Total":0},{"lstTotal":null,"Location":"Average","IronCount":280,"Month":"Feb-2015","Total":0},{"lstTotal":null,"Location":"Grand Junction","IronCount":381,"Month":"Feb-2015","Total":0},{"lstTotal":null,"Location":"Total","IronCount":0,"Month":"Feb-2015","Total":561}]

Can you include an example of your json data and the code you have tried so far? — ezanker, Aug 25 '15 at 14:29
Hi Ezanker,I have added the code which i tried. Please help me on this — Samanth Kolisetty, Aug 26 '15 at 11:19

score 1 · Accepted Answer · answered Aug 26 '15 at 13:22

1

If you change total to null on all but one entry per month, the extra lines will not show up:

[
 {"lstTotal":null,"Location":"Tomball","IronCount":383,"Month":"Jan-2015","Total":null},
 {"lstTotal":null,"Location":"Average","IronCount":413,"Month":"Jan-2015","Total":null},
 {"lstTotal":null,"Location":"Grand Junction","IronCount":443,"Month":"Jan-2015","Total":null},
 {"lstTotal":null,"Location":"Total","IronCount":0,"Month":"Jan-2015","Total":826},
 {"lstTotal":null,"Location":"Tomball","IronCount":180,"Month":"Feb-2015","Total":null},
 {"lstTotal":null,"Location":"Average","IronCount":280,"Month":"Feb-2015","Total":null},{"lstTotal":null,"Location":"Grand Junction","IronCount":381,"Month":"Feb-2015","Total":null},
 {"lstTotal":null,"Location":"Total","IronCount":0,"Month":"Feb-2015","Total":561}
]

var dsCertpData = new kendo.data.DataSource({
    data: certData,
    group: {
        field: "Location",
    },
    sort:{       
        field :"Month",
        dir:"asc"
    }
});  

$("#chart1").kendoChart({
        dataSource: dsCertpData,
        legend: {
          position: "top",
          visible: true,
        },
        seriesColors: ["#00B0F0", "#E29B2C","#A05FCF","#3F890D"],
        series: [
          {
            type: "column",
            categoryField: "Month",
            field:"IronCount",
            stack: true
          },
          {
            type: "line",
            categoryField: "Month",
            field:"Total",
            visibleInLegend: false,
          }        
        ],
        tooltip: {
            visible: true,
            template: "${series.name} : ${value}"
        }
    });

DEMO

NOTE: you are currently sorting the month as a string, so Feb comes before Jan alphabetically. You will need to set your schema to use an actual date field to sort correctly.

answered Aug 26 '15 at 13:22

ezanker

24,628
1
20
35

Thanks a lot for the quick response. I will try this and let you know if i face any issue. – Samanth Kolisetty Aug 26 '15 at 13:34
Hi ezanker,you have any idea on chart export? – Samanth Kolisetty Aug 27 '15 at 02:11
I have to export the kendo chart image from javascript side but the code which i found it will show the pop up to save the image but i wanted to store the image in particular path without asking save and then export the image into excel and then add some data into another sheet in Excel along with the image.Please help me how to acheive this functionality.Because after i get the pop up it is not hitting the controller. – Samanth Kolisetty Aug 28 '15 at 05:29
@SamanthKolisetty, i don't really know. Are you using the ooxml class to create the excel workbook: http://docs.telerik.com/kendo-ui/api/javascript/ooxml/workbook? – ezanker Aug 28 '15 at 13:29
No I am trying to do in controller side using reponse write. – Samanth Kolisetty Sep 01 '15 at 06:04
@SamanthKolisetty, when you get the image, instead of saving can you use an AJAX POST to pass the image data to your controller: chart.exportImage().done(function(data) { //pass data via ajax }); – ezanker Sep 01 '15 at 13:41
I have to redraw the chart again in controller side? If possible could you please provide me some sample how to send the chart data to controller? – Samanth Kolisetty Sep 02 '15 at 05:07
@SamanthKolisetty in chart.exportImage().done(function(data) { //pass data via ajax }); 'data' is a base64 encoding of the image. Pass it as a parameter in an AJAX call to the server. I don't have any examples and don't know if it will work, just giving you an idea to try out... – ezanker Sep 02 '15 at 13:28
Hi Ezanker, I am able to export successfully with your idea. Thanks a lot for your help. Appreciate it. – Samanth Kolisetty Sep 04 '15 at 13:16
Hi Ezankar, Could you please help me on the below thread. If possible give an idea. http://stackoverflow.com/questions/32435369/kendo-chart-display-issue – Samanth Kolisetty Sep 07 '15 at 09:33
Hi Ezankar,You have any idea on kendo scheduler how to set the resources height – Samanth Kolisetty Sep 22 '15 at 13:40
Hi Ezanker,Could you please help me on this thread.http://stackoverflow.com/questions/33081795/kendo-grid-ecport-excel-with-wrap-text – Samanth Kolisetty Oct 12 '15 at 13:01
Hi Ezankar, can you help me on this thread http://stackoverflow.com/questions/33730858/kendo-grid-column-title-with-red-asterick-to-indicate-required-field – Samanth Kolisetty Nov 16 '15 at 08:12
Hi Ezankar, Can you help me on this thread http://stackoverflow.com/questions/34177391/kendo-chart-call-out-message – Samanth Kolisetty Dec 09 '15 at 11:15

Kendo Bar chart with grouped data with one list and line based on different list

1 Answers1