Display Kendo Chart (pie chart) based on grid data

Question

I am using KendoUI - Grid component

How can I convert this into Kendo Grid:

For Eg: I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...

As I am new to Kendo, can somebody please suggest me the answer?

Code:

var localData = [
  {
    Id: 1,
    userName: "John",
    game: "A",
    difficultyLevel: "Easy",
    startTime: "25-05-2017",
    endTime: "26-05-2017",
    score: "210"
  },
  {
    Id: 2,
    userName: "Sam",
    game: "B",
    difficultyLevel: "Hard",
    startTime: "04-11-2016",
    endTime: "01-12-2016",
    score: "4800"
  },
];

var dataSource = new kendo.data.DataSource({
  data: localData,
  schema: {
    model: {
      fields: {
        Id: {
          type: "number"
        },
        userName: {
          type: "string"
        },
        userName: {
          type: "string"
        },
        difficultyLevel: {
          type: "string"
        },        
        startTime: {
          type: "string"
        },
        endTime: {
          type: "string"
        },
        score: {
          type: "number"
        },
      }
    }
  }
});

$("#grid").kendoGrid({
  dataSource: dataSource,
  rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
  scrollable: true,
  height: 300,
  sortable: true,
  filterable: false,
  groupable: true,
  pageable: true,
  columns: [{
    field: "Id",
    title: "Id",
    filterable: true
  }, {
    field: "userName",
    title: "userName"
  }, {
    field: "game",
    title: "game"
  }, {
    field: "difficultyLevel",
    title: "difficultyLevel"
  }, {
    field: "startTime",
    title: "startTime"
  }, {
    field: "endTime",
    title: "endTime"
  }, {
    field: "score",
    title: "score"
  }]
});

JsFiddle

What do you mean by above table's filter data? You have disabled filtering on the grid. — ezanker

DontVoteMeDown DontVoteMeDown · Accepted Answer · 2017-11-20T17:16:13

You need to prepare your data to the chart's format. Something like:

$chartContainer.kendoChart({
    dataSource: {
    data: localData,
    schema: {
      parse: function(data) {
        return data.map(x => { 
          return { 
            value: Number(x.score),
            category: x.userName
          }
        });
      }
    }
  },
    series: [{
    type: "pie",
    field: "value",
    categoryField: "category"
  }],
  tooltip: {
    visible: true,
    template: "#= category #: #= value #"
  }
});

Updated Fiddle

Display Kendo Chart (pie chart) based on grid data

1 Answers