yoga
yogaalfian30 5 bulan yang lalu
388 0 PHP

bagaimana cara membuat Pie Chart atau donut chart dalam 2 value number?

Halooo, ini ada tugas akhir saya, saya ingin membuat Piechart/donut chart, akan tetapi ada kendala, jadi didalam pie chart itu terdapat 3 jenis label, storage_type=string, storage_used=number, dan storage_free=number, nah jadi misalkan pada storage_type itu server hp, nah didalam piechartnya yaitu terdapat 2 nilai, 1 nilai storage_used, dan 1 nilai storage_free, kondisinya storage_used dan storage_free terdapat dalam 2 colomns yang berbeda, dapat dilihat pada gambar dipaling bawah. output dari code dibawah ini yaitu blank, tidak ada kata2 dan tidak ada error, jadi saya binggung salahnya dimana. mohon bantuanya bisa via email [email protected] jika berhasil saya akan memberi uang rokoknya, terima kasih

<?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