Code:
Ext.require(['Ext.chart.*']);
Ext.require(['Ext.data.*']);
Ext.onReady(function(){
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model'
,fields: ['temperature', 'date']
});
var store = Ext.create('Ext.data.Store', {
model: 'WeatherPoint'
,data: [
{temperature: 58, date: Ext.util.Format.date(new Date(2011, 1, 2),'Y/m/d')}
,{temperature: 63, date:Ext.util.Format.date(new Date(2011, 3, 3),'Y/m/d')}
,{temperature: 73, date:Ext.util.Format.date(new Date(2011, 4, 4),'Y/m/d')}
,{temperature: 78, date:Ext.util.Format.date(new Date(2011, 5, 5),'Y/m/d')}
,{temperature: 81, date:Ext.util.Format.date(new Date(2011, 6, 6),'Y/m/d')}
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody()
,width: 1000
,height: 500
,store: store
,axes: [
{
title: 'Temperature'
,type: 'Numeric'
,position: 'left'
,fields: ['temperature']
,mininum: 0
,maximum: 100
}
,{
title: 'Time'
,type: 'Time'
,position: 'bottom'
,fields: ['date']
,groupBy: 'year,month,day'
,dateFormat: 'Y/m/d'
,fromDate:new Date(2010, 12, 1)
,toDate:new Date(2011, 12, 1)
,step:[Ext.Date.MONTH,1]
,label: {
rotate: {
degrees: 315
}
}
}
]
,series: [
{
type: 'line'
,xField: 'date'
,yField: 'temperature',
markerConfig:{
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
});