Hi, My chart should exactly looks like this http://onnetsourcing.com/vivera/chart.html . Here I have entered the data in manual format. Please help me the script which istaking the data from DB and display in the chart.html page. You can see the codes as below:
<script type="text/javascript" src="https://www.google.com/jsapi";></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); var dataSet = [ ['Date','1st Floor', '2nd Floor', '3rd Floor', '4th Floor', '5th Floor', '6th Floor', '7th Floor', 'Tarrace Floor'], ['A Block', 1, 1, 1, 0, 0, 0, 0, 0], ['B Block', 1, 1, 1, 1, 1, 1, 1, 1], ['C Block', 1, 1, 1, 1, 1, 1, 1, 1], ['D Block', 1, 1, 1, 1, 1, 1, 1, 1], ['E Block', 1, 1, 0, 0, 0, 0, 0, 0], ['F Block', 1, 1, 0, 0, 0, 0, 0, 0], ]; // The first chart google.setOnLoadCallback(drawChart1); function drawChart1() { var data = google.visualization.arrayToDataTable( dataSet ); var options = { title: 'Project Progress Report\nTotals', vAxis: {title: 'Completed Floors', maxValue: 8}, // sets the maximum value backgroundColor: {strokeWidth: 2 }, // to draw a nice box all around the chart isStacked: 'true' // = rowstacked in gnuplot }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1')); chart.draw(data, options); } </script> <div style="display: table;"> <div style="display: table-row"> <div id="chart_div1" style="width: 600px; height: 600px; display: table-cell;"></div> <div id="chart_div2" style="width: 600px; height: 600px; display: table-cell;"></div> </div> </div> I have red colored data part which I have entered manually. But that data from my mysql table get automatically. Regards, Krishnaprasad PB On Thursday, 20 October 2011 12:04:30 UTC+5:30, Dinga Bogdan wrote: > > Hi, I will try to help you. > > It is easy to get data from PHP/SQL using JASON format. > And also google api has a ajax "function" to get the data from the php > script. > > If you could give me the columns, rows from youre sql I can show you a > more precise example. > Here the short version: > For PHP script you have to build 2 main arrays "rows" and "cols" . > Each array contains more arrays with values. > Something like this: > $rows = array('c' => array( > array( 'v' => $timestamp, 'f' => NULL ), > array( 'v' => > (int)$getData_t1['power_avg'], 'f' => ''. > $getData_t1['power_avg'].' kWh' ), > array( 'v' => > (int)$getData_t2['power_avg'], 'f' => ''. > $getData_t2['power_avg'].' kWh' ), > array( 'v' => > (int)$getData_t3['power_avg'], 'f' => ''. > $getData_t3['power_avg'].' kWh' ), > array( 'v' => > (int)$getData_t4['power_avg'], 'f' => ''. > $getData_t4['power_avg'].' kWh' ), > array( 'v' => > (int)$getData_t5['power_avg'], 'f' => ''. > $getData_t5['power_avg'].' kWh' ), > array( 'v' => > (int)$getData_t6['power_avg'], 'f' => ''. > $getData_t6['power_avg'].' kWh' ), > array( 'v' => > (int)$getData_t7['power_avg'], 'f' => ''. > $getData_t7['power_avg'].' kWh' ) > )); > This is a single row with 8 columns. Now to build the columns: > $cols = array( > array( 'id' => '0', 'label' => 'Timestamp', 'type' > => 'string'), > array( 'id' => '1', 'label' => 'WTG01', 'type' => > 'number'), > array( 'id' => '2', 'label' => 'WTG02', 'type' => > 'number'), > array( 'id' => '3', 'label' => 'WTG03', 'type' => > 'number'), > array( 'id' => '4', 'label' => 'WTG04', 'type' => > 'number'), > array( 'id' => '5', 'label' => 'WTG05', 'type' => > 'number'), > array( 'id' => '6', 'label' => 'WTG06', 'type' => > 'number'), > array( 'id' => '7', 'label' => 'WTG07', 'type' => > 'number') > ); > Not that we have the columns and for now 1 row, we echo out the json > string like this: > > echo '{ "cols": '.json_encode($cols).', "rows": > '.json_encode($rows).'}'; > This is it for the PHP, the script accessed from the browser itself > should print the JSON string. > For the js it is even simpler. Lets say that this PHP file is named > test.php > var jsonData = $.ajax({ > url: "test.php", > dataType:"json", > async: false > }).responseText; > > var data = new google.visualization.DataTable(jsonData); > And here you have the data table made based on the PHP JSON file :) > > Give me the exact thing you want to do and I will try to make the > script for you. I had the same issue a few weeks ago. > > On Oct 19, 9:34 pm, rL <[email protected]> wrote: > > hey, > > > > i wanna build a simple PHP Page with retrieving all necessary data > > from mysql but the the html starts with the javascript google function > > and i cannot put my php data in cause php rendering is over... > > > > how can i build up those graphs in php with getting data from mysql > > without something complicated like JSON, AJAX and something... > > > > Or is there any example of this anywhere? > > > > Thanks -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8456798e-eaf3-4b2f-8a66-92e95d1d6054%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
