yogaalfian30• 4 tahun yang lalu
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.
ini adalah gambar piechart (mockup) yang mau dibentuk, akan tetapi outputnya saat ini blank

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


0 Jawaban
Silahkan Login untuk menjawab.