ExtJS line Charts and improper string data from PHP

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);

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>