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

Combine stacks bar + line chart from an json datasource

1 Answer 106 Views
Charts
This is a migrated thread and some comments may be shown as answers.
jan willem fransen
Top achievements
Rank 1
jan willem fransen asked on 12 May 2015, 03:27 PM

Hi,

I'm struggling to get a combination between a stackes bar and line chart. I have seen the examples (http://demos.telerik.com/kendo-ui/bar-charts/multiple-axes) basicly this is what I need. The only problem that I have json datasource (from a webapi).

 

How can I accomplish this.

   

01.$("#chart").kendoChart({
02.          theme: "Bootstrap",
03.          dataSource: {
04.              transport: {
05.                  read: {
06.                      url: "/api/meters/GetIndividueleMeters/
07.                      dataType: "json",
08.                      method: "get"
09.                  }
10.              },
11.              group: {
12.                  field: "Naam",
13.                  dir: "asc"
14.              },
15.              sort: {
16.                  field: "Datum",
17.                  dir: "asc"
18.              },
19.              requestStart: function () {
20.                  kendo.ui.progress($("#loading"), true);
21.              },
22.              requestEnd: function () {
23.                  kendo.ui.progress($("#loading"), false);
24. 
25.              }
26.          },
27.          legend: {
28.              position: "bottom"
29.          },
30.          seriesDefaults: {
31.              type: "column",
32.              stack: true
33.          },
34.          series: [{
35.              field: "Waarde"
36.          },

> here is something needed I presume

 
    ],
37.          categoryAxis: {
38.              field: "DatumString",
39.              labels: {
40.                  rotation: -45
41.              }
42.          },
43.          tooltip: {
44.              visible: true,
45.              template: "#= value # / #= series.name #"
46.          },
47.          dataBound: function (e) {
48. 
49.              $(".Laadtekst").hide();
50. 
51.              if (this.dataSource.data().length == 0) {
52.                  $(".GeenGegevensTekst").show();
53.              }
54.              else {
55.                  $("#chart").show();
56.              }
57.          }
58.      });

Thanks

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 14 May 2015, 07:49 AM

Hi Jan Willem,

For this scenario you should define multiple series and specify series.field. For your convenience I modified the Binding ro remote data demo - please check this dojo.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
jan willem fransen
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or