Creating a live updating chart bound to an editable grid

1. Start by defining a model for the data we are loading into the chart and grid:
Ext.define('LanguageShare', {
extend: 'Ext.data.Model',
fields: [{
name: 'Language',
type: 'string'
}, {
name: 'Percentage',
type: 'int'
}]
});

2. Now define a dataset for the chart and grid:
var languageShareData = [{
Language: 'C',
Percentage: 7
}, {
Language: 'C++',
Percentage: 4
}, {
Language: 'Java',
Percentage: 7
}, {
Language: 'JavaScript',
Percentage: 20
}, ...];

3. Create an Ext.data.Store and load in our dataset. This will be used to bind the
data to the grid and chart:
var languageShareStore = Ext.create('Ext.data.Store', {
model: 'LanguageShare',
data: languageShareData
});

4. Create a basic chart with a pie series. Assign it to the variable chart:
var chart = Ext.create('Ext.chart.Chart', {
height: 400,
width: 400,
store: languageShareStore,
animate: true,
series: [{
type: 'pie',
angleField: 'Percentage',
label: {
display: 'rotate',
contrast: true,
field: 'Language'
}
}]
});

5. Create a grid panel with a CellSelectionModel and CellEditing plugin. Ensure
that the Percentage column is editable by adding a numberfield. Assign the
editor grid to the variable grid:
var grid = Ext.create('Ext.grid.Panel', {
store: languageShareStore,
height: 400,
width: 400,
border: 0,
columns: [{
header: 'Language',
dataIndex: 'Language',
flex: 1
}, {
header: 'Percentage',
dataIndex: 'Percentage',
flex: 1,
field: {
xtype: 'numberfield',
allowBlank: false
}
}],
selType: 'cellmodel',
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})]
});

6. Finally, create a panel with an hbox layout and render it to the document's body.
Add the grid and chart to the panel's items collection:
var panel = Ext.create('Ext.Panel', {
width: 800,
height: 427,
title: 'GitHub Language Share',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [grid, chart],
style: 'margin: 50px',
renderTo: Ext.getBody()
});