title: Google chart - Plotting null values
body: <p>I've created a line chart, it loads data with php and json. </p>
  
  <p>The problem is that the chart plots NULL values as 0 and that looks very ugly.</p>
  
  <p>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":""}. </p>
  
  <p>The line chart now:
  <img src="https://i.stack.imgur.com/Zs86r.png" alt="enter image description here"></p>
  
  <p>What I want:
  <img src="https://i.stack.imgur.com/NiYHP.png" alt="enter image description here"></p>
  
  <p>The php code</p>
  
  <pre><code>   $reports['cols'][] = array(label =&gt; "Time", type =&gt; "string");
          $reports['cols'][] = array(label =&gt; "Today", type =&gt; "number");
          $reports['cols'][] = array(label =&gt; "Yesterday", type =&gt; "number");
          $reports['cols'][] = array(label =&gt; "Budget", type =&gt; "number");
  
              //Some mysql code that populates values ($today, $yesterday, $budget)
  
          $rows = array();
          for($i=10; $i &lt;= 21; $i++){
  
              $temp = array();
              $temp[] = array('v' =&gt; (int) $i);
                      //Format string will return "" and not "0" if value is blank
              $temp[] = array('v' =&gt; (string) $today["$i"]);
              $temp[] = array('v' =&gt; (string) $yesterday["$i"]);
              $temp[] = array('v' =&gt; (string) $budget);
              $rows[]['c'] = $temp;
          }
  
          $reports['rows'] = $rows;
          $string=json_encode($reports);
          echo $string;
  </code></pre>
  
  <p>The output from php:</p>
  
  <pre><code>{
      "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"}]}
      ]
  }
  </code></pre>
  
  <p>The Javascript</p>
  
  <pre><code>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);
  }
  </code></pre>