Edit this page

Set Different Chart Series Types According to the DataItem Property

Environment

Product Charts for ProgressĀ® Kendo UIĀ®
Operating System All
Browser All
Browser Version All

Description

How can I dynamically set the Chart series type after the data was bound and depending on a specific property of the points?

Solution

Use the grouping capabilities of the Chart while setting the series type on the dataBound event.

<div id="example">
  <div class="demo-section k-content wide">
    <div id="chart"></div>
  </div>
  <script>
    function createChart() {
      var data = [{
          value: 1,
          name: 'Bid',
          category: new Date(2018, 0, 1)
        },
        {
          value: 2,
          name: 'Offer',
          category: new Date(2018, 0, 1)
        },
        {
          value: 3,
          name: 'Volume',
          category: new Date(2018, 0, 1)
        },
        {
          value: 4,
          name: 'Bid',
          category: new Date(2018, 1, 1)
        },
        {
          value: 5,
          name: 'Offer',
          category: new Date(2018, 1, 1)
        },
        {
          value: 6,
          name: 'Volume',
          category: new Date(2018, 1, 1)
        }
      ];

      $("#chart").kendoChart({
        dataSource: {
          data: data,
          group: {
            field: "name"
          }
        },
        series: [{
          field: "value",
          categoryField: "category"
        }],
        valueAxis: [{}, {
          name: 'columnAxis'
        }],
        categoryAxis: {
          axisCrossingValue: [0, Number.MAX_VALUE]
        },
        dataBound: function() {
          var series = this.options.series;
          for (var idx = 0; idx < series.length; idx++) {
            var options = series[idx];
            if (options.name === "Volume") {
              options.type = 'column';
              options.axis = 'columnAxis';
            } else {
              options.type = 'line';
            }
          }
        }
      });
    }

    $(document).ready(createChart);
    $(document).bind("kendo:skinChange", createChart);
  </script>
</div>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy