2015-09-21 3 views
0
<?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); 
?> 

Я использую верхний источник PHP для загрузки MySQL в JSONMySQL нагрузка JSon для NVD3

результат PHP странице

[{"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"}] 

как изменить этот формат нравится (для nvd3 линейный график)?

function cumulativeTestData() { 
     return [ 
      { 
       key: "LED STAND", 
       values: [ [ 2015-09-10 14:17:33 , 2.974623048543] , 
       [ 2015-09-10 14:20:33 , 1.7740300785979]] 
      } 
} 

или theres простой способ сделать линейный график NVD3 из mySql DB?

редактировать:

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



    }); 

рабочий код для использования d3.json и d3.nest функцию

ответ

2

Вы можете добиться того, что с помощью метода d3.nest() d3, как показано ниже:

Если предположить, что структура данных, как вы получили его с помощью d3.json: data, а затем:

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

Тогда результат будет:

{ 
    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"] 
    ] 
} 

Я надеюсь, что это помогает.

+0

Вы можете посмотреть мой источник изменений? У меня возникли проблемы с функцией d3.nest. – user2637015

+0

Нет, вы должны поместить 'd3.nest()' часть внутри метода 'd3.json', сразу после' dataLoad = data'. 'D3.json' выполняет вызов AJAX, а часть внутри запускается, когда данные извлекаются. Вы запускаете 'd3.nest()', не дожидаясь поступления данных. – Nikos

+0

ОК, я беру это. больше вопрос рисовать граф также нужно положить внутри функция d3.json? – user2637015

Смежные вопросы