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

Answer 1

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.