HTML Code:
Ext4.define('DataPoint', {
extend: 'Ext.data.Model',
fields: [
{name: 'time', type: 'date', dateFormat: 'Y-m-d H:i'},
{name: 'val',mapping:'value', type: 'float', useNull:true, convert: function(v, record){ if(v == null){return false}return parseInt(v)}}, ],
idProperty: 'time',
persistenceProperty: 'data'
});
var store = Ext4.create('Ext.data.Store', {
model: 'DataPoint',
proxy:{
type: 'ajax',
url: "charts/checkRAM",
reader: {
type: 'json',
root: 'data'
}
},
sorters: [{
property: 'time'
}],
format: 'json',
idProperty: 'time',
root: 'data'
});
store.load();
var ext3Panel = new Ext.Panel({
title:'Ext3'
});
ext3Panel.on('afterrender', function() {
var ext4Panel = Ext4.create('Ext.chart.Chart', {
renderTo: ext3Panel.body.dom,
width: 700,
height: 400,
region:'center',
store: store,
axes: [
{
title: "x",
type: 'Category',
position: 'bottom',
fields: ['time'],
label : {
renderer : function(v){
if(!Ext.isFunction(v.format("Y-m-d")))
{
return v.format("Y-m-d") + " \n " + ' ' + v.format("H:i")
}
else
{
return v
}
}
}
},
{
title: "y",
type: 'Numeric',
position: 'left'
}
],
series: [
{
xField: 'time',
yField: 'val',
type: 'line',
fill: true
}
]
});
ext3Panel.add(ext4Panel);
});
JSON:
HTML Code:
{ "success": true, "data": [ { "time": "2013-02-20 07:03", "value": null }, { "time": "2013-02-20 07:08", "value": null }, { "time": "2013-02-20 07:13", "value": null }, { "time": "2013-02-20 07:18", "value": null }, { "time": "2013-02-20 07:23", "value": null }, { "time": "2013-02-20 07:28", "value": null }, { "time": "2013-02-20 07:33", "value": null }, { "time": "2013-02-20 07:38", "value": null }, { "time": "2013-02-20 07:43", "value": null }, { "time": "2013-02-20 07:48", "value": null }, { "time": "2013-02-20 07:53", "value": null }, { "time": "2013-02-20 07:58", "value": null }, { "time": "2013-02-20 08:03", "value": null }, { "time": "2013-02-20 08:08", "value": "19" }, { "time": "2013-02-20 08:13", "value": "26" }, { "time": "2013-02-20 08:18", "value": "32" }, { "time": "2013-02-20 08:23", "value": "32" }, { "time": "2013-02-20 08:28", "value": "32" }, { "time": "2013-02-20 08:33", "value": "32" }, { "time": "2013-02-20 08:38", "value": "33" }, { "time": "2013-02-20 08:43", "value": "33" }, { "time": "2013-02-20 08:48", "value": "34" }, { "time": "2013-02-20 08:53", "value": "34" }, { "time": "2013-02-20 08:58", "value": "34" }, { "time": "2013-02-20 09:03", "value": "34" }, { "time": "2013-02-20 09:08", "value": "34" }, { "time": "2013-02-20 09:13", "value": "34" }, { "time": "2013-02-20 09:18", "value": "34" }, { "time": "2013-02-20 09:23", "value": null }, { "time": "2013-02-20 09:24", "value": "34" }, { "time": "2013-02-20 09:29", "value": "34" }, { "time": "2013-02-20 09:34", "value": "36" }, { "time": "2013-02-20 09:39", "value": "37" }, { "time": "2013-02-20 09:44", "value": "37" }, { "time": "2013-02-20 09:49", "value": "37" }, { "time": "2013-02-20 09:54", "value": "34" }, { "time": "2013-02-20 09:59", "value": "35" }, { "time": "2013-02-20 10:04", "value": "35" }, { "time": "2013-02-20 10:09", "value": "35" }, { "time": "2013-02-20 10:14", "value": "34" }, { "time": "2013-02-20 10:19", "value": "34" }, { "time": "2013-02-20 10:24", "value": "34" }, { "time": "2013-02-20 10:29", "value": "32" }, { "time": "2013-02-20 10:34", "value": "32" }, { "time": "2013-02-20 10:39", "value": "32" }, { "time": "2013-02-20 10:44", "value": "32" }, { "time": "2013-02-20 10:49", "value": "32" }, { "time": "2013-02-20 10:54", "value": "32" }, { "time": "2013-02-20 10:59", "value": "32" }, { "time": "2013-02-20 11:04", "value": "33" }, { "time": "2013-02-20 11:09", "value": "34" }, { "time": "2013-02-20 11:14", "value": "34" }, { "time": "2013-02-20 11:19", "value": "34" }, { "time": "2013-02-20 11:24", "value": "34" }, { "time": "2013-02-20 11:29", "value": "34" }, { "time": "2013-02-20 11:34", "value": "34" }, { "time": "2013-02-20 11:39", "value": "34" }, { "time": "2013-02-20 11:44", "value": "36" }, { "time": "2013-02-20 11:49", "value": "34" }, { "time": "2013-02-20 11:54", "value": "36" }, { "time": "2013-02-20 11:59", "value": "34" }, { "time": "2013-02-20 12:04", "value": "41" }, { "time": "2013-02-20 12:09", "value": "41" }, { "time": "2013-02-20 12:14", "value": "41" }, { "time": "2013-02-20 12:19", "value": "43" }, { "time": "2013-02-20 12:24", "value": "55" }, { "time": "2013-02-20 12:29", "value": "61" }, { "time": "2013-02-20 12:34", "value": "62" }, { "time": "2013-02-20 12:39", "value": "62" }, { "time": "2013-02-20 12:44", "value": "62" }, { "time": "2013-02-20 12:49", "value": "62" }, { "time": "2013-02-20 12:54", "value": "61" }, { "time": "2013-02-20 12:59", "value": "62" }, { "time": "2013-02-20 13:04", "value": "61" }, { "time": "2013-02-20 13:09", "value": "62" }, { "time": "2013-02-20 13:14", "value": "61" }, { "time": "2013-02-20 13:19", "value": "61" }, { "time": "2013-02-20 13:24", "value": "61" }, { "time": "2013-02-20 13:29", "value": "62" }, { "time": "2013-02-20 13:34", "value": "63" }, { "time": "2013-02-20 13:39", "value": "63" }, { "time": "2013-02-20 13:44", "value": "64" }, { "time": "2013-02-20 13:49", "value": "65" }, { "time": "2013-02-20 13:54", "value": "65" }, { "time": "2013-02-20 13:59", "value": "66" }, { "time": "2013-02-20 14:04", "value": "62" }, { "time": "2013-02-20 14:09", "value": "62" }, { "time": "2013-02-20 14:14", "value": "63" }, { "time": "2013-02-20 14:19", "value": "63" }, { "time": "2013-02-20 14:24", "value": "63" }, { "time": "2013-02-20 14:29", "value": "63" }, { "time": "2013-02-20 14:34", "value": "64" }, { "time": "2013-02-20 14:39", "value": "66" }, { "time": "2013-02-20 14:44", "value": "50" }, { "time": "2013-02-20 14:49", "value": "63" }, { "time": "2013-02-20 14:54", "value": "63" }, { "time": "2013-02-20 14:59", "value": "64" }, { "time": "2013-02-20 15:04", "value": "64" }, { "time": "2013-02-20 15:09", "value": "63" }, { "time": "2013-02-20 15:14", "value": "63" } ]}