cakephp中使用ajax获得数据,动态折线显示

来源:互联网 发布:网络打印共享器怎么用 编辑:程序博客网 时间:2024/03/29 13:45

新建ShowController.php:

<?phpnamespace 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 );}}}}



在template下新建Show文件夹,在Show文件夹下新建index.ctp文件:

<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 pointif(data != null){if(data.length > 2){var i = 0;while(data != null && i < data.length){var x = data[i++], // current timey = data[i++];//mytemperature//z = data[i++];//myhumidityid1++;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 timey = data[1];//mytemperature//z = data[i++];//myhumidityid1++;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 pointif(data != null){if(data.length > 2){var i = 0;while(data != null && i < data.length){var x = data[i++], // current timey = data[i++];//mytemperature//z = data[i++];//myhumidityid2++;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 timey = data[1];//mytemperature//z = data[i++];//myhumidityid2++;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 pointif(data != null){if(data.length > 2){var i = 0;while(data != null && i < data.length){var x = data[i++], // current timey = data[i++];//mytemperature//z = data[i++];//myhumidityid3++;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 timey = data[1];//mytemperature//z = data[i++];//myhumidityid3++;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 pointif(data != null){if(data.length > 2){var i = 0;while(data != null && i < data.length){var x = data[i++], // current timey = data[i++];//mytemperature//z = data[i++];//myhumidityid4++;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 timey = data[1];//mytemperature//z = data[i++];//myhumidityid4++;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>

这样当数据库数据更新时,数据会添加到折现上,实现动态效果

0 0
原创粉丝点击