Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="expires" content="0"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
<link rel="stylesheet" type="text/css" href="http://docs.sencha.com/ext-js/4-0/resources/css/app.css">
<script type="text/javascript" src="http://docs.sencha.com/ext-js/4-0/extjs/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
//Modèle App/model/GraphTime.js
Ext.define('App.model.GraphTime', {
extend: 'Ext.data.Model',
fields: [
{name: 'time', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'data', type:'float'}
]
});
//Magasin App/store/GraphTime.js
//Commented to test script in standalonemode
/*Ext.define('App.store.GraphTime', {
extend: 'Ext.data.Store',
model: 'App.model.GraphTime',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
model: 'App.model.GraphTime'
}
}
});*/
//Magasin App/store/GraphTime.js
Ext.define('App.store.GraphTime', {
extend: 'Ext.data.Store',
model: 'App.model.GraphTime',
data: [
{ time: '2009-08-22 00:00:00', data: 10.0 },
{ time: '2009-08-22 01:00:00', data: 10.2 },
{ time: '2009-08-22 02:00:00', data: 10.6 },
{ time: '2009-08-22 03:00:00', data: 10.7 },
{ time: '2009-08-22 04:00:00', data: 10.8 },
{ time: '2009-08-22 05:00:00', data: 10.6 },
{ time: '2009-08-22 06:00:00', data: 10.9 },
{ time: '2009-08-22 09:00:00', data: 10.6 },
{ time: '2009-08-22 12:00:00', data: 11.2 },
{ time: '2009-08-22 15:00:00', data: 11.5 },
{ time: '2009-08-22 18:00:00', data: 11.7 },
{ time: '2009-08-22 21:00:00', data: 11.9 }
]
});
//Controlleur App/controller/GraphTime.js
Ext.define('App.controller.GraphTime', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'.gridtime': {
render: this.load
},
'.graphtime': {
render: this.load
},
});
},
load: function(cmp, opts) {
//Temporary commented because ofr example data are local
//cmp.store.load();
}
});
//Vue App/view/GridTime.js
Ext.define('App.view.GridTime', {
extend: 'Ext.grid.Panel',
alias : 'widget.gridtime',
store: Ext.create('App.store.GraphTime'),
columns: [
{header:'Temps', dataIndex: 'time', flex: 1, renderer: function(date) { return Ext.Date.format(date, 'd. H'); }},
{header: 'Données', dataIndex: 'data'}
],
renderTo: Ext.getBody()
});
//Vue App/view/GridTime.js
Ext.define('App.view.GraphTime', {
extend: 'Ext.chart.Chart',
alias : 'widget.graphtime',
height: 300,
width: 600,
store: Ext.create('App.store.GraphTime'),
renderTo: Ext.getBody(),
axes: [{
type: 'Numeric',
position: 'left',
fields: 'data',
title: 'Température'
}, {
type: 'Time',
position: 'bottom',
fields: 'time',
title: 'Heure',
dateFormat: 'H',
step: [Ext.Date.HOUR, 1],
fromDate: Ext.Date.parse('2009-08-22 00:00:00','Y-m-d H:i:s'),
toDate: Ext.Date.parse('2009-08-22 23:59:59','Y-m-d H:i:s')
}],
series: [{
type: 'line',
axis: 'left',
xField: 'time',
yField: 'data'
}]
});
//point d'entrée de l'appli app.js
Ext.application({
name: 'App',
autoCreateViewport: false,
controllers: ['App.controller.GraphTime'],
models: ['App.model.GraphTime'],
stores: ['App.store.GraphTime'],
views: ['App.view.GraphTime'],
launch: function() {
Ext.create('App.view.GridTime');
Ext.create('App.view.GraphTime');
}
});
</script>
</body>
</html>
Time axes not working for Ext.chart.Chart
Reply With Quote
