Sencha Touch Charts
HTML
<script src="http://cdn.sencha.com/touch/sencha-touch-2.1.1/sencha-touch-all-debug.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/touch/sencha-touch-2.1.1/resources/css/sencha-touch.css">
JavaScript
var myStore = Ext.create('Ext.data.Store',{
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{'name':'metric one', 'data1':10, 'data2':'', 'data3':14, 'data4':8, 'data5':13},
{'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
{'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
{'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
{'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
]
});
Ext.application({
name: 'SenchaFiddle',
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
items: [
{
xtype: 'chart',
width: 500,
height: 300,
animate: true,
store: myStore,
axes: [
{
type: 'numeric',
position: 'left',
fields: ['data0','data1','data2','data3'],
minimum: 0,
grid: {
odd: {
stroke: '#e8e8e8',
linewidth: 2,
},
},
label: {
color: '#000',
font: '11px verdana',
}
},
{
type: 'category',
position: 'bottom',
fields: 'name',
label: {
color: '#000',
font: '13px Verdana',
},
markerConfig: {
radius: 5,
size: 5
...