How can I use PHP MySQL Dynamic data
- This topic has 52 replies, 2 voices, and was last updated 3 years, 1 month ago by
.
-
Hi,
I tried to do what you describe here, but my graph is not reloading.. I’m putting the code here:
data.php:
<?phpheader(‘Content-Type: application/json’);
//declaracao de servidores
$server = “10.7.5.31”;
$user = “root”;
$senha = “root”;
$bd = “me-rpc”;mysql_connect($server, $user, $senha) or die(mysql_error());
mysql_select_db($bd) or die(mysql_error());$data_points = array();
$result1 = mysql_query(“SELECT tamanho, fileName, porcentagem FROM londrina WHERE status = 5 AND origem = ‘curitiba’ AND isLocked = 0 “)
or die(mysql_error());$result2 = mysql_query(“SELECT tamanho, fileName, porcentagem FROM londrina WHERE status = 5 AND origem = ‘foz’ AND isLocked = 0 “)
or die(mysql_error());$result3 = mysql_query(“SELECT tamanho, fileName, porcentagem FROM londrina WHERE status = 5 AND origem = ‘cascavel’ AND isLocked = 0 “)
or die(mysql_error());$result4 = mysql_query(“SELECT tamanho, fileName, porcentagem FROM londrina WHERE status = 5 AND origem = ‘maringa’ AND isLocked = 0 “)
or die(mysql_error());$result5 = mysql_query(“SELECT tamanho, fileName, porcentagem FROM londrina WHERE status = 5 AND origem = ‘paranavai’ AND isLocked = 0 “)
or die(mysql_error());$result6 = mysql_query(“SELECT tamanho, fileName, porcentagem FROM londrina WHERE status = 5 AND origem = ‘pontagrossa’ AND isLocked = 0 “)
or die(mysql_error());$result7 = mysql_query(“SELECT tamanho, fileName, porcentagem FROM londrina WHERE status = 5 AND origem = ‘guarapuava’ AND isLocked = 0 “)
or die(mysql_error());while($row = mysql_fetch_array( $result1 )) {
if($row[‘fileName’] != null){
$point = array(“label” => $row[‘fileName’] , “y” => ($row[‘porcentagem’]/$row[‘tamanho’]*100));
array_push($data_points, $point);
}else{
$point = array(“label” => “slot livre” , “y” => 0);
array_push($data_points, $point);
}
}while($row = mysql_fetch_array( $result2 )) {
if($row[‘fileName’] != null){
$point = array(“label” => $row[‘fileName’] , “y” => ($row[‘porcentagem’]/$row[‘tamanho’]*100));
array_push($data_points, $point);
}else{
$point = array(“label” => “slot livre” , “y” => 0);
array_push($data_points, $point);
}
}while($row = mysql_fetch_array( $result3 )) {
if($row[‘fileName’] != null){
$point = array(“label” => $row[‘fileName’] , “y” => ($row[‘porcentagem’]/$row[‘tamanho’]*100));
array_push($data_points, $point);
}else{
$point = array(“label” => “slot livre” , “y” => 0);
array_push($data_points, $point);
}
}while($row = mysql_fetch_array( $result4 )) {
if($row[‘fileName’] != null){
$point = array(“label” => $row[‘fileName’] , “y” => ($row[‘porcentagem’]/$row[‘tamanho’]*100));
array_push($data_points, $point);
}else{
$point = array(“label” => “slot livre” , “y” => 0);
array_push($data_points, $point);
}
}while($row = mysql_fetch_array( $result5 )) {
if($row[‘fileName’] != null){
$point = array(“label” => $row[‘fileName’] , “y” => ($row[‘porcentagem’]/$row[‘tamanho’]*100));
array_push($data_points, $point);
}else{
$point = array(“label” => “slot livre” , “y” => 0);
array_push($data_points, $point);
}
}while($row = mysql_fetch_array( $result6 )) {
if($row[‘fileName’] != null){
$point = array(“label” => $row[‘fileName’] , “y” => ($row[‘porcentagem’]/$row[‘tamanho’]*100));
array_push($data_points, $point);
}else{
$point = array(“label” => “slot livre” , “y” => 0);
array_push($data_points, $point);
}
}while($row = mysql_fetch_array( $result7 )) {
if($row[‘fileName’] != null){
$point = array(“label” => $row[‘fileName’] , “y” => ($row[‘porcentagem’]/$row[‘tamanho’]*100));
array_push($data_points, $point);
}else{
$point = array(“label” => “slot livre” , “y” => 0);
array_push($data_points, $point);
}
}mysql_close();
echo json_encode($data_points, JSON_NUMERIC_CHECK);
?>
graph.html:
<!DOCTYPE html>
<head><title>graph</title>
<script src=”jquery.js”></script>
<script src=”canvasjs.js”></script>
<script type=”text/javascript”>
var updateInterval = 100;
var dps;
$(document).ready(function () {$.getJSON(“data.php”, function (result) {
dps = result;
var chart = new CanvasJS.Chart(“chartContainer”, {
title:{
text: “RECEBIMENTO DE MATERIAIS”,
},
axisY:{
minimum: 0,
maximum: 100
},
data: [{
type: “stackedBar”,
dataPoints: dps}
]
});
chart.render();
});
var updateChart = function () {
$.getJSON(“data.php”, function (result) {
dps = result;
});
chart.render();
};setInterval(function(){updateChart()}, updateInterval);
});
</script>
</head>
<body>
<div id=”chartContainer” style=”height: 300px; width: 100%;”>
</body>
</html>
There´s something wrong? In first time the chart load, but the reload function not.
Thanks
I am an EE Prof., enjoying this package. Thanks for a great site with lots of examples. I am looking to take data from mysql which is generated via sensor enabled Arduinos sending info (temp, humidity, ect) regularly to the mysql. I have the Arduino to mysql working, and can extract the data from mysql and plot with another package, but can’t render the data in canvasjs. To get comfortable with canvasjs I have made a couple of simple files to test, and am stuck. For simplicity, have made a table with just three ints: id, x, and y. The following PHP seems to work. The table “testing” just has three columns: id, x, and y which are all set to int, and id is set to autoincrement (using phpmyadmin).
<?php
header(‘Content-Type: application/json’);
$con=mysqli_connect(“localhost”, “cjsuser”, “temp2013”, “canvasjsdb”);
// Check connection
if (mysqli_connect_errno($con))
{
echo “Failed to connect to DataBase: ” . mysqli_connect_error();
}else
{
$data_points = array();
$result = mysqli_query($con, “SELECT * FROM testing”);
while($row = mysqli_fetch_array($result))
{
$point = array(“label” => $row[‘x’] , “y” => $row[‘y’]);
array_push($data_points, $point);
}
echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);
?>
This is live at: http://www.capegreenenergy.com/dev/sunilJSON.php
It returns: [{“label”:1,”y”:10},{“label”:2,”y”:20},{“label”:3,”y”:15}]However, the following doesn’t render, and I think I am missing something obvious.
<html>
<head>
<title>JSON TEST</title>
<script src=”jquery.js”></script>
<script src=”/js/canvasjs.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$.getJSON(“sunilJSON.php”, function (result) {
var chart = new CanvasJS.Chart(“chartContainer”, {
data: [ { dataPoints: result } ]
});
chart.render();
});
});
</script>
</head>
<body>
<h2>OK NOW IN THE BODY</h2>
<div id=”chartContainer” style=”width: 800px; height: 380px;”></div>
<h2>OK this is after chartContainer</h2>
</body>
</html>
This is live at:
http://www.capegreenenergy.com/dev/sunilJSON.html
and as you can see it is live but the chart does not render.I used a simple example from your site to make sure my directory structure is ok (I have /dev and /js at the same level of hierarchy). This one works fine:
http://www.capegreenenergy.com/dev/simpleChart.html<html>
<head>
<script type=”text/javascript”>
window.onload = function () {
//function () {var chart = new CanvasJS.Chart(“chartContainer”, {
title:{
text: “Fruits sold in First Quarter”
},
data: [//array of dataSeries
{ //dataSeries object/*** Change type “column” to “bar”, “area”, “line” or “pie”***/
type: “column”,
dataPoints: [
{ label: “banana”, y: 18 },
{ label: “orange”, y: 29 },
{ label: “apple”, y: 40 },
{ label: “mango”, y: 34 },
{ label: “grape”, y: 24 }
]
}
]
});chart.render();
}
</script>
<script type=”text/javascript” src=”/js/canvasjs.js”></script>
</head>
<body>
Thanks again for a cool package and thanks in advance for helping me get unstuck :)
You must be logged in to reply to this topic.