Code:
var a = new Ext.chart.Chart({
width: '100%',
height: '100%',
store: store,
animate: true,
legend: {
position: 'right'
},
interactions: [
{
type: 'iteminfo',
listeners: {
show: function (interaction, item, panel) {
var storeItem = item.storeItem;
panel.setHtml(['<ul><li><b>time: </b>' + storeItem.get('date') + '</li>',
'<li><b>temperature: </b> ' + storeItem.get('temperature') + '</li>',
'<li><b>pulse: </b> ' + storeItem.get('pulse') + '</li></ul>'].join(''));
}
}
}
],
axes: [{
type: 'Numeric',
grid: true,
maximum: 42,
minimum: 34,
increment: 1,
position: 'right',
fields: ['temperature'],
title: 'temperature'
}, {
type: 'Numeric',
grid: true,
maximum: 140,
minimum: 20,
increment: 10,
position: 'left',
fields: ['pulse'],
title: 'pulse',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
}
}, {
type: 'Category',
position: 'top',
fields: ['date'],
title: 'time',
label: {
//stringformat: 2012-01-01 2,2012-01-01 4 etc
renderer: function (string) {
var str = string.split(' ')[1];
if (str === '2') {
return string;
}
return str;
}
}
//calculateCategoryCount: true
}],
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: ['top', 'right'],
xField: ['date'],
yField: ['temperature'],
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: ['top', 'left'],
xField: ['date'],
yField: ['pulse']
}
]
});