I've created a line chart, it loads data with php and json.
The problem is that the chart plots NULL values as 0 and that looks very ugly.
My best guess is that i'm creating the json in the wrong way and the output that I really want is {"v":} and not {"v":""}.
The line chart now:
What I want:
The 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;
The output from 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"}]}
]
}
The 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);
}
I've created a line chart, it loads data with php and json.
The problem is that the chart plots NULL values as 0 and that looks very ugly.
My best guess is that i'm creating the json in the wrong way and the output that I really want is {"v":} and not {"v":""}.
The line chart now:
What I want:
The 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;
The output from 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"}]}
]
}
The 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);
}
- Tried jsonData=jsonData.replace(/\"\"/g, ''); it replaced all {"v":""} with {"v":} , but I ended up with no chart – Patrick Commented Sep 2, 2013 at 11:55
- I have a problem plotting null values. I cannot see the labels for responses which have null values. Do know how to resolve this? – Dchris Commented Nov 28, 2015 at 16:24
- Have you tried manipulating the json like i did in the answer? Is it the labels today, yesterday, budget (from the picture, as an example) that you don't see? – Patrick Commented Dec 3, 2015 at 10:38
1 Answer
Reset to default 5I replaced {"v":""} with {"v":null} and know it's looking mighty fine!
jsonData=jsonData.replace(/\"\"/g, 'null');
And the result is a chart without plotted 0's