|
Нужна помощь по ExtJS 4 chart+php
Народ, помогите новичку а то я всю голову сломал, почему не работает этот код:
line.js
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');
var store1 = Ext.create('Ext.data.JsonStore', { root:'data', fields: ['name', 'data1', 'data2'],
data: [
{name:1, data1: 80, data2: 15},
{name:2, data1: 20, data2: 5},
{name:3, data1: 80, data2: 5},
{name:4, data1: 100, data2: 15}
]
});
//alert(store1.name[1]);
var store1 = Ext.create('Ext.data.JsonStore',
{
url: '/index.php'
,root: 'chart'
,fields: ['name', 'data1', 'data2']
,autoLoad:true
});
Ext.onReady(function() {
var panel3 = Ext.create('widget.panel', {
width: 800,
height: 600,
title: 'Tags',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
animate: false,
store: store1,
insetPadding: 30,
gradients: [{
angle: 90,
id: 'bar-gradient',
stops: {
0: {
color: '#99BBE8'
},
70: {
color: '#77AECE'
},
100: {
color: '#77AECE'
}
}
}],
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 100,
position: 'left',
fields: ['data1'],
title: false,
grid: true,
label: { renderer: Ext.util.Format.numberRenderer('0,0'), font: '10px Arial' }
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: false,
grid: true,
label: { font: '11px Arial', renderer: function(name) { return name; } }
}],
series: [
{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data1',
tips: {
trackMouse: true,
width: 110,
height: 25,
renderer: function(storeItem, item) { this.setTitle(storeItem.get('data1') + ' visits in ' + storeItem.get('name').substr(0, 3)); }
},
style: {
fill: 'url(#bar-gradient)',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: '#38B8BF',
stroke: '#38B8BF'
}
},
{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data2',
tips: {
trackMouse: true,
width: 110,
height: 25,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('data2') + ' visits in ' + storeItem.get('name').substr(0, 3));
}
},
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: '#18428E',
stroke: '#18428E'
}
}
]
}
});
});
index.php
<?php
$i=0;
while ($i<3)
{
$i=$i+1;
$data[]= array('name' => $i, 'data1'=>300, 'data2'=>400);
}
echo json_encode(array('chart'=>$data,'total'=>3));
?>
index.html
html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Line Chart</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/shared/example.css" />
<script type="text/javascript" src="ext/bootstrap.js"></script>
<script type="text/javascript" src="Line2.js"></script>
</head>
<body>
</body>
</html>
|