Null在Google Chart中导致不需要的换行符

时间:2014-04-19 05:11:09

标签: javascript php charts null annotations

您好我正在创建一个Annotation Google Chart。我正确地从我的数据库中提取数据,但似乎无法避免图表中绘制的线条中断。我在我的数据库中插入了'null',它被拉为null。我已经对我的查询结果做了回应以确保这一点。但是,我还有休息时间。任何帮助都将非常感激。

有一个ajax函数从下拉中拉动$ q。这很有效。

以下是我正在使用的内容......

JS:

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
      google.load('visualization', '1.1', {'packages':['annotationchart']});
      google.setOnLoadCallback(drawChart);



    function drawItems(num) {
      var jsonData = $.ajax({
          url: "getData.php",
          data: "q="+num,
          dataType:"json",
          async: false
          }).responseText;



      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));


        var options = {
          displayAnnotations: true,
        };  


        chart.draw(data, options);
      }



    </script>
  </head>

  <body>


  </body>
</html>

访问getdata.php:

<html>
<?php
  $q=$_GET["q"];
  $dbuser="user";
  $dbname="db";
  $dbpass="pass";
  $dbserver="server";

  $sql_query = "SELECT * FROM activityfield WHERE exercise_id = $q ORDER BY date DESC";

  // Make a MySQL Connection
  $con = mysql_connect($dbserver,$dbuser,$dbpass);
  if (!$con){ die('Could not connect: ' . mysql_error()); }
  mysql_select_db($dbname, $con);
  $result = mysql_query($sql_query);

echo '{
  "cols": [
        {"id":"Date","label":"Date","type":"date"},
        {"id":"","label":"Tonnage","type":"number"},
        {"id":"","label":"Notes","type":"string"},
        {"id":"","label":"Notes","type":"string"},
        {"id":"","label":"Tonnage","type":"number"},
        {"id":"","label":"Notes","type":"string"},
        {"id":"","label":"Notes","type":"string"},
      ],
  "rows": [ ';

  $total_rows = mysql_num_rows($result);
  $row_num = 0;

  while($row = mysql_fetch_array($result)){
    $row_num++;
    if ($row_num == $total_rows)
    {

    echo '{"c":[';
      echo '{"v":"Date(' .$row[date] .')"},';
        echo '{"v":'. $row[tonnage] .',"f":null},';
        echo '{"v":"'. $row[tonnage] .'"},';
        echo '{"v":"null"},';
        echo '{"v":'. $row[goal_tonnage] .'},';
        echo '{"v":"Goals:' .$row[set1] .'lbs. x ' .$row[reps1] .'reps, ' 
                            .$row[set2] .' x ' .$row[reps2] .', ' 
                            .$row[set3] .' x ' .$row[reps3] .', ' 
                            .$row[set4] .' x ' .$row[reps4] .'"},';
        echo '{"v":"This is the note that sayes what is going on here"},';

    echo ']}, ';

    } else {

    echo '{"c":[';
      echo '{"v":"Date(' .$row[date] .')"},';
        echo '{"v":'. $row[tonnage] .',"f":null},';
        echo '{"v":"'. $row[tonnage] .'"},';
        echo '{"v":"null"},';
        echo '{"v":'. $row[goal_tonnage] .'},';
        echo '{"v":"Goals:' .$row[set1] .'lbs. x ' .$row[reps1] .'reps, ' 
                            .$row[set2] .' x ' .$row[reps2] .', ' 
                            .$row[set3] .' x ' .$row[reps3] .', ' 
                            .$row[set4] .' x ' .$row[reps4] .'"},';
        echo '{"v":"'. $row[goal_tonnage] .'"},';

    echo ']}, ';

    }
  }
  echo " ] }";

  ?>
</html>

同样,空值拉得很好。谢谢!希望我已经包含了足够的细节。

编辑: 这是db查询的输出:

{ "cols": [ {"id":"Date","label":"Date","type":"date"}, {"id":"","label":"Tonnage","type":"number"}, {"id":"","label":"Tonnage","type":"number"}, ], "rows": [
{"c":[{"v":"Date(2014,04,20)"},{"v":40,"f":null},{"v":null},]},

{"c":[{"v":"Date(2014,04,19)"},{"v":null,"f":null},{"v":140},]},

{"c":[{"v":"Date(2014,04,16)"},{"v":110,"f":null},{"v":null},]},

{"c":[{"v":"Date(2014,04,15)"},{"v":50,"f":null},{"v":null},]},

{"c":[{"v":"Date(2014,04,13)"},{"v":85,"f":null},{"v":40},]},

{"c":[{"v":"Date(2014,04,10)"},{"v":75,"f":null},{"v":65},]},

{"c":[{"v":"Date(2014,03,31)"},{"v":65,},{"v":null},]}, ] }

图表的图片:

enter image description here

0 个答案:

没有答案