Combine stacks bar + line chart from an json datasource

3 posts, 0 answers
  1. jan willem fransen
    jan willem fransen avatar
    40 posts
    Member since:
    Dec 2005

    Posted 12 May 2015 Link to this post

    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

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 14 May 2015 Link to this post

    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!
     
  3. jan willem fransen
    jan willem fransen avatar
    40 posts
    Member since:
    Dec 2005

    Posted 14 May 2015 in reply to Iliana Nikolova Link to this post

    Hello Iliana,

     Thank you for your example, that is part of the sollution I need in this case. The example you provided has a know and fixed number of series.

    For this project the json returns an unkown number of series (1 to 7) and a average total historical score. For the client we want the series to be presented in a stacked bar (representing the total) and the average total historical score in a line representation (making a nice distinction between the 2).

    For this reason I adjusted the json to return something like this:  

    01.<Meter>
    02.<Datum>2012-01-01T00:00:00</Datum>
    03.<DatumString>jan 2012</DatumString>
    04.<Eenheid>Eenheden</Eenheid>
    05.<IsTotaal>false</IsTotaal>
    06.<Naam>keuken 1</Naam>
    07.<Waarde>66</Waarde>
    08.</Meter>

     

    09.<Meter>
    10.<Datum>2012-01-01T00:00:00</Datum>
    11.<DatumString>jan 2012</DatumString>
    12.<Eenheid>Eenheden</Eenheid>
    13.<IsTotaal>false</IsTotaal>
    14.<Naam>slaapkamer 1</Naam>
    15.<Waarde>90.6</Waarde>
    16.</Meter>

     

    In de script I use 

    1.group: {
    2.                        field: "Naam",
    3.                        dir: "asc"
    4.                    },

    To collect all the different categories and display them in the graph. This works nicely for the stacked bar. But somehow I need to insert a extra serie for the historical average.

     At this point I provide the client with 2 different graph. This works of course, but he would like to have it all in one graph. I have full control over the generated json, so I can manipulate that if needed.

     Thanks,

    Jan Willem

     

     

     

Back to Top