如何使用highchart在yii中添加实时更新图表
how to add live updating charts in yii with highchart
我使用Yii和Activehighcharts来显示图表。http://www.yiiframework.com/extension/activehighcharts
控制器如下
public function actionChartView(){
$dataProvider=new CActiveDataProvider('ChartData',array(
'criteria'=>array(
'condition'=>'dID=2',
'order'=>'time ASC',
),
'pagination'=>array(
'pageSize'=>50,
),
)
);
$p=$dataProvider->pagination;
$p->setItemCount($dataProvider->getTotalItemCount());
$p->currentPage=$p->pageCount-1;
if(isset($_GET['json']) && $_GET['json'] == 1){
$count = ChartData::model()->count();
for($i=1; $i<=$count; $i++){
$data = ChartData::model()->findByPk($i);
$data->data += rand(-10,10);
$data->save();
}
echo CJSON::encode($dataProvider->getData());
}
else{
$this->render('ChartView',array('dataProvider'=>$dataProvider,));
}
}
以形式查看
$this->Widget('ext.ActiveHighcharts.HighchartsWidget', array(
'dataProvider'=>$dataProvider,
'template'=>'{items}',
'id'=>'Temperature',
'options'=> array(
'title'=>array(
'text'=>'Temperature'
),
'chart'=>array(
"zoomType"=>'x',
),
'xAxis'=>array(
'title' => array('text' => 'Time',),
'categories' => 'time',
'labels' => array(
'rotation' => -90,
'y' => 20,
),
),
'yAxis'=>array(
'title' => array('text' => 'DegC'),
),
'series'=>array(
array(
'type'=>'areaspline',
'name'=>'Temperature', //title of data
'dataResource'=>'data', //data resource according to datebase column
)
),
)
));
我需要用ajax每2分钟更新一次图表。我还需要获取旧数据。
如何处理这些场景。
使用highcharts文档中提供的api方法更新图表中的数据。
请参阅此链接,它将帮助您找到一个好的解决方案。
好的。为了最好地回答你的问题,我会尽量澄清
首先,您需要创建一个视图(一个php文件,其中包含您的highchart代码)
其次,您需要编辑您的控制器(假设为siteController),并创建一个操作来调用刚刚创建的视图。在该操作中,您需要连接并查询数据库。
请参阅以下示例代码:
站点控制器操作:
public function actionAtencionesMensuales() {
$sql = Yii::app()->db->createCommand('
SELECT DISTINCT MONTH(hora) as mes, count(*) as total
FROM visitas
WHERE YEAR(hora)=YEAR(CURDATE())
GROUP BY MONTH(hora)')->queryAll();
$mes = array();
$total = array();
for ($i = 0; $i < sizeof($sql); $i++) {
$mes[] = $sql[$i]["mes"];
$total[] = (int) $sql[$i]["total"];
}
$this->render('my_view', array('mes' => $mes, 'total' => $total));
}
}
在视图中:
<?php
$this->Widget('ext.highcharts.HighchartsWidget', array(
'options' => array(
'exporting' => array('enabled' => true),
'title' => array('text' => 'Mes'),
'theme' => 'grid',
'rangeSelector' => array('selected' => 1),
'xAxis' => array(
'categories' => $mes
),
'yAxis' => array(
'title' => array('text' => 'Cantidad')
),
'series' => array(
array('name' => 'Total', 'data' => $total = array_map('intVal', $total)),
)
)
));
?>
在图表系列中,最好在调用变量时使用:
$total = array_map('intVal', $total)
而不仅仅是:
$total
好运:)
相关文章:
- 标记的实时更新,无需加载页面谷歌地图API V3
- 使用Ajax调用在服务器上实时更新页面
- 实时更新,无需刷新页面
- Dojo dGrid/dStore实时更新
- 如何在页面上进行实时更新
- 从JSON实时更新
- 我希望我的php/html网站上的JavaScript能够实时更新
- 使用php-js-msyql的实时更新消息系统
- 实时更新的持久连接
- Node js redis socket.io pubsub实时更新
- 在OpenCart中,我们如何实时更新数据
- Instagram实时更新没有回应
- 在react组件中使用ajax获取实时更新的数据
- 使用jquery添加和更新列表
- 通过添加值1更新URL
- 如何使用highchart在yii中添加实时更新图表
- 将实时更新传递到条纹结账金额
- JavaScript 从 1 个文本区域实时更新到多个文本区域
- 在 PHP / Javascript 中实时更新时间
- AngularJS将实时收集与REST同步,并获得实时更新