yoga
yogaalfian30 5 tahun yang lalu
1.3k 0 HTML

Membuat piechart 2 value colomn number, mysql php html

Halooo, jadi saya ingin membuat piechart sebagai tugas akhir kuliah, jadi terdapat kendala gitu, mau nanya jadi dalam 2 bentuk data yang value yang dimaksud 2 colomns mysql, jadi didalam piechart tersebut ada nilai used dan availability. dibawah ini source code nya. output nya blank tidak ada kata2 error.

<?php

        $tmp=array();

        require "configdashboard.php";
        /*
            select the 3 columns of interest, assinging aliases for laziness purposes
        */
        $sql="select `storage_type` as `type`,`storage_used` as `used`, `storage_free` as `free` 
            from `storage` 
            where `storage_type`='fujitsu';";


        if( $stmt = $connection->query( $sql ) ){
            while( $row = $stmt->fetch_assoc() ) {

                /* Add each row with named columns - which makes working with the JSON in Javascript easier IMO */
                $tmp[] = array(
                    'type'  =>  $row['type'],
                    'used'  =>  $row['used'],
                    'free'  =>  $row['free']
                );
            }
        }

        # create the JSON string
        $json=json_encode( $tmp );
?>

<script src='//www.gstatic.com/charts/loader.js'></script>
			<script>
    var my_2d=<?php echo $json;?>;

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

    function drawChart(){
        if( Object.keys( my_2d ).length > 0 ){
            var json=JSON.parse( my_2d );

            var dataTbl = new google.visualization.DataTable();
                dataTbl.addColumn('string', 'type');
                dataTbl.addColumn('number', 'used');
                dataTbl.addColumn('number', 'free');
            /*
                you should be able to access the properties of
                each record using names now rather than indices
            */
            Object.keys( json ).map( k=>{
                var obj=json[ k ];
                var data=[ 
                    obj.type,
                    parseFloat( obj.used ),
                    parseFloat( obj.free )
                ];

                dataTbl.addRow( data );
            });

            var options = {};
            var chart = new google.visualization.PieChart( document.getElementById('chart_div') );
                chart.draw( dataTbl, options );
        }
    }
</script>
ini struktur databasenya ini adalah gambar piechart (mockup) yang mau dibentuk, akan tetapi outputnya saat ini blank

0 Jawaban

Silahkan Login untuk menjawab.

Top Coder

Nadia Putri
nadiaputri
630 Point
Laras Ayu
larasayu
565 Point
Arif Wibowo
arifwbw
520 Point
Aulia Rizki
auliarzk
515 Point
Rizky Hidayat
rizkyhdyt
480 Point
Ilham Nurdin
ilhamnrdn
475 Point