I created a line chart, loads data using php and json.
The problem is that the chart displays NULL values as 0 and looks very ugly.
My best guess is that I am not creating json correctly, and the output I really want is {"v":}, not {"v": ""}.
Now the line chart: 
What I want: 
Php code
$reports['cols'][] = array(label => "Time", type => "string"); $reports['cols'][] = array(label => "Today", type => "number"); $reports['cols'][] = array(label => "Yesterday", type => "number"); $reports['cols'][] = array(label => "Budget", type => "number"); //Some mysql code that populates values ($today, $yesterday, $budget) $rows = array(); for($i=10; $i <= 21; $i++){ $temp = array(); $temp[] = array('v' => (int) $i); //Format string will return "" and not "0" if value is blank $temp[] = array('v' => (string) $today["$i"]); $temp[] = array('v' => (string) $yesterday["$i"]); $temp[] = array('v' => (string) $budget); $rows[]['c'] = $temp; } $reports['rows'] = $rows; $string=json_encode($reports); echo $string;
Exit php:
{ "cols":[ {"label":"Time","type":"string"}, {"label":"Today","type":"number"}, {"label":"Yesterday","type":"number"}, {"label":"Budget","type":"number"} ], "rows":[ {"c":[{"v":10},{"v":"0"},{"v":"0"},{"v":"90000"}]}, {"c":[{"v":11},{"v":"22491"},{"v":"7420"},{"v":"90000"}]}, {"c":[{"v":12},{"v":""},{"v":"50082"},{"v":"90000"}]}, {"c":[{"v":13},{"v":""},{"v":"91660"},{"v":"90000"}]}, {"c":[{"v":14},{"v":""},{"v":"109204"},{"v":"90000"}]}, {"c":[{"v":15},{"v":""},{"v":"115280"},{"v":"90000"}]}, {"c":[{"v":16},{"v":""},{"v":"111853"},{"v":"90000"}]}, {"c":[{"v":17},{"v":""},{"v":"87368"},{"v":"90000"}]}, {"c":[{"v":18},{"v":""},{"v":"33063"},{"v":"90000"}]}, {"c":[{"v":19},{"v":""},{"v":"14903"},{"v":"90000"}]}, {"c":[{"v":20},{"v":""},{"v":"1441"},{"v":"90000"}]}, {"c":[{"v":21},{"v":""},{"v":"0"},{"v":"90000"}]} ] }
Javascript
google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "functions/load.php?q=salesChart", dataType:"json", async: false }).responseText; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); var options = { title: 'Money / Hour', colors: ['#4BA15A', '#45559D', 'red'], legend: {position: 'top'}, lineWidth: 2, pointSize: 3, fontName: 'Helvetica', fontSize: 10, interpolateNulls: false, backgroundColor: {strokeWidth: 1}, chartArea: {left: 70, top: 60, width: "85%", height: "70%"} }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); }