数据未显示在谷歌条形图中

时间:2017-06-22 06:33:59

标签: javascript php json charts google-visualization

我正在尝试使用google api显示图表。即使我得到数组中的结果,它也不会显示在图表中。

这是我的代码

<?php
$query = "SELECT
            MONTHNAME(last_modified) as Month,
            SUM(before_order_line_items.total) AS Quotes,
            COUNT(orders.order_id) AS Qcnt
          FROM orders
          INNER JOIN before_order_line_items
          ON orders.sales_order_id = before_order_line_items.sales_order_id
          WHERE order.order_quote='Quote' AND orders.authorise = 'Yes'

          GROUP BY MONTH(orders.last_modified)
          ORDER BY YEAR(orders.last_modified)
         ";      
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_array($result)) {
  $myurl[] = "['".$row['Month']."', ".$row['Quotes'].", ".$row['Qcnt']."]";
}
?>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {
    callback: drawChart,
    packages: ['corechart']
  });

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Quotes', 'Counts'],
      <?php
        echo implode(",", $myurl);
      ?>
    ]);

    var options = {
      title: 'Orders',
      vAxis: {
        title: '',
        titleTextStyle: {
          color: 'red'
        }
      }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
<div id="chart_div" style="height: 400px;"></div> 

当我检查日期时,我也会获得Qcnt的日期

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Quotes', 'Counts'],
      ['May', 23299.00, 2]    ]);

但它没有显示在图表中。只显示报价金额。

1 个答案:

答案 0 :(得分:1)

'Counts' 的值太小
由于图表的规模而根本不可见......

您可以将'Counts'系列分配给第二个y轴...

series: {
  1: {
    targetAxisIndex: 1
  }
},

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Quotes', 'Counts'],
    ['May', 23299.00, 2],
    ['June', 23200.00, 2]
  ]);

  var options = {
    series: {
      1: {
        targetAxisIndex: 1,
      }
    },
    title: 'Orders',
    vAxis: {
      title: '',
      titleTextStyle: {
        color: 'red'
      }
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>