php - 如何使用 mysql 数据库中的数据创建 Google ComboChart?

标签 php mysql google-visualization

我正在使用 PHP 脚本从 mysql 数据库中提取数据,并使用谷歌图表以图形方式显示数据。当使用只有 2 个变量要处理的饼图或条形图时,它工作得很好。现在我想使用 ComboChart。我在一个表中有 4 个字段:名称、日期、数量、成本。我想要一个 ComboChart,其中 x 轴是日期,条形图代表数量,折线图代表成本。

这是我目前的代码。我该怎么做呢?在 drawChart() 函数中,x 轴或 y 轴上的内容没有明确的顺序,所以我怎么知道我的哪些数据显示在哪里?这是否取决于您在 mysqli_query 期间选择数据的顺序?

// host, username, password and dbname are already declared

$conn = mysqli_connect($host, $username, $password);
if ($conn->connect_error) {
        die("Could not connect: " . mysql_error()) . "<br>";
}
mysqli_select_db($conn, $dbname);

$qresult = mysqli_query($conn, "SELECT * FROM Scrap");

$rows = array();
$table = array();
$table['cols'] = array(
        array('label' => 'Date', 'type' => 'string'),
        array('label' => 'Quantity', 'type' => 'number'),
        array('label' => 'Cost', 'type' => 'number')
);

$rows = array();
while ($r = $qresult->fetch_assoc()) {
        $temp = array();
        $temp[] = array('v' => (string) $r['Date']);
    // Values of each slice
    $temp[] = array('v' => (int) $r['Quantity']);
    $temp[] = array('v' => (float) $r['Cost']);
    $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>

<html>
  <head>
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
        title: 'YTD Controllable Scrap Costs',
        seriesType:'bars',
        series:{2: {type: 'line'}}
//        width: 800,
//        height: 600
        };
      // Instantiate and draw our chart, passing in some options.
      // Do not forget to check your div ID
      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
    <!--this is the div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

最佳答案

所以我四处测试,发现第一列是 x 轴,第二、第三、第四等列在 y 轴上。条形图和折线图未显示的原因是因为在我的 drawChart() 函数中,它说:series:{2: {type: 'line'}},数字 2 指的是到 y 轴的第三个字段,因为它是零索引的。我没有 y 轴的第三个字段,所以我将其切换为 series:{1: {type: 'line'}} 现在我得到了一个条形图和一个折线图.

关于php - 如何使用 mysql 数据库中的数据创建 Google ComboChart?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38751338/

相关文章:

php - 多对一关系?

php - 我应该如何在 select data mysql 中使用 for (i++) ?那可能吗?

javascript - 谷歌折线图划分网格线

javascript - 谷歌散点图 - Y 轴中的字符串值

php - 为什么在编译 PHP 扩展 DLL 时会出现 LNK2005 错误

javascript - 带有输入参数的 Javascript/PHP 中的 XMLHTTP 请求

javascript - 使用 angularjs 从动态输入字段形成数组

mysql - 计算单个语句中第二个查询中第一个查询的 SQL 结果

php - 使用 $_GET 获取时未插入 VARCHAR 值

javascript - 谷歌条形图中的注释