php - MySQLi json encoded data parsed into Google Chart -
i can't figure out correct way move mysqli data correct json echo google chart code.
i query data , echo out results in json.
$query = mysqli_query($con,"select count(e.song_id) song_count, c.show_id, e.show_id, date_format(c.show_date, '%y') s_year tbl_song_shows e, tbl_shows c e.song_id='{$sid}' , c.show_id = e.show_id group s_year order s_year desc"); //show stats graph// $table = array(); $table['cols'] = array( /* define datatable columns here * each column gets own array * syntax of arrays is: * label => column label * type => data type of column (string, number, date, datetime, boolean) */ // assumed first column "string" type // , second column "number" type // can change them if not array('id' => 'year','label' => 's_year', 'type' => 'string'), array('id' => 'value','label' => 'song_count', 'type' => 'number') ); $rows = array(); while($r = mysqli_fetch_array($query, mysql_assoc)){ $temp = array(); // each column needs have data inserted via $temp array $temp[] = array('v' => $r['s_year']); $temp[] = array('v' => (int) $r['song_count']); // insert temp array $rows $rows[] = array('c' => $temp); } // populate table rows of data $table['rows'] = $rows; // encode table json $jsontable = json_encode($table); // set header; first 2 prevent ie caching queries header('cache-control: no-cache, must-revalidate'); header('content-type: application/json'); // return json data echo $jsontable;
this returns: {"cols":[{"id":"year","label":"s_year","type":"string"},{"id":"value","label":"song_count","type":"number"}],"rows":[{"c":[{"v":"2013"},{"v":5}]},{"c":[{"v":"2012"},{"v":1}]},{"c":[{"v":"2005"},{"v":1}]},{"c":[{"v":"2003"},{"v":1}]}]}
if paste google chart chart works fine. don't want hardcode data in there want send echoed data javascript google chart.
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> // load visualization api , piechart package. google.load('visualization', '1', {'packages':['corechart']}); // set callback run when google visualization api loaded. google.setonloadcallback(drawchart); function drawchart() { var jsondata = {"cols":[{"id":"year","label":"s_year","type":"string"},{"id":"value","label":"song_count","type":"number"}],"rows":[{"c":[{"v":"2013"},{"v":5}]},{"c":[{"v":"2012"},{"v":1}]},{"c":[{"v":"2005"},{"v":1}]},{"c":[{"v":"2003"},{"v":1}]}]} // create our data table out of json data loaded server. var data = new google.visualization.datatable(jsondata); var options = { title: 'yearly song counts', chartarea:{left:40, width:850, height:250}, legend: {position: 'none'}, colors:['#94b599'], haxis: {gridlines:{count:6}} }; // instantiate , draw our chart, passing in options. // not forget check div id var chart = new google.visualization.barchart(document.getelementbyid('chart_div')); chart.draw(data, options); } </script>
shouldnt able like:
var jsondata = $jsontable
can me figure out?
i have previous question: mysql find previous date song played hasn't been answered, if can me answer either of these i'd appreciative. thank you.
you close. need echo
variable inside php context (<?php ... ?>
)
var jsondata = <?php echo $jsontable; ?>
Comments
Post a Comment