javascript — поток PHP анализирует данные JSON из MySQL в диаграмму Morris.js
Погружаясь в новый проект и пытаясь научить себя JSON, PHP, MySQL и Morris.js.
Некоторый фон в том, чего я пытаюсь достичь.
У меня есть файл PHP, который выходит на веб-страницу и получает данные JSON. (Прямо сейчас я просто установил, чтобы захватить все). Затем с данными, которые он получает, он помещает их в базу данных MySQL. Я установил задание Cron для запуска этого файла каждую 1 минуту, чтобы я мог получать некоторые данные, поступающие в эту базу данных.
<?php
//connect to mysql db
$con = mysql_connect('localhost','user','password',"") or die('Could not connect: ' . mysql_error());
//connect to the database
mysql_select_db('database', $con);
//read the json file contents
$jsondata = file_get_contents('http://192.168.10.243/j');
//convert json object to php associative array
$data = json_decode($jsondata, true);
//get the device details
$id = $data['data']['id'];
$type = $data['data']['type'];
$detector = $data['data']['detector'];
$cpm = $data['data']['cpm'];
$temperature = $data['data']['temperature'];
$uptime = $data['data']['uptime'];
//insert into mysql table
$sql = "INSERT INTO database_table_1(id, type, detector, cpm, temperature, uptime)
VALUES('$id', '$type', '$detector', '$cpm', '$temperature', '$uptime')";
if(!mysql_query($sql,$con))
{
die('Error : ' . mysql_error());
}
?>
После этого я снова использую PHP для анализа информации из MySQL в массив JSON. Прямо сейчас он проанализирует все данные MySQL, которые у него есть (что я не уверен, хорошо ли это сейчас или я должен найти способ просто проанализировать самые последние данные из MySQL.) Дайте мне знать, что вы считать.
<?php
//open connection to mysql db
$connection = mysqli_connect('localhost','user','password','database_table_1') or die("Error " . mysqli_error($connection));
//fetch table rows from mysql db
$sql = "select * from database_table_1";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
//create an array
$emparray[] = array();
while($row =mysqli_fetch_assoc($result))
{
array_push(
$emparray,
array(
'a' => $row['timestamp'],
'w' => $row['id'],
'x' => $row['cpm'],
'y' => $row['temperature'],
'Z' => $row['uptime']
)
);
}
// $emparray[] = $row;
echo json_encode($emparray);
//close the db connection
mysqli_close($connection);
?>
Теперь, если бы мне нужно было запустить этот PHP-файл вручную, я бы получил много JSON-данных, отформатированных так же, как это.
[{"a":"2015-08-17 21:34:01","w":"110000","x":"16","y":"28","Z":"112094"}]
Теперь я планирую обновить эту информацию на веб-странице, используя диаграммы morris.js. Вот моя текущая страница index.html, где PHP-скрипт и разделы morris.js находятся внизу.
<!DOCTYPE html>
<html lang="en">
<!-- morris.js dependencies -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Chart V0.1</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
<a href="#">Dashboard</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div id="myfirstchart" style="height: 300px;"></div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p> This template has a responsive menu toggling system.</p>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- PHP from Mysql to Json array -->
<?php
//open connection to mysql db
$connection = mysqli_connect('localhost','user','password','database_table_1') or die("Error " . mysqli_error($connection));
//fetch table rows from mysql db
$sql = "select * from database_table_1";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
//create an array
$emparray[] = array();
while($row =mysqli_fetch_assoc($result))
{
array_push(
$emparray,
array(
'a' => $row['timestamp'],
'w' => $row['id'],
'x' => $row['cpm'],
'y' => $row['temperature'],
'Z' => $row['uptime']
)
);
}
// $emparray[] = $row;
echo json_encode($emparray);
//close the db connection
mysqli_close($connection);
?>
<!-- Json Pull -->
<script>
Morris.Area({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on the chart.
data: <?php echo json_encode($emparray);?>,
// The name of the data record attribute that contains x-values.
xkey: 'a',
// A list of names of data record attributes that contain y-values.
ykeys: ['x'],
// Labels for the ykeys -- will be displayed when you hover over the chart.
labels: ['x-test']
});
</script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
До сих пор я разбираюсь в большей части этого нового проекта, хотя в настоящее время я озадачен тем, как взять данные, которые я могу проанализировать из моего сценария PHP, и передать их в диаграмму или диаграммы morris.js. Я хотел бы иметь его, чтобы диаграммы или диаграммы обновлялись сами по себе каждую минуту, и чтобы диаграммы morris.js получали свои данные из моего PHP-скрипта.
Любая помощь, идеи, ссылки или лучшие практики очень помогли бы. Мой опыт написания кода практически отсутствует, поэтому я заранее прошу прощения.
Спасибо
ОБНОВИТЬ:
Я перенес скрипт PHP со страницы HTML и попытался вызвать результаты PHP через $ .getJSON на странице HTML. Хотя я до сих пор не могу заставить morris.js использовать проанализированные данные. Я даже не получаю диаграмму. Есть идеи?
<!-- Ajax -->
<script>
$.getJSON('export_php_test_1.php', function( data ){
Morris.Area({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on the chart.
data: data,
// The name of the data record attribute that contains x-values.
xkey: 'a',
// A list of names of data record attributes that contain y-values.
ykeys: 'x',
// Labels for the ykeys -- will be displayed when you hover over the chart.
labels: 'x-test'
});
});
</script>
Решение
Ты можешь использовать метаобновление. Следующий код автоматически обновит полную HTML-страницу через 60 секунд.
<meta http-equiv="refresh" content="60">
Если вы хотите обновить только раздел диаграммы, вам нужно удалить встроенные php-коды в отдельный источник и использовать Ajax для извлечения данных для morris. Если вы это сделаете, то можете использовать JS-функцию setInterval для регулярного запуска Ajax.
Другие решения
Других решений пока нет …