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 );}}}}
<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
- cakephp中使用ajax获得数据,动态折线显示
- CakePHP中使用AJAX!
- echarts折线图,使用ajax动态加载数据
- 如何在CakePHP中使用Ajax请求
- CakePHP使用ajax传值
- 使用MSChart实时动态显示折线图
- 使用echarts实现动态显示折线图
- cakephp 数据库数据页面显示
- CakePHP中使用saveAll无法正常保存数据的解决办法
- 使用Ajax动态添加表格获得后台数据翻页异步刷新(struts2下)
- jquery 使用ajax请求数据显示到页面表格中
- jquery中使用ajax接收数据并且显示
- 使用Ajax动态加载数据
- 百度echarts使用教程(4):echarts折线图每个折线点都显示数据
- 使用AJAX实时显示数据
- cakephp ajax
- ajax TooTip 异步显示动态数据
- 攻克CakePHP系列二:表单数据显示
- leetcode刷题,总结,记录,备忘 80
- PostgreSQL新手入门
- Linux常用命令(自我总结)
- 图片的内存优化
- struts2总结
- cakephp中使用ajax获得数据,动态折线显示
- 在vs2010下编译OpenSSL
- ORA-06553:PLS-306:wrong number or types of arguments in call to ''
- 设置不自动弹出软键盘的最简洁解决方案
- VBS 改 IP(modify IP by VBS)
- HDU 1251 统计难题
- hdu 5595
- Java Notes-1
- java基础第八天——正则、集合与数组的区别