yoga
yogaalfian30 2 bulan yang lalu
372 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
Silahkan Login atau Register untuk membuat tanggapan.
Share