來自 MySQL 的谷歌圖表

Question

我已經嘗試了幾個小時在 Google 圖表中獲取 MySQL 數據，但我無法從互聯網上遇到的示例中了解如何制作工作頁面。

為了重新開始，我從谷歌圖表中拿了一個例子，並用數據手動填充它。 這給了我想要的圖表。 谷歌圖表是由一個簡單的 HTML 頁面生成的（只是可變部分：

....
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['date',          'Baxico'    ,   'Degriek'   ,    'Foldman'  ,   'Madmeijs'  ,   'Marcello'  ,   'Meijster'  ,   'Pokermom'],
          ['110415180035',  38,             1,              16,             10,             6,              4,              25        ],
          ['110415190222',  38,             16,             6,              4,              1,              25,             10        ],
          ['110415200747',   6,             38,             25,             10,             1,              16,             4         ],
          ['110415211933',  10,             38,             6,              25,             4,              16,             1         ],
          ['110415222033',  16,             1,              10,             6,              38,             25,             4         ],
          ['110415232833',  38,             4,              1,              25,             10,             6,              16        ]
        ]);

        

我在 MySQL 中做了相同的數據輸出：

select tournamentid
,(select points  from pokermax_scores as t2 where playerid = 'Baxico' and t1.tournamentid = t2.tournamentid) as Baxico
,(select points  from pokermax_scores as t2 where playerid = 'Degriek' and t1.tournamentid = t2.tournamentid) as Degriek
,(select points  from pokermax_scores as t2 where playerid = 'Foldman' and t1.tournamentid = t2.tournamentid) as Foldman
,(select points  from pokermax_scores as t2 where playerid = 'Madmeijs' and t1.tournamentid = t2.tournamentid) as Madmeijs
,(select points  from pokermax_scores as t2 where playerid = 'Marcello' and t1.tournamentid = t2.tournamentid) as Marcello
,(select points  from pokermax_scores as t2 where playerid = 'Meijster' and t1.tournamentid = t2.tournamentid) as Meijster
,(select points  from pokermax_scores as t2 where playerid = 'Pokermom' and t1.tournamentid = t2.tournamentid) as Pokermom
from pokermax_scores as t1
group by tournamentid

結果相同的數據： http : //i60.tinypic.com/6nqp76.png

但我無法如本示例所示加載數據： http : //datamakessense.com/google-charts-api-from-your-sql-database-to-a-live-chart-with-no-coding -技能/

我可以建立數據庫連接並粘貼 SQL，但我不清楚如何設置腳本以便從 SQL 獲取數據。

Answer 1

嘿，伙計，我遇到了同樣的問題，您要做的是獲取錦標賽 ID 並為每個數據列繪制一條線、條、列或任何稱為“數據透視表”的問題嘗試在互聯網上搜索，有兩個對此的不同解決方案：

1. 您可以使用 javascript 在 google charts api 中解決此問題。
2. 您可以通過嵌套循環（for 循環）+ 使用兩個選擇來解決此問題。

檢查下面的代碼：使用第二種解決方案。

<?php
    /* Connect  to database */
    $mysqli = new mysqli("localhost","root","123","charts");
    if(mysqli_connect_errno()){
      trigger_error('Connection failed: '.$mysqli->error);
    }

    /* Build the query */
    $query = "SELECT a.item_code,a.total,a.date FROM chart_values a, (SELECT DISTINCT item_code FROM chart_values GROUP BY item_code,date) b WHERE a.item_code = b.item_code";

    /* Loop through the results and build a JSON array for the data table */
    $result = $mysqli->query($query);

    $table = array();
    while ($row = $result->fetch_array(MYSQLI_ASSOC)) {

                if (!isset($table[$row['item_code']])) {
                    $table[$row['item_code']] = array(
                          'total' => array(),
                          'date' => array()
              );
           }

            $table[$row['item_code']]['total'][] = $row['total'];
            $table[$row['item_code']]['date'][] = $row['date'];
    }       
    echo var_dump($table);
    $datas = json_encode($table);

$datas = json_decode($datas,true);
// echo '<pre>';
// print_r($datas);

        $googleData = array('Date');
        foreach($datas as $key => $data){
            $googleData[] = $key;
        }

        for($i=0;$i<count($datas);$i++){
            foreach($datas as $key => $data){
                if(!in_array($data['date'][$i], $googleData)){
                    $googleData[] = $data['date'][$i];
                }
                $googleData[] = $data['total'][$i];
            }
        }

        $googleData = json_encode(array_chunk($googleData,count($datas)+1), JSON_NUMERIC_CHECK);
        // print_r($googleData);
?>



<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
    <div style="width:90%; height:500px;" id="columnchart_material" style="width: 1000px; height: 500px;"></div>
</body>


<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.arrayToDataTable(<?=$googleData?>);

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));

    chart.draw(data, options);
}
</script>