While working on the main dashboard for the current extjs project I am working I had to create a line chart which showed the performance over the last 1 week. This was across 3 different variables.
The code to show that with tips and all as an item in an ExtJS Panel is
new Ext.chart.LineChart({
store: new Ext.data.JsonStore({
url:PHP_AJAX_URL + '/hometab.php',
baseParams:{
task:'graphdata'
},
idProperty: 'gdate',
root:'data',
fields: ['gdate', 'f1', 'f2','f3'],
autoLoad: true
}),
xField:'gdate',
series:[
{
type:'line',
displayName: 'FONE',
yField: 'f1',
style: {
color: 0x889fbb
}
}, {
type: 'line',
displayName: 'FTWO',
yField: 'f2',
style: {
color: 0x889fcc
}
}, {
type:'line',
displayName: 'FTHREE',
yField: 'f3',
style: {
color: 0x6666bb
}
}
],
tipRenderer: function (chart, record, index, series){
if (series.yField=='f1')
return Ext.util.Format.number(record.data.f1, '0,0') +
' f1 on ' + record.data.gdate;
if (series.yField=='f2')
return Ext.util.Format.number(record.data.f2, '0,0')+
' f2 on ' + record.data.gdate;
if (series.yField=='f3')
return Ext.util.Format.number(record.data.f3, '0,0') +
' f3 on ' + record.data.gdate;
},
extraStyle: {
padding: 10,
animationEnabled: true,
legend:{
display:'bottom'
},
xAxis: {
color: 0x3366cc,
majorGridLines: {
size: 0,
color: 0xdddddd
}
},
yAxis: {
color: 0x3366cc,
majorTicks: {
color: 0x3366cc,
length: 0
},
minorTicks: {
color: 0x3366cc,
length: 0
},
majorGridLines: {
size: 0,
color: 0xdddddd
}
}
}
})
Like all other parts of the backend the code was being pulled via a quick mysql_query from the database and provided to the ExtJS frontend via JSON.
$graph_query="select
date(f_date) as gdate,
sum(f1) as f1,
sum(f2) as f2,
sum(f3) as f3
from stats
where id=user
and date(f_date)>date_sub(current_date, interval 7 day)
group by date(f_date)";
$graph_recordset=mysql_query($graph_query);
while($graph_row=mysql_fetch_assoc($graph_recordset)){
$response['data']=$graph_row;
}
$response['success']=true;
print json_encode($response);
However, the LineChart wasn’t rendering properly and it was showing wierd values for some and not rendering at all for the others. The axes were fine and firebug showed proper values for the JSON string.
After a bit of looking around, it seems that ExtJS does not convert from string numeric values to numeric values. Remember that mysql_fetch_assoc provides an associative array with string values. All that was needed was to manually cast to integer/float values that the LineChart needs.
The bit of modified code is below. Note the casts inside the while loop
$graph_query="select
date(f_date) as gdate,
sum(f1) as f1,
sum(f2) as f2,
sum(f3) as f3
from stats
where id=user
and date(f_date)>date_sub(current_date, interval 7 day)
group by date(f_date)";
$graph_recordset=mysql_query($graph_query);
while($graph_row=mysql_fetch_assoc($graph_recordset)){
$graph_row['f1']=intval($graph_row['f1']); //or floatval as needed;
$graph_row['f2']=intval($graph_row['f2]); //or floatval as needed;
$graph_row['f3']=intval($graph_row['f3]); //or floatval as needed;
$response['data']=$graph_row;
}
$response['success']=true;
print json_encode($response);
