Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- I am currently trying to get a line chart with data from a DB. I have the data showing and am able to retrieve a single line but the issue is when I add multiple columns it is only showing the last column data.
- The goal of this is to pull the temp from the data and display it, which is working but like i said only for one column in the set.
- With the above script I only see 1 line in my chart and it is always the last one, in this case Stoneham. Also when I hover over the line it only shows Stoneham data. What am I missing in this script?
- <!doctype html public "-//w3c//dtd html 3.2//en">
- <html>
- <head>
- <title>Core Temp of Dashboards</title>
- </head>
- <body >
- <?Php
- require "config.php";// Database connection
- if($stmt = $connection->query("SELECT name,temp, CurrentTime FROM test WHERE currentTime = '2019-11-14 08:55:02' ORDER BY currentTime DESC ")){
- echo "No of records : ".$stmt->num_rows."<br>";
- $php_data_array = Array(); // create PHP array
- echo "<table>
- <tr> <th>Location</th><th>IP</th><th>Temp</th><th>Date</th><th>Last Boot</th><th>Exp Vrv</th></tr>";
- while ($row = $stmt->fetch_row()) {
- echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td><td>$row[3]</td><td>$row[4]</td><td>$row[5]</td></tr>";
- $php_data_array[] = $row; // Adding to array
- }
- echo "</table>";
- }else{
- echo $connection->error;
- }
- //print_r( $php_data_array);
- // You can display the json_encode output here.
- echo json_encode($php_data_array);
- // Transfor PHP array to JavaScript two dimensional array
- echo "<script>
- var my_2d = ".json_encode($php_data_array)."
- </script>";
- ?>
- <div id="curve_chart"></div>
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
- <script type="text/javascript">
- // Load the Visualization API and the corechart package.
- google.charts.load('current', {packages: ['corechart', 'line']});
- google.charts.setOnLoadCallback(drawChart);
- function drawChart() {
- // Create the data table.
- var data = new google.visualization.DataTable();
- data.addColumn('string', 'temp');
- data.addColumn('number', 'Andover');
- data.addColumn('number', 'Thomaston');
- data.addColumn('number', 'Beverly');
- data.addColumn('number', 'Bedford');
- data.addColumn('number', 'Salem');
- data.addColumn('number', 'Stoneham');
- for(i = 0; i < my_2d.length; i++)
- data.addRow([
- my_2d[i][2],
- parseInt(my_2d[i][1]),
- parseInt(my_2d[i][1]),
- parseInt(my_2d[i][1]),
- parseInt(my_2d[i][1]),
- parseInt(my_2d[i][1]),
- parseInt(my_2d[i][1])
- ]);
- var options = {
- title: 'Current Temps',
- width: 500,
- height: 300,
- legend: { position: 'right' },
- tooltip: {trigger: 'selection'},
- vAxis: {title: 'Temp' }
- };
- var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
- chart.draw(data, options);
- }
- ///////////////////////////////
- </script>
- </body></html>
Add Comment
Please, Sign In to add comment
