使用dataloader将php / mysql数据加载到amcharts

时间:2016-11-02 03:44:19

标签: php mysql json amcharts

我是AmCharts的新手,无法显示我需要的简单图表。我使用了AmCharts实时编辑器中的代码。这是PHP文件(getGred.php)

   $query = "SELECT gred, COUNT( gred ) AS bilangan FROM borg_peribadi GROUP BY gred";
$result = mysql_query( $query );
//echo $query;
//echo "<br>";
$rows = array();
while ($data = mysql_fetch_assoc ($result)){
     $rows[] = array(
    "gred" => $data[ 'gred' ],
    "bilangan" => $data[ 'bilangan' ]
  );
  }

  echo json_encode( $rows );

这就是我从AmCharts教程中得到的:

<!DOCTYPE html>
<html>
    <head>
        <title>Laporan eOrientasi</title>
        <meta name="description" content="chart created using amCharts live editor" />

        <!-- amCharts javascript sources -->
        <script src="../amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../amcharts/serial.js" type="text/javascript"></script>

        <!-- amCharts plugins -->
        <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js type="text/javascript""></script>
        <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css">
        <script src="../amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>

        <!-- amCharts javascript code -->
        <script type="text/javascript">
            AmCharts.makeChart("chartdiv",
                {
                    "type": "serial",
                    "dataLoader": {
                        "url": "getGred.php",
                        "format": "json"
                    },
                    "categoryField": "gred",
                    "angle": 30,
                    "depth3D": 30,
                    "startDuration": 1,
                    "export": {
                        "enabled": true
                    },
                    "categoryAxis": {
                        "gridPosition": "start"
                    },
                    "chartCursor": {
                        "enabled": true
                    },
                    "chartScrollbar": {
                        "enabled": true
                    },
                    "trendLines": [],
                    "graphs": [
                        {
                            "balloonText": "[[title]] of [[category]]:[[value]]",
                            "fillAlphas": 1,
                            "id": "AmGraph-1",
                            "title": "bil. pegawai",
                            "type": "column",
                            "valueField": "bilangan"
                        }
                    ],
                    "guides": [],
                    "valueAxes": [
                        {
                            "id": "ValueAxis-1",
                            "title": "Bilangan"
                        }
                    ],
                    "allLabels": [],
                    "balloon": {},
                    "legend": {
                        "enabled": true,
                        "useGraphSettings": true
                    },
                    "titles": [
                        {
                            "id": "Title-1",
                            "size": 15,
                            "text": "BIL PEGAWAI MELAPOR DIRI MENGIKUT GRED"
                        }
                    ],
                //  "dataProvider":  AmCharts.loadJSON('laporan/getGred.php')

                }
            );
        </script>
    </head>
    <body>
        <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div>
    </body>
</html>

问题不是图表没有显示,只显示在下面:output

希望得到任何错误或错误的指示。谢谢。

编辑:我已经添加了getGred.php的输出

  

[{&#34; GRED&#34;:&#34; 29&#34;&#34; bilangan&#34;:&#34; 1&#34;},{&#34; GRED&#34 ;:&#34; 41&#34;&#34; bilangan&#34;:&#34; 5&#34;},{&#34; GRED&#34;:&#34; 44&#34;,& #34; bilangan&#34;:&#34; 6&#34;}]

0 个答案:

没有答案