Refresh Highchats

Hi, i’m trying to set user-friendly statistics using Highcharts.

When enter the form, i set a graph with datas corresponding of the actual year, but i want that the user choose another period if he wants.

I dont see what exactly how i can refresh the chart.

Here is my code




<h3>Fréquentation</h3>

<br>

<h4>Choix de la période:   

<?php

                // sélection mois

                Yii::app()->user->setState('mois',$model->mois);

                echo CHtml::DropDownList('mois', Yii::app()->user->getState('mois') , array('00' => 'Toute l\'année','01'=>'Janvier', '02'=>'Février', '03'=>'Mars', '04'=>'Avril', '05'=>'Mai', '06'=>'Juin', 

                                                                                                '07'=>'Juillet', '08'=>'Août', '09'=>'Septembre', '10'=>'Octobre', '11'=>'Novembre', '12'=>'Décembre'),

        array(

            'ajax'=>array(

               'type' => 'POST',

               'url' => Yii::app()->createUrl('activities/majMois'),

               'data'=>"js:{mois: $(this).val()}",

                )

        )

                );


                // sélection année

                $listAnnee = CHtml::listData(Activities::model()->findAllBySql('SELECT generate_series as annee FROM generate_series(2008,' . $model->annee .')'),'annee','annee');

                Yii::app()->user->setState('annee',$model->annee);

                echo CHtml::DropDownList('annee', Yii::app()->user->getState('annee') , $listAnnee,

        array(

            'ajax'=>array(

               'type' => 'POST',

               'url' => Yii::app()->createUrl('activities/majAnnee'),

               'data'=>"js:{annee: $(this).val()}",

                )

        ));


                // ajaxlink pour rafraichir le graphique

                echo CHtml::ajaxLink("Rafraîchir le graphique",

                $this->createUrl('rafraichirFrequentation'),

                array(

                "type" => "post",   // POST donc.

                'update' => '#container3',

                'success' => "js:function() 

                                {

....

///////////////// HERE IS WHAT I MISS /////////////////

....

                        }"

                ));




// affichage FREQUENTATION

$this->widget('ext.highcharts.highchartsWidget',array(

        'options' => array(

                'chart' => array(

                                        'renderTo'=>'container3',

                    'defaultSeriesType' => 'column',

                    'style' => array(

                        'fontFamily' => 'Verdana, Arial, Helvetica, sans-serif',

                    ),

                ),

                                'title' => array('text'=>($model->mois == '00')? 'Fréquentation année ' .  $model->annee : 'Fréquentation année ' .  $model->annee . ' mois ' . $model->mois),

                                'credits' => array('enabled' => false),

                                'xAxis' => array(

                                        'categories' => ($model->mois == '00')? $listeDesMois : $listeDesJours,

                                        'dateTimeLabelFormats' => array(

                                                'day'=> '%e. %b',

                                                'month'=> '%b \'%y',

                                                'year' => '%Y'

                                        )

                ),

                                'yAxis' => array(

                                        'tittle' => 'Nombre de visites',

                ),

                'plotOptions' => array(

                    'series' => array(

                                        'dataLabels' => array(

                                            'enabled' => true,

                                                        'formatter' => 'js:function() {

                                                          return this.y;

                                                        }'

                                                ),

                                        ),

                        'column' => array(

                            'pointPadding' => 0.2,

                        'borderWidth' => 0

                        ),

                ),

                'series' => array(

                                        array(

                        'type' => 'column',

                        'data' =>       $frequentation,

                        'showInLegend' => false, // la légende n'a d'intérêt que si on a plusieurs séries dans le même graphique

                                        ),

                )

        )

));


echo '<div id="container3"></div>';

?>



In the controller, i just update the 3 vars i used in the chart ($listeDesMois, $listeDesJours and frequentation).

Thanks for helping me.

Highcharts have some methods for dynamically changing it’s data for example you can update series data by setData method




eg:

  chart.series[0].setData(data);




or you can change categories by using "setCategories" method

read Highcharts API (Methods and properties For dynamically modifying the chart section) for complete details

  1. create a method in controller

2)call some action and call that method

3)redraw chart with new value

i did like this

In View…

<script type="text/javascript">

window.onload = function ()   // as to make sure it graph as page loads


{


    &#036;.ajax({


       'success': function(data) {


             getSAMGraph(data);


        },


        'type': 'POST',


        'data': &#036;(this).serialize(),


        'url': ' &lt;?php echo &#036;this-&gt;createUrl(&quot;/mycontroller/getData&quot;) ?&gt; '  


    });


  


};

var chart;

function getSAMGraph(data)

{

 &#036;('#sam_all').highcharts({


        chart: {


            type: 'bubble',


            backgroundColor: 'transparent',


            


            plotBorderWidth: null


         


        },


        title: {


            text: 'SAM Plot'


        },


        subtitle: {


            text: 'Self Assessment Emotional Response to Visuals '


        },


        xAxis: {


            title: {


                enabled: false,


                text: ''


            },


            min: 1,


            max: 9,


            showFirstLabel: true,


            showLastLabel: true,


            startOnTick: true,


            tickInterval:1


        },


        yAxis: {


            title: {


                enabled: false,


                text: ''


            },


            min: 1,


            max: 9,


            showFirstLabel: true,


            showLastLabel: true,


            startOnTick: true,


            tickInterval:1


        },


        series:eval(&quot;(&quot; + data + &quot;)&quot;)


    });





}

</script>

Thanks both of you for the help, now it works!