Hi all, I'm having a bit of difficulty finding what the problem is with displaying/drawing the line char. i am using a free web-hosting just to try things out, but i doubt that's the issue. because i can retrieve my sql data, encode to json, show it, and save it with no issues. I hope someone can guide me, here is my code:
index.php <!doctype html> <html> <head> <meta charset="utf-8"> <title>SOME REAL TIME DATA PROJECT</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css";> <link rel="stylesheet" type="text/css" href="myStyle.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js";> </script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js";></script> <!--Load the AJAX API --> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"; type="text/javascript"></script> <script type="text/javascript"> function drawChart () { var dataJSON = $.ajax({ url:"returnData.php", dataType:"json", async:false }).responseText; //Create our data table out of JSON data loaded from server var data = new google.visualization.DataTable(dataJSON); //PieCharts expects 2 columns of data: a label and a value, so we need to use a DataView to restrict to 2 columns // var view = new google.visualization.DataView(data); // view.setColumns([0, 3]); //Instantiate and draw our chart, passing in some options var chart = new google.visualization.LineChart(document.getElementById('linechart_div')); chart.draw(data, {width:600, height:500}); } //Load the visualization API and the piechart package google.charts.load('current', {'packages':['corechart']}); //Set a callback to run when the google visualization API is loaded google.setOnLoadCallback(drawChart); </script> </head> <body> <nav class="nav"> <div class="nav-left" align="left"> <div align="center"><a class="nav-item"> Real Time Data Visualization <img src="http://www.purchased.com/wp-content/uploads/2013/06/IconsCroppedRealtime-150x150.png"; alt="realtime logo"> </a></div> </div> <div class="nav-center" align="center"> <a class="nav-item"> </a> </div> <div class="nav-right nav-menu"> <a class="nav-item"> Home </a> <a class="nav-item"> Documentation </a> <a class="nav-item"> Contact Us </a> </div> </nav> <div class="columns"> <div class="column" id="linechart_div"> </div> <div class="column" id="barchart_div"> </div> </div> </body> <footer class="footer"> <div class="container"> <div class="content has-text-centered"> <p> Real Time Data Coding Test </p> </div> </div> </footer> </html> fetchDataTest.php <?php include "myPHP.php"; //myPHP.php holds the code for connecting to the DB. //Step No. 2: Extracting data from database $query = "SELECT Time,Speed,Pressure FROM Rig"; $res = mysqli_query($link,$query) or die("Query Not Executed " . mysqli_error($link)); $dataTable = array(); //$dataTable['cols'][] = array( $dataTable['cols'] = array( /* define your DataTable columns here * each column gets its own array * syntax of the arrays is: * label => column label * type => data type of column (string, number, date, datetime, boolean) */ array('label' => 'Time', 'type' => 'DateTime'), array('label' => 'Speed', 'type' => 'number'), array('label' => 'Pressure', 'type' => 'number') // etc... ); $rows = array(); while($r = mysqli_fetch_assoc($res)) { $temp = array(); // each column needs to have data inserted via the $temp array $temp[] = array('v' => date("h:i:sa", $r['Time'])); //this is to convert "hours:minutes:seconds" from string to time $temp[] = array('v' => (int) $r['Speed']); $temp[] = array('v' => (int) $r['Pressure']); // etc... // insert the temp array into $rows $rows[] = array('c' => $temp); } // populate the table with rows of data $dataTable['rows'] = $rows; // encode the table as JSON $jsonTable = json_encode($dataTable); // set up header; first two prevent IE from caching queries //header('Cache-Control: no-cache, must-revalidate'); //header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); //header('Content-type: application/json'); // return the JSON data //echo $jsonTable; file_put_contents("jsonData.json", $jsonTable); //if (file_put_contents("jsonData.json", $jsonTable)) // echo "JSON file created successfully..."; //else // echo "Oops! Error creating json file..."; ?> <!doctype html> <html> <body> </body> </html> returnData.php <?php include 'fetchDataTest.php'; $string = file_get_contents("jsonData.json"); echo $string; ?> <!doctype html> <html> <body> </body> </html> myPHP.php <?php $dbname = 'xx'; $dbuser = 'xx'; $dbpass = 'xx'; $dbhost = 'xx'; $link = mysqli_connect($dbhost, $dbuser, $dbpass) or die("Unable to Connect to $dbhost"); mysqli_select_db($link, $dbname) or die("Could not open the db '$dbname'"); ?> <html> <body> </body> </html> -- 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/768c0309-be1b-4018-8f84-839b1fcb98a0%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
![http://www.purchased.com/wp-content/uploads/2013/06/IconsCroppedRealtime-150x150.png"](http://www.purchased.com/wp-content/uploads/2013/06/IconsCroppedRealtime-150x150.png"){kind=link}