php - Javascript, using Highcharts to display a chart of rankings with JSON Data -
i trying use javascript highcharts display chart of rankings json data. can't seem chart display.
this javascript code:
$(document).ready(function() { var options = { chart: { renderto: 'drawing', zoomtype: 'x', width: 900, height: 222 }, exporting: { enabled:true }, title: { text: url+' - '+keyword }, credits: { text: '****', href: 'http://***/' }, xaxis: { type: 'datetime', datetimelabelformats: { day: '%b %e ' } }, yaxis: [{ //min: 1, allowdecimals: false, reversed: true, ///: .2, //maxpadding: .2, title: { text: 'rankings' } },], tooltip: { crosshairs: true, shared: true }, series: [{}] }; var url = "http://*******/chart.php"; $.getjson(url, function(data) { $.each(data, function(arrayid,group) { $.each(group.data, function(id,val) { arg = val[0].replace(/date.utc\((.*?)\)/, '$1').split(','); var timestamp = date.utc.apply( null , arg ); date=new date(timestamp); data[arrayid].data[id][0] = timestamp; }); }); options.series[0].data = data; var chart = new highcharts.chart(options); }); });
our php script gives json:
[{"name":"google rank","data":[["date.utc(2013,04,05)","23"],["date.utc(2013,04,04)","23"],["date.utc(2013,04,03)","22"],["date.utc(2013,04,02)","24"],["date.utc(2013,04,01)","26"],["date.utc(2013,03,31)","24"],["date.utc(2013,03,30)","24"],["date.utc(2013,03,29)","25"],["date.utc(2013,03,28)","25"],["date.utc(2013,03,27)","25"],["date.utc(2013,03,26)","26"],["date.utc(2013,03,25)","25"],["date.utc(2013,03,24)","24"],["date.utc(2013,03,23)","-"],["date.utc(2013,03,22)","10"],["date.utc(2013,03,21)","10"],["date.utc(2013,03,20)","10"],["date.utc(2013,03,19)","10"],["date.utc(2013,03,18)","10"],["date.utc(2013,03,17)","10"],["date.utc(2013,03,16)","9"],["date.utc(2013,03,15)","9"],["date.utc(2013,03,14)","9"],["date.utc(2013,03,13)","9"],["date.utc(2013,03,12)","9"]],"visible":"true","pointinterval":"86400000","showinlegend":"false"},{"name":"bing rank","data":["date.utc(2013,2,9)",9],"visible":"true","pointinterval":"86400000","showinlegend":"false"}]
note json data represents numbers strings problem.
php code generates json data:
$googledata = array(); while($gkdata = mysql_fetch_assoc($keywordquery)){ $explodedate = explode("-", $gkdata['date']); $year = $explodedate[0]; $month = $explodedate[1]; $day = $explodedate[2]; $googledata[] = array( "".$year.",".$month.",".$day."", $gkdata['grank'] //$gkdata['grank'] should number, dash it's cast accommodating datatype: string. ); } $chartdata = array( array( "name" => 'google rank', "data" => $googledata, "visible" => 'true', "pointinterval" => '86400000', "showinlegend" => 'false', ), array( "name" => 'bing rank', "data" => array( 'date.utc(2013,2,9)', 9 ), "visible" => 'true', "pointinterval" => '86400000', "showinlegend" => 'false', ) );
the highcharts won't display other chart no data. date.utc(2013,03,12)
supposed go on x-axis & number next supposed rank number. can see wrong?
the chart takes data [x,y]. need reverse order of data ['value',datestamp'] if want date on y axis.
edit:
i not sure text problem having is, 1 problem arise code number data values being returned strings, in quotes.
you need cast them integers in php before json encoding in order them come through unquoted, integers.
you should seeing error this: http://www.highcharts.com/errors/14
Comments
Post a Comment