framework extjs 4.1.1
base project for extjs4.1.1
HTML
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css">
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
<div id="demoChart" style="width:800px;height:600px;"></div>
JavaScript
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
generateData = function (n, floor) {
var data = [],
p = (Math.random() * 11) + 1,
i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < n; i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
var store1 = Ext.create('Ext.data.JsonStore', {
id: 'store1',
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
data: generateData(12, 10)
});
var chart = new Ext.chart.Chart({
id: 'chartCmp',
xtype: 'chart',
style: 'background:#fff',
animate: true,
width: 800,
height: 600,
store: store1,
renderTo: "demoChart",
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
title: 'Number of Hits',
grid: {
odd: {
opacity: 1,
...