使用mysql数据生成Google图表

时间:2016-09-19 13:31:14

标签: php charts

我正在寻找一种解决方案,以显示每月每个销售模式的数量总和(一个图表中的多行 - >请参阅下面原始代码的示例)。

我可以使用while循环来运行销售模型

   var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day');
    <?php
        $query = "SELECT DISTINCT Model FROM stats LIMIT 3";
        $result = mysql_query($query);

        while ($row = mysql_fetch_array($result))
        {
            $value = $row['Model'];
            echo "data.addColumn('number', '".$value."');";
        }

然而,如何循环销售正确销售模型的所有天/月/年?我如何得到每个销售模型的数量总和,如&#34;数据,addRows&#34;下方。

  data.addRows([
    [1,  37.8, 80.8, 41.8],
    [2,  30.9, 69.5, 32.4],
    [3,  25.4,   57, 25.7],
    [4,  25.4,   57, 25.7],
    [5,  25.4,   57, 25.7],
    [6,  25.4,   57, 25.7],
  ]);

原始代码

&#13;
&#13;
 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Sales Model 1');
      data.addColumn('number', 'Sales Model 2');
      data.addColumn('number', 'Sales Model 3');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  25.4,   57, 25.7],
        [5,  25.4,   57, 25.7],
        [6,  25.4,   57, 25.7],
      ]);

      var options = {
        chart: {
          title: 'Sales',
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="linechart_material" style="width: 900px; height: 500px"></div>
  </body>
</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

谷歌有group() method将为您执行此操作

只提供要分组的列和剩余列的聚合公式

请参阅以下工作代码段,使用每种销售模型的总和绘制表格图表...

google.charts.load('current', {'packages':['line', 'table']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Sales Model 1');
  data.addColumn('number', 'Sales Model 2');
  data.addColumn('number', 'Sales Model 3');

  data.addRows([
    [1,  37.8, 80.8, 41.8],
    [2,  30.9, 69.5, 32.4],
    [3,  25.4,   57, 25.7],
    [4,  25.4,   57, 25.7],
    [5,  25.4,   57, 25.7],
    [6,  25.4,   57, 25.7],
  ]);

  var options = {
    chart: {
      title: 'Sales',
    },
    width: 900,
    height: 500
  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));
  chart.draw(data, options);

  var dataGroup = google.visualization.data.group(
    data,
    // modifier column to total all rows
    [{column: 0, type: 'string', modifier: function () {return '';}}],
    // sum columns
    [
      {column: 1, type: 'number', aggregation: google.visualization.data.sum},
      {column: 2, type: 'number', aggregation: google.visualization.data.sum},
      {column: 3, type: 'number', aggregation: google.visualization.data.sum}
    ]
  );

  var table = new google.visualization.Table(document.getElementById('tablechart'));
  table.draw(dataGroup);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linechart_material"></div>
<div id="tablechart"></div>

答案 1 :(得分:-1)

您是否尝试使用$ajax

类似的东西:

   $.ajax({
        method: "GET",
        url: "sales.php",
        })
        .done(function( data ) {
           data.addRows(data);
      });