Using yii with dynamic data and highcharts

Question

Hi everybody thanks for reading i was wandering how you can insert dynamic data into the highcharts extension for example i have the highcharts extension as follows (location of code =>Reprting/index):

$this->Widget('ext.highcharts.HighchartsWidget', array(

   'options'=>array(

       'credits' => array('enabled' => false),
      'title' => array('text' => $graphTitle),
      'xAxis' => array(
         'categories' => array('Apples', 'Bananas', 'Oranges')
      ),

      'yAxis' => array(
         'title' => array('text' => 'Fruit eaten')
      ),
      'series' => array(
         array('name' => 'Jane', 'data' => array(3, 6, 7)),
         array('name' => 'John', 'data' => array(5, 7, 3))
      )   )));

And i have the following code in the controller :

public function actionIndex()
{
        $model= $this->loadModel();
    $dataProvider=new CActiveDataProvider('Reporting');
        $graphTitle= 'Price Per Product';
    $this->render('index',array(
    'dataProvider'=>$dataProvider, 'graphTitle'=>$graphTitle, 'model'=>$model,
    ));
}

And the following code is the model :

class Reporting extends CActiveRecord
{

    public static function model($className=__CLASS__)
    {
        return parent::model($className);
    }

    /**
     * @return string the associated database table name
     */
    public function tableName()
    {
        return '{{price}}';
    }

    /**
     * @return array validation rules for model attributes.
     */
    public function rules()
    {
        // NOTE: you should only define rules for those attributes that
        // will receive user inputs.
        return array(
            array('id_product, id_channel', 'required'),
            array('id_product, id_channel', 'numerical', 'integerOnly'=>true),
            array('price_min, price_max', 'numerical'),
            // The following rule is used by search().
            // Please remove those attributes that should not be searched.
            array('id_price, id_product, id_channel, price_min, price_max', 'safe', 'on'=>'search'),
        );
    }

    /**
     * @return array relational rules.
     */
    public function relations()
    {
        // NOTE: you may need to adjust the relation name and the related
        // class name for the relations automatically generated below.
        return array(
            'idChannel' => array(self::BELONGS_TO, 'Channel', 'id_channel'),
            'idProduct' => array(self::BELONGS_TO, 'Product', 'id_product'),
        );
    }


    public function attributeLabels()
    {
        return array(
            'id_price' => __('Id Price'),
            'id_product' => __('Id Product'),
            'id_channel' => __('Id Channel'),
            'price_min' => __('Price Min'),
            'price_max' => __('Price Max'),
        );
    }


    public function search()
    {


        $criteria=new CDbCriteria;

        $criteria->compare('id_price',$this->id_price);
        $criteria->compare('id_product',$this->id_product);
        $criteria->compare('id_channel',$this->id_channel);
        $criteria->compare('price_min',$this->price_min);
        $criteria->compare('price_max',$this->price_max);

        return new CActiveDataProvider($this, array(
            'criteria'=>$criteria,
        ));
    }
}

How do i put this all together to achieve a dynamically driven graph

sucotronic · Accepted Answer · 2012-05-30 14:22:07Z

2

One sample for you:

<?php
    $xAxis = array(1,2,3);
    $yAxis = array(4,5,6);
    $this->Widget('ext.highcharts.HighchartsWidget',
        array(
            'id' => 'something',
            'options'=> array(
                'chart' => array(
                    'defaultSeriesType' => 'bar',
                    'style' => array(
                        'fontFamily' => 'Verdana, Arial, Helvetica, sans-serif',
                    ),
                ),
                'title' => array(
                    'text' => 'title',
                ),
                'xAxis' => array(
                    'title' => array(
                        'text' => 'xTitle,
                    ),
                    'categories' => $xAxis,
                    'labels' => array(
                        'step'     => 1,
                        'rotation' => 0,
                        'y'        => 20,
                    ),
                ),
                'yAxis' => array(
                    'title' => array(
                        'text' => 'yTitle,
                    ),
                ),
                'series' => array(
                    array(
                        'name'   => 'seriesName',
                        'data'   => $yAxis,
                        'shadow' => false,
                    )
                )
            )
        )
    );
    ?>

To customize it, you'll have to build your own $yAxis, $xAxis arrays, and modify title and settings. For more info, take a look at the official Highcharts doc.

answered May 30, 2012 at 14:22

sucotronic

1,5049 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gunnit Over a year ago

thanks for the inspiration , useful but i was wandering how to store variables in a query and then display them on the graph

sucotronic Over a year ago

You're welcome. My suggestion is to use a 'findAll' static method of Reporting class to retrieve all your objects (given the fact that you're not applying any restriction on the CActiveDataProvider), and build the two arrays in the controller, iterating over the results. The HighchartsWidget doesn't support to read data from a 'dataProvider'.

Collectives™ on Stack Overflow

Using yii with dynamic data and highcharts

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related