如何从mysql数据库中提取数据并使用yii-framework将它们绘制在highcharts中

时间:2013-06-12 08:45:17

标签: mysql yii highcharts

mysql数据库有三个元素,id,datetime和data。

请帮我查一下我的代码有什么问题。我想从mysql数据库中提取最新的15个数据,并将它们绘制在highcharts中。但是,我只能在我的x轴旁边的图表上显示最新的单个数据,但没有显示日期时间数据。

我尝试在网络上提供代码http://www.highcharts.com/demo/line-basic但是它仅用于预定义值而不用于mysql数据库值。

我试图编辑它,下面是我的代码。

<script scr = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='http://code.highcharts.com/highcharts.js' type='text/javascript'> </script>       
<script src='http://code.highcharts.com/modules/exporting.js' type='text/javascript'> </script>    

</head>
<?php
$rowsA = array();
$rowsA[]= Yii::app()->db->createCommand("Select data from customername order by id desc limit 15")->queryScalar();
$datedata[] = Yii::app()->db->createCommand("Select date from customername order by id desc limit 15")->queryScalar();
>
<script type = "text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
        type: 'line',
        marginRight: 130,
        marginBottom: 25
    },
        title: {
            text: 'BABY BODY TEMPERATURE',
            x: -20 
        },

        xAxis: {

       // type: 'datetime',
       // dateTimeLabelFormats:{
        //   month: '%e, %b',
          //  year: '%b'}//can work
     //  categories: ['<php echo join($datedata, "','") ?>'],
     // categories: [<php  echo join($datedata, "','"); ?>],
        //  },

        },
        yAxis: {
            title: {
            text: 'Temperature (°C)'
            },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C',

    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
    },
    series: [{
        name: 'Baby Temperature',
        data: [<?php echo join($rowsA, "','");?>]


        //predefined data is working fine.
       // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
 });
});

</script>

我想在我能够提取mysql数据并在高位图中为x轴绘制数字形式1,2,3,....然后我将尝试在x轴上显示日期时间。然而,我被困在第一阶段;只能显示单个最新数据,而我想要的是15个数据。

如果有人能帮助我,我将非常感激。非常感谢。

1 个答案:

答案 0 :(得分:0)

永远不要在您的视图文件中查询。在模型中创建getter或在控制器中查询并传递数据以进行查看。 对于x-label表单数组的日期。例如,我最近30天的表格数组:

        $output = array();
        for($i = 30; $i >=0 ; $i--)
        $output[] = date("Y-m-d", strtotime('-'. $i .' days'));
        return $output;

这将是我们的x标签。然后在模型或控制器中获取数据:

$criteria=new CDbCriteria;
        $criteria->limit=15;
        $criteria->order='id DESC';
$data=new CActiveDataProvider(, array('customername'
            'criteria'=>$criteria,
        ));

现在从数据中为您的数组创建数组。 Yii-highcharts是很好的扩展,可以帮助很多。 然后把它推到你的情节:

'xAxis'=>array(
                'categories'=> $xlabels, 
                'gridLineWidth' => 1,
                'gridLineDashStyle' => 'LongDash',
                'tickmarkPlacement' => 'on',
                'tickInterval' => 6
                    ),

'series'=> array(

            array('name'=> 'Failed records',
                'data'=> $data_array,
                'color' => '#ff0000',
                'shadow'=> false
            ),

在javascript中使用yii-highcharts或echo php变量:

var xlabels="<?php echo $xlabels?>";

然后在你的情节中使用它:

xAxis:{
                categories: xlabels, 
                gridLineWidth : 1,
                gridLineDashStyle : 'LongDash',
                tickmarkPlacement : 'on',
                tickInterval : 6
                    },