Ext.create({
xtype: 'cartesian',
renderTo: document.body,
width: 600,
height: 400,
insetPadding: 40,
store: {
fields: ['data1', 'time'],
data: [{
'time': new Date('Jan 1 2010 00:00').getTime(),
'data1': 10
}, {
'time': new Date('Jan 1 2010 01:00').getTime(),
'data1': 7
}, {
'time': new Date('Jan 1 2010 02:00').getTime(),
'data1': 5
}, {
'time': new Date('Jan 1 2010 03:00').getTime(),
'data1': 2
}, {
'time': new Date('Jan 1 2010 04:00').getTime(),
'data1': 27
}]
},

legend: {
docked: 'right'
},

axes: [{
type: 'numeric',
position: 'left',
fields: ['data1'],
title: {
text: 'Sample Values',
fontSize: 15
},
grid: true,
minimum: 0
}, {
type: 'time',
position: 'bottom',
grid: true,
fields: ['time'],
title: {
text: 'Sample Values',
fontSize: 15
},
dateFormat: "d/m/Y à H:i",
label: {
rotate: {
degrees: -75
}
},
fromDate: new Date('Jan 1 2010 00:00'),
toDate: new Date('Jan 1 2010 04:00')
}],
series: [{
type: 'line',
xField: 'time',
yField: 'data1',
marker: {
type: 'path',
path: ['M', - 4, 0, 0, 4, 4, 0, 0, - 4, 'Z'],
lineWidth: 2,
fill: 'white'
},
tooltip: {
trackMouse: true,
dismissDelay: 0,
renderer: Ext.bind(function (tooltip, record, item) {
var date = Ext.Date.format(new Date(record.get('time')), "d/m/Y à H:i");
var value = record.get('data1');
tooltip.setHtml(date + ': ' + value);
}, this)
}
}]
});