2013-09-02 3 views
4

J'ai créé un graphique linéaire, il charge des données avec php et json.Graphique Google - Tracer des valeurs nulles

Le problème est que le graphique trace les valeurs NULL comme 0 et cela semble très moche. Ma meilleure estimation est que je crée le json dans le mauvais sens et la sortie que je veux vraiment est {"v":} et pas {"v": ""}.

Le graphique en ligne maintenant: enter image description here

Ce que je veux: enter image description here

Le code php

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

La sortie de 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"}]} 
    ] 
} 

Le 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); 
} 
+0

Essayé jsonData = jsonData.replace (/ \ "\"/g, ''); il a remplacé tous {"v": ""} par {"v":}, mais je n'ai pas trouvé de graphique – Patrick

+0

J'ai un problème pour tracer des valeurs nulles. Je ne peux pas voir les étiquettes pour les réponses qui ont des valeurs nulles. Savez-vous comment résoudre cela? – Dchris

+0

Avez-vous essayé de manipuler le JSON comme je l'ai fait dans la réponse? Est-ce les étiquettes aujourd'hui, hier, budget (à partir de la photo, par exemple) que vous ne voyez pas? – Patrick

Répondre

5

J'ai remplacé {"v": ""} par {"v": null} et je sais qu'il semble très bien!

jsonData=jsonData.replace(/\"\"/g, 'null'); 

Et le résultat est un graphique sans tracé 0 de enter image description here