title: Display Kendo Chart (pie chart) based on grid data
body: <p>I am using KendoUI - Grid component</p>
  
  <p>How can I convert this into Kendo Grid:</p>
  
  <p>For Eg:
  I have created kendo grid (table) by using local data. As soon as I click on "<strong>Generate chart</strong>" button, above table's filter data should create the Kendo pie chart like below...</p>
  
  <p>As I am new to Kendo, can somebody please suggest me the answer?</p>
  
  <p><a href="https://i.stack.imgur.com/xYNq0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xYNq0.png" alt="enter image description here"></a></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><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"
    }]
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5fst89u6/" rel="nofollow noreferrer">JsFiddle</a></p>