I can't tell quite what you are doing, since I don't know php, but I hope you realize your datatable needs to have more than one value per row. The first value needs to be a string, a label for the pie slice, and the second value must be a number, unquoted.
Maybe you should use a small sample of your data in the JavaScript avoiding use of php altogether, just to see that your chart is working. On Wed, Jun 28, 2017 at 12:19 AM, Vivek Bhat <[email protected]> wrote: > Hello everyone, > > I am trying to connect to Postgre to retrieve content of the database > following which I am converting the data into JSON format. I have tried to > convert it into a data table format to visualize it in terms of Line chart. > Unfortunately, I am getting a blank page upon loading googel_chart.html. > > Here is my HTML file: > > <html> > <head> > <!--Load the AJAX API--> > <script type="text/javascript" src="https://www.gstatic.com/ > charts/loader.js"></script> > <script type="text/javascript" src="//ajax.googleapis.com/ > ajax/libs/jquery/1.10.2/jquery.min.js"></script> > <script type="text/javascript"> > > // Load the Visualization API and the LineChart package. > google.charts.load('current', {'packages':['corechart']}); > > // Set a callback to run when the Google Visualization API is loaded. > google.charts.setOnLoadCallback(drawChart); > > function drawChart() { > var jsonData = $.ajax({ > url: "http://localhost/getData.php";, > dataType: "json", > async: false > }).responseText; > > // Create our data table out of JSON data loaded from server. > var tableData = JSON.parse(jsonData); > console.log (tableData); > var data = new google.visualization.arrayToDataTable(tableData); > data.addColumn('string', 'Humidity'); > data.addColumn('number','jsonData'); > data.addRows(tableData); > > var options = { > title: 'Humidity and Temperature values', > curveType: 'function', > legend: { position: 'bottom' } > > // Instantiate and draw our chart, passing in some options. > var chart = new google.visualization.PieChart( > document.getElementById('chart_div')); > chart.draw(data, options); > } > > </script> > </head> > > <body> > <!--Div that will hold the pie chart--> > <div id="chart_div"></div> > </body> > </html> > > *My getData.php file is as shown below:* > > <?php > //setting header to json > header('Content-Type: application/json'); > > $conn_string = "host=192.168.1.4 port=5432 dbname=vivekdb user=vivek > password=postgres"; > $dbconn = pg_connect($conn_string); > > //print ($dbconn) > if(!$dbconn){ > die("Connection failed: " . $dbconn); > } > > //query to get data from the table > $query = "SELECT humidity FROM iot.dht22_humidity_data"; > > //execute query > $result = pg_query($dbconn,$query); > //$json = file_get_contents($row); > //$array = json_decode($json, TRUE); > > //print_r($array); > //To check if there is data > if (!$result) { > echo "An error occurred.\n"; > exit; > } > //loop through the returned data > > //while ($row = pg_fetch_row($result)) { > > //$myArr = array("$row[0]"); > // $myJSON = json_encode($myArr); > //echo "Humidity :", $myJSON; > //echo "\n"; > //} > > > //$myarray = array() > while ($row = pg_fetch_row($result)) { > > $myarray[] = $row; > > } > $mydata= json_encode($myarray, JSON_UNESCAPED_UNICODE |JSON_PRETTY_PRINT); > echo "Humidity:", $mydata; > > > //now print the data > > //close connection > pg_close($dbconn); > ?> > > I am able to get this as output upon loading getData.php > > Humidity:[ > [ > "78.5" > ], > [ > "99.4" > ], > [ > "99.9" > ], > [ > "98.7" > ], > [ > "88.3" > ], > [ > "87.4" > ], > [ > "91.9" > ], > [ > "90.7" > ] > ] > > > I am getting a blank page upon loading the *google_chart *page. Any > assistance in fixing the issue would be of great help. > > > > -- > 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 google-visualization-api@ > googlegroups.com. > 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/ec4208b2-8dba-4db7-aee5- > eb901b8a5c86%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/ec4208b2-8dba-4db7-aee5-eb901b8a5c86%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> [email protected] <[email protected]> 5CC, Cambridge MA -- 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/CAOtcSJOQM9vz3TmvVgYV3Mu4UnLKOqZWrDZoeK_qk4FDeDLdDA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
