如何使用php从Google图表中显示Treemap图表?

时间:2016-09-25 12:35:27

标签: javascript php charts google-visualization

当我想在浏览器中显示我的树形图时,我遇到了问题。当我调用我的testingTreemap.php时,我的浏览器没有显示任何内容,只是一点点。我混淆了如何将我的数据设置为树形图中的值。

这是我的testingTreemap.php

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

    function drawChart(){


        //var dataFromPHP = <?php echo file_get_contents('clientdata.json'); ?>;
        $dataFromPHP = file_get_contents('clientdata.json');
        $json = json_decode($dataFromPHP, TRUE);

        // console.log(dump_dataFromPHP);
        $provinsi = 'SELECT provinsi , LEFT(provinsi, '') AS lala FROM data_client';
        $query = 'SELECT provinsi ,kode_sales, gaji, count(kode_sales) AS T_nasabah FROM data_client GROUP BY kode_sales';
        //var newData = [];
        ['Location', 'Parent' , 'Size', 'Color'];

        $exec = mysqli_query($con,$query);
        $execProv = mysqli_query($con,$provinsi);
        echo "['".$row['lala']."'," null, 0, 0"],";
        while($row = mysqli_fetch_array($execProv)){ 
        echo "['".$row['provinsi']."','".$row['lala']."',"0,0"],";
        }
        while($row = mysqli_fetch_array($exec)){ 
        echo "['".$row['kode_sales']."','".$row['provinsi']."',".$row['gaji'].",".$row['T_nasabah']."],";
        }

        //console.log(dataFromPHP);
        console.log((data));

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true

        });
        chart.draw(data, options);  
        }
        })

总是得到&#34; SyntaxError:缺失;在陈述之前#34;在这一行(顺便说一句,我在运行php文件后从谷歌Chrome浏览器获得此行&gt;右键单击&gt;检查元素&gt;控制台)

function drawChart(){
        //var dataFromPHP = [
{
    "kode_client": "CLI01", <<<------- SyntaxError: missing ; before statement
    "nama": "Edo",
    "tanggal_lahir": "01\/05\/1967",
    "alamat": "Nusa Hijau",
    "telp": "085634234",
    "produk": "Titanium",
    "gaji": "5000000",
    "cabang": "Bandung",
    "provinsi": "Jawa Barat",
    "kode_sales": "CLI02"
},
{
    "kode_client": "CLI02",
    "nama": "Santoso Imam",
    "tanggal_lahir": "15\/12\/1979",
    "alamat": "Padasuka",
    "telp": "08513087645",
    "produk": "Investra Link",
    "gaji": "4500000",
    "cabang": "Cimahi",
    "provinsi": "Jawa Tengah",
    "kode_sales": "SAL04"
}

1 个答案:

答案 0 :(得分:0)

建议在加载 google图表 ...

时使用以下库

<script src="https://www.gstatic.com/charts/loader.js"></script>

如果使用loader.js加载声明不正确......

google.charts.load('visualization', {packages:['treemap']}); //<-- wrong

应该是......

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

第一个参数应该是要加载的版本

使用较旧的jsapi库时,
load语句看起来像这样......

google.load('visualization', '1', {packages:['treemap']});

但根据release notes

  

通过jsapi加载程序保留的Google图表版本不再一致更新。

编辑

此行不正确...

echo "['".$row['provinsi']."','".$row['lala']."',"0,0"],";

改为......

echo "['".$row['provinsi']."','".$row['lala']."',0,0],";

相关问题