0
votes

I am new to telerik kendo chart I have created a string that is being returned from an ashx page. I want the x Axis to be the date has in the month and year and for each date there will be two box going up to the number.

Is it the way I am sending the string back from the ashx page?

ASHX.CS Page

    string JSON = sb.ToString();

    context.Response.ContentType = "text/json";
    context.Response.Write(JSON);

[
    {
    "Date":"2/2018"
    "Images":"199956"
    "ImagesDownloads":"540903"
    },
{
    "Date":"3/2018"
    "Images":"226606"
    "ImagesDownloads":"635068"
    }
]

In my JS page

var DataSource = new kendo.data.DataSource({
      transport: {
      read: {
      url: function() {
      return "/URI";
      },
      dataType: "json"
      }
      },

      group: {
      field: "Date"
      },

      sort: {
      field: "Date",
      dir: "asc"
      },

      schema: {
      model: {
      fields: {
      date: {
      type: "date"
      }
      }
      }
      }
      });

      function createChart() {
      $("#chart1").kendoChart({
      dataSource: DataSource,
      legend: {
      position: "bottom"
      },
      series:
        [{
          field: "Images",
          categoryField: "Date",
          name: "Number of Images"
          }, {
          field: "ImagesDownloads",
          categoryField: "Date",
          name: "Number of Images download"
        }],
      categoryAxis: {
      field: 'Date'
      },
      tooltip: {
      visible: true,
      shared: true
      }
      });
      }

      $(document).ready(function () {


      $(document).ready(createChart);
      $(document).bind("kendo:skinChange", createChart);
1

1 Answers

0
votes

Please refer to this demo for grouped data bar chart. This demo also shows you how Kendo supports date formatting on category axis you may use the API Reference for more information.