新建ShowController.php:
<?php
namespace App\Controller;
use App\Controller\AppController;
class ShowController extends AppController {
public function initialize()
{
parent::initialize();
$this->loadComponent('RequestHandler');
$this->loadComponent('Flash'); // Include the FlashComponent
}
public function index() {
// $this->loadModel('Mydata');
// $this->loadModel('Offdata');
// if ($this->request->is('ajax')) {
// $this->autoRender = false;
// $id = $_POST ['id'];
// $results = $this->Temperature->find ( 'all', array (
// 'fields' => array (
// 'Temperature.time',
// 'Temperature.temp'
// ),
// 'conditions' => array (
// 'id >' => $id
// )
// ) );
// $arr = array();
// $arr[] = $id;
// foreach ($results as $result){
// $arr[] = $result->time;
// $arr[] = $result->temp;
// }
// if (count($arr) > 1) {
// echo json_encode ( $arr );
// }
// }
}
public function getMyTemperatureData()
{
$this->loadModel('Devicesdatas');
$user_id=$this->request->session()->read('User.id');
if ($this->request->is('ajax')) {
$this->autoRender = false;
$id = $_POST ['id'];
$results = $this->Devicesdatas->find ( 'all', array (
'fields' => array (
'Devicesdatas.created',
'Devicesdatas.temperature'
),
'conditions' => array (
'id >' => $id,
'user_id' => $user_id
)
) );
$arr = array();
//$arr[] = $id;
foreach ($results as $result){
$arr[] = $result->created;
$arr[] = $result->temperature;
}
if (count($arr) > 0) {
echo json_encode ( $arr );
}
}
}
public function getOffTemperatureData()
{
//$user_id=$this->request->session()->read('User.id');
$this->loadModel('Officialdatas');
if ($this->request->is('ajax')) {
$this->autoRender = false;
$id = $_POST ['id'];
$results = $this->Officialdatas->find ( 'all', array (
'fields' => array (
'Officialdatas.created',
'Officialdatas.temperature'
),
'conditions' => array (
'id >' => $id,
//'user_id' => $user_id
)
) );
$arr = array();
//$arr[] = $id;
foreach ($results as $result){
$arr[] = $result->created;
$arr[] = $result->temperature;
}
if (count($arr) > 0) {
echo json_encode ( $arr );
}
}
}
public function getMyHumidityData()
{
$this->loadModel('Devicesdatas');
$user_id=$this->request->session()->read('User.id');
if ($this->request->is('ajax')) {
$this->autoRender = false;
$id = $_POST ['id'];
$results = $this->Devicesdatas->find ( 'all', array (
'fields' => array (
'Devicesdatas.created',
'Devicesdatas.humidity'
),
'conditions' => array (
'id >' => $id,
'user_id' => $user_id
)
) );
$arr = array();
//$arr[] = $id;
foreach ($results as $result){
$arr[] = $result->created;
$arr[] = $result->humidity;
}
if (count($arr) > 0) {
echo json_encode ( $arr );
}
}
}
public function getOffHumidityData()
{
$this->loadModel('Officialdatas');
//$user_id=$this->request->session()->read('User.id');
if ($this->request->is('ajax')) {
$this->autoRender = false;
$id = $_POST ['id'];
$results = $this->Officialdatas->find ( 'all', array (
'fields' => array (
'Officialdatas.created',
'Officialdatas.humidity'
),
'conditions' => array (
'id >' => $id,
//'user_id' => $user_id
)
) );
$arr = array();
//$arr[] = $id;
foreach ($results as $result){
$arr[] = $result->created;
$arr[] = $result->humidity;
}
if (count($arr) > 0) {
echo json_encode ( $arr );
}
}
}
}
<head>
<?php echo $this->Html->script('jquery'); ?>
<?php echo $this->Html->script('highcharts'); ?>
<?php echo $this->Html->link('View image', array(
'controller' => 'devicesdatas',
'action' => 'imgview'),array(
'font' => array('size' => '2')
)
); ?>
<script>
// global
var chart1;
var chart2;
var id1 = 0;
var id2 = 0;
var id3 = 0;
var id4 = 0;
var time = new Date();
time = 0;
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestMyTemperatureData(){
$.ajax({
url: 'show/getMyTemperatureData',
type: 'POST',
data: {"id": id1},
dataType:'json',
success: function(data) {
//alert(data.length);
var series = chart1.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
if(data != null){
if(data.length > 2){
var i = 0;
while(data != null && i < data.length)
{
var x = data[i++], // current time
y = data[i++]; //mytemperature
//z = data[i++]; //myhumidity
id1++;
x = Date.parse(x);
chart1.series[0].addPoint([x,y], true, shift);
//chart2.series[0].addPoint([x,z], true, shift);
}
}else{
var x = data[0], // current time
y = data[1]; //mytemperature
//z = data[i++]; //myhumidity
id1++;
x = Date.parse(x);
chart1.series[0].addPoint([x,y], true, shift); //*/
//chart2.series[0].addPoint([x,z], true, shift);
}
setTimeout(requestMyTemperatureData, 1000);
}else{
setTimeout(requestMyTemperatureData, 1000);
}
},
cache: false
});
}
function requestOfficalTemperatureData(){
$.ajax({
url: 'show/getOffTemperatureData',
type: 'POST',
data: {"id": id2},
dataType:'json',
success: function(data) {
//alert(data.length);
var series = chart1.series[1],
shift = series.data.length > 30; // shift if the series is longer than 20
// add the point
if(data != null){
if(data.length > 2){
var i = 0;
while(data != null && i < data.length)
{
var x = data[i++], // current time
y = data[i++]; //mytemperature
//z = data[i++];//myhumidity
id2++;
x = Date.parse(x);
y = -y;
//z = -z;
chart1.series[1].addPoint([x,y], true, shift);
//chart2.series[1].addPoint([x,z], true, shift);
}
}else{
var x = data[0], // current time
y = data[1]; //mytemperature
//z = data[i++];//myhumidity
id2++;
x = Date.parse(x);
y = -y;
//z = -z;
chart1.series[1].addPoint([x,y], true, shift); //*/
//chart2.series[1].addPoint([x,z], true, shift);
}
setTimeout(requestOfficalTemperatureData, 1000);
}else{
setTimeout(requestOfficalTemperatureData, 1000);
}
},
cache: false
});
}
function requestTemperatureData() {
requestMyTemperatureData();
requestOfficalTemperatureData();
}
function requestMyHumidityData(){
$.ajax({
url: 'show/getMyHumidityData',
type: 'POST',
data: {"id": id3},
dataType:'json',
success: function(data) {
//alert(data.length);
var series = chart1.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
if(data != null){
if(data.length > 2){
var i = 0;
while(data != null && i < data.length)
{
var x = data[i++], // current time
y = data[i++]; //mytemperature
//z = data[i++]; //myhumidity
id3++;
x = Date.parse(x);
chart2.series[0].addPoint([x,y], true, shift);
//chart2.series[0].addPoint([x,z], true, shift);
}
}else{
var x = data[0], // current time
y = data[1]; //mytemperature
//z = data[i++]; //myhumidity
id3++;
x = Date.parse(x);
chart2.series[0].addPoint([x,y], true, shift); //*/
//chart2.series[0].addPoint([x,z], true, shift);
}
setTimeout(requestMyHumidityData, 1000);
}else{
setTimeout(requestMyHumidityData, 1000);
}
},
cache: false
});
}
function requestOfficalHumidityData(){
$.ajax({
url: 'show/getOffHumidityData',
type: 'POST',
data: {"id": id4},
dataType:'json',
success: function(data) {
//alert(data.length);
var series = chart1.series[1],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
if(data != null){
if(data.length > 2){
var i = 0;
while(data != null && i < data.length)
{
var x = data[i++], // current time
y = data[i++]; //mytemperature
//z = data[i++];//myhumidity
id4++;
x = Date.parse(x);
y = -y;
//z = -z;
chart2.series[1].addPoint([x,y], true, shift);
//chart2.series[1].addPoint([x,z], true, shift);
}
}else{
var x = data[0], // current time
y = data[1]; //mytemperature
//z = data[i++];//myhumidity
id4++;
x = Date.parse(x);
y = -y;
//z = -z;
chart2.series[1].addPoint([x,y], true, shift); //*/
//chart2.series[1].addPoint([x,z], true, shift);
}
setTimeout(requestOfficalHumidityData, 1000);
}else{
setTimeout(requestOfficalHumidityeData, 1000);
}
},
cache: false
});
}
function requestHumidityData() {
requestMyHumidityData();
requestOfficalHumidityData();
}
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
defaultSeriesType: 'spline',
events: {
load: requestTemperatureData
}
},
title: {
text: 'temperature'
},
xAxis: [{
type: 'datetime',
//tickInterval: 5,
//tickPixelInterval: 5000,
title: {
text: 'my temperature',
style: {
color: '#89A54E'
}
}
// maxZoom: 20 * 1000
},
{
type: 'datetime',
//tickPixelInterval: 100,
opposite: true, //������ ��ʾ��ʾ���Ϸ�
title: {
text: 'offical temperature',
style: {
color: '#89A54E'
}
}
// maxZoom: 20 * 1000
}],
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'temperature',
margin: 80
}
},
series: [{
name: 'my temperature',
data: []
},
{
name: 'offical temperature',
data: [],
xAxis: 1 //�ڶ���X��
}],
tooltip:{
shared:true,
crosshairs:true,
xDateFormat: '%Y-%m-%d %H:%M:%S'
}
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container2',
defaultSeriesType: 'spline',
events: {
load: requestHumidityData
}
},
title: {
text: 'humidity'
},
xAxis: [{
type: 'datetime',
//tickInterval: 5,
//tickPixelInterval: 5000,
title: {
text: 'my humidity',
style: {
color: '#89A54E'
}
}
// maxZoom: 20 * 1000
},
{
type: 'datetime',
//tickPixelInterval: 100,
opposite: true, //������ ��ʾ��ʾ���Ϸ�
title: {
text: 'offical humidity',
style: {
color: '#89A54E'
}
}
// maxZoom: 20 * 1000
}],
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'humidity',
margin: 80
}
},
series: [{
name: 'my humidity',
data: []
},
{
name: 'offical humidity',
data: [],
xAxis: 1 //�ڶ���X��
}],
tooltip:{
shared:true,
crosshairs:true,
xDateFormat: '%Y-%m-%d %H:%M:%S'
}
});
});
</script>
</head>
<body>
<div id="container1" style="height: 265px; min-width: 600px; background-color:#CCCCCC"></div>
<div id="container2" style="height: 265px; min-width: 600px; background-color:#CCCCCC"></div>
</body>
这样当数据库数据更新时,数据会添加到折现上,实现动态效果