load mysql to json for NVD3 - php

Question

<?php
$username = "root";
$password = "pw";
$host = "localhost";
$database="dbname";
$server = mysql_connect($host, $username, $password);
$connection = mysql_select_db($database, $server);
$myquery = "
SELECT `name`, `useTime`, `e_usage` FROM `electric_usage`
";
$query = mysql_query($myquery);
if ( ! $query ) {
echo mysql_error();
die;
}
$data = array();
for ($x = 0; $x < mysql_num_rows($query); $x++) {
$data[] = mysql_fetch_assoc($query);
}
echo json_encode($data);
mysql_close($server);
?>
I use upper php source to load mysql to JSON
the result of php page is
[{"name":"LED STAND","useTime":"2015-09-10 14:17:33","e_usage":"0.0599970581514709"},
{"name":"LED STAND","useTime":"2015-09-10 14:20:33","e_usage":"1.10919825898689"},
{"name":"LED STAND","useTime":"2015-09-10 14:23:33","e_usage":"1.9208018439918"}]
how to change this format to like this(for nvd3 line graph)?
function cumulativeTestData() {
return [
{
key: "LED STAND",
values: [ [ 2015-09-10 14:17:33 , 2.974623048543] ,
[ 2015-09-10 14:20:33 , 1.7740300785979]]
}
}
or theres easy way to make NVD3 line graph from mySql DB?
edit :
d3.json("./mysqljson/dbread.php", function(data) {
var dataLoad = d3.nest()
.key(function(d){return d.name})
.rollup(function(u){
return u.map(function(x){return [x.useTime,x.e_usage]})})
.entries(data);
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
.x(function(d) {return d[0]})
.y(function(d) {return d[1]})
.margin({top: 50, bottom: 30, left: 40, right: 10});
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
d3.select('#mainExample')
.datum(dataLoad)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
});
working code to use d3.json and d3.nest function

Answer 1

You can achieve that by using d3's d3.nest() method as follows:
Assuming your data structure as you received it using d3.json is data, then if you do:
x=d3.nest()
.key(function(d){return d.name})
.rollup(function(u){
return u.map(function(x){return [x.useTime,x.e_usage]})})
.entries(data);
Then the result would be:
{
key = "LED STAND"
values = [
["2015-09-10 14:17:33", "0.0599970581514709"],
["2015-09-10 14:20:33", "1.10919825898689"],
["2015-09-10 14:23:33", "1.9208018439918"]
]
}
I hope this helps.