Dynamic Data Of Column With Drilldown Yii Highcharts

yee123 · May 6, 2014, 1:54pm

Hi all,

Currently, I am working on column with drilldown yii highcharts. I have successfully to display the column with drilldown out with static data. However, I want to change to dynamic data. Could anyone guide me on how to change static data into dynamic data?

Here’s my code:




<?php

$this->pageTitle=Yii::app()->name . ' - '.Yii::t('app','Highcharts');

?>

<h1><?php echo Yii::t('app','Highcharts').' Column DrillDown'; ?></h1>

 

<?php

$connection=Yii::app()->db;

$sql="SELECT SUM(duration) AS sum

          FROM venue_timeslot

          WHERE venue='DK'";

$command=$connection->createCommand($sql);

$dataReader=$command->query();	

$row=$dataReader->read();

$data=$row['sum'];       //dynamic data	

 

$level1 = array();

//how to change 28 into dynamic data($data)<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/huh.gif' class='bbc_emoticon' alt='???' />?

$level1[] = array('name' => 'GroupOne', 'y' =>28 (static data), 'drilldown' => 'dd1'); 

$level1[] = array('name' => 'GroupTwo', 'y' => 22, 'drilldown' => 'dd2');

$level1[] = array('name' => 'GroupThree', 'y' => 33, 'drilldown' => 'dd3');

 

$level2 = array();

$level2[] = array('id' => 'dd1', 'data' => array(array('Detail1', 1), array('Detail2', 2), array('Detail3', 4)));

$level2[] = array('id' => 'dd2', 'data' => array(array('Detaila', <img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />, array('Detailb', 9), array('Detailc', 3)));

$level2[] = array('id' => 'dd3', 'data' => array(array('DetailX', 7), array('DetailY', 5), array('DetailZ', 6)));

 

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

        'scripts' => array(

        'modules/drilldown', 

        ),

    'options'=>array(

        'chart' => array('type' => 'column'),

        'title' => array('text' => Yii::t('app','Levels 1 and 2')),

        'subtitle' => array('text' => Yii::t('app','Click the columns to view details.')),

        'xAxis' => array(

		'categories' => array('CTF1 Lecture Theater','CTF1 Seminar Room 1','CTF1 Seminar Room 2')),

        'yAxis' => array('title' => array('text' => Yii::t('app','Vertical legend')),),

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

        'plotOptions' => array (

            'series' => array (

                            'borderWidth' => 0,

                            'dataLabels' => array(

                                'enabled' => true,

                            ),

                        ),

                    ),		

        'series' => array (array(

                        'name' => 'MyData',

                        'colorByPoint' => true,

                        'data' => $level1,

                    )),

        'drilldown' => array(

                        'series' => $level2,

                    ),

    ),

));

 

?>

yee123 · May 7, 2014, 3:14am

Anyone knows how to solve this? please help me~~ thank you…

chandrantwins · May 7, 2014, 8:57am

can you explain with your screenshot… it does not have adequate information.

My assumption

$data=$row[‘sum’]; // its going to be some numeric value but only one number

what value do u want to apply there instead of 28. From where that values should come? from query or where else ?

//how to change 28 into dynamic data($data)?

$level1[] = array(‘name’ => ‘GroupOne’, ‘y’ =>28 (static data), ‘drilldown’ => ‘dd1’);

yee123 · May 8, 2014, 4:17am

Hi, chandran! Thank you so much for your reply. Ya, your assumption is correct. My $data is a numeric value of 28. It comes from the query execution. I wish to change it to variable ($data) instead of fixing it to 28 because the data can be changed from time to time. If the data has changed, the variable ($data) will be change as well and therefore, the data for the graph will be updated. Sorry for my unclear explanation. Hope that you can get what I mean and my intention to change it to dynamic data ($data) instead of fixing it to numeric value.

Here’s my screenshot of my graph.

5532

I can get the graph that I want but I wish to change the data to dynamic data by executing the query instead of fixing it to numeric data. Do you know how to solve this? Thank you.

chandrantwins · May 8, 2014, 8:52am

Hi ,

I can understand your requirement. But i cannot find any difficulty to implement on that

I tried like this

$data=28;

$level1 = array();

$level1[] = array(‘name’ => ‘GroupOne’, ‘y’ =>$data, ‘drilldown’ => ‘dd1’);

print_r($level1);

above prints y is 28

automatically when u refresh the page value changes and automatically new value will be assigned and your graph will change

what else do you need.?

yee123 · May 8, 2014, 2:05pm

Ya, previously I don’t know why the value is not coming out but now is solved.

I have another problem. Why is it the second graph size is smaller than the first graph after I have selected the option from dropdownlist??

Here’s my code:




<p style="margin-left:20px"> Location Followed by Zone :  

<select id="selectMe" style="width:150px">

    <option value="option1">Zone A (CTF1)</option>

    <option value="option2">Zone B (FCSIT)</option>

</select> </p>


<script>

$(document).ready(function () {

    $('.group').hide();

    $('#option1').show();

    $('#selectMe').change(function () {

        $('.group').hide();

        $('#'+$(this).val()).show();

    })

});


</script>

<br>


<fieldset style="margin-left:10px; margin-right:10px; background-color:#FFFFE0">

<div style="margin-left:20px" id='printDocument'>

<?php 

$this->widget('application.extensions.print.printWidget', array(

'cssFile' => 'print.css',

'printedElement'=>'#printDocument',

));?>

&nbsp; Print

</br></br>

 

<div id="option1" class="group"> 

<div style="width:1100px; overflow-x: scroll;">

<?php

$level1 = array();

$level1[] = array('name' => 'CTF1 Lecture Theater', 'y' =>47, 'drilldown' => 'dd1');

$level1[] = array('name' => 'CTF1 Seminar Room1','y' =>0);

$level1[] = array('name' => 'CTF1 Seminar Room2','y' =>0);

$level1[] = array('name' => 'CTF1 Seminar Room3', 'y' => 14, 'drilldown' => 'dd2');

$level1[] = array('name' => 'CTF1 Seminar Room4', 'y' => 6, 'drilldown' => 'dd3');

$level1[] = array('name' => 'CTF1 Seminar Room5', 'y' => 0);

$level1[] = array('name' => 'CTF1 Seminar Room6', 'y' => 0);

 

$level2 = array();

$level2[] = array('id' => 'dd1', 'data' => array(array('SSX0012', 2), array('TMC1014', 4), array('TMC1214/TMC1213', 4),array('TMC1814/TMC1813', 4), array('TMC2034/TMC2033', 4),

                                           array('TME2073', 3), array('TMP3113', 3), array('TMC1414', 4), array('TMP2634', 4),

										   array('TMN2073', 3), array('TMT2013', 4), array('TMN2073*', 3),array('TMC3012', 2), array('TMC3613', 3)));

$level2[] = array('id' => 'dd2', 'data' => array(array('TMC1413', 4), array('TMI2053', 3), array('TMS2153', 3), array('TMC1013', 4)));

$level2[] = array('id' => 'dd3', 'data' => array(array('TMC1434/TMC1433', 1), array('TMN3033', 3), array('TMT4053', 2)));

 

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

        'scripts' => array(

        'modules/drilldown', // in fact, this is mandatory <img src='http://www.yiiframework.com/forum/public/style_emoticons/default/smile.gif' class='bbc_emoticon' alt=':)' />

        ),

    'options'=>array(

        'chart' => array('type' => 'column'),

        'title' => array('text' => Yii::t('app','Venue Against Total No. Of Hours Used According To Zone')),

        'subtitle' => array('text' => Yii::t('app','Click the columns to view more details.')),

        'xAxis' => array('type' => 'category'),

        'yAxis' => array('title' => array('text' => Yii::t('app','Total No. of Hours Used')),),

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

        'plotOptions' => array (

            'series' => array (

                            'borderWidth' => 0,

                            'dataLabels' => array(

                                'enabled' => true,

                            ),

                        ),

                    ),

        'series' => array (array(

                        'name' => 'Total No. Of Hours Used',

                        'colorByPoint' => true,

                        'data' => $level1,

                    )),

        'drilldown' => array(

            'series' => $level2,

                    ),

    ),

));

 

?>

</div></div>


<div id="option2" class="group"> 

<div style="width:1100px; overflow-x: scroll;">

<?php

$level1 = array();

$level1[] = array('name' => 'FCSIT Teater Multimedia', 'y' =>35, 'drilldown' => 'dd1');

$level1[] = array('name' => 'FCSIT Tutorial Room1','y' =>0);

$level1[] = array('name' => 'FCSIT Tutorial Room2','y' =>0);

$level1[] = array('name' => 'FCSIT Tutorial Room3','y' =>0);

$level1[] = array('name' => 'FCSIT Tutorial Room4', 'y' => 4, 'drilldown' => 'dd2');

$level1[] = array('name' => 'FCSIT Tutorial Room5', 'y' => 11, 'drilldown' => 'dd3');

$level1[] = array('name' => 'FCSIT Tutorial Room6', 'y' => 11, 'drilldown' => 'dd4');

$level1[] = array('name' => 'FCSIT Tutorial Room7', 'y' => 10, 'drilldown' => 'dd5');

$level1[] = array('name' => 'FCSIT Tutorial Room8', 'y' => 11, 'drilldown' => 'dd6');

$level1[] = array('name' => 'FCSIT Tutorial Room9', 'y' => 2, 'drilldown' => 'dd7');

$level1[] = array('name' => 'FCSIT Tutorial Room10', 'y' => 0);

 

$level2 = array();

$level2[] = array('id' => 'dd1', 'data' => array(array('TMC1434/TMC1433', 2), array('TMC1874', 4), array('TMC2413', 3),array('TMI3053*', 3),array('TMN3053', 3), 

                                           array('TMP3213', 3), array('TMP3413', 3), array('TMS3053', 4), array('TMI3053*', 3),

										   array('TMC4013', 3), array('TMN4013', 1), array('TMP4913', 1),array('TMP4935', 1), array('TMT4053', 1)));

$level2[] = array('id' => 'dd2', 'data' => array(array('TMS4013', 3), array('TMI4013', 1)));

$level2[] = array('id' => 'dd3', 'data' => array(array('TME2093', 2), array('TMT3073', 2), array('TMN4033', 3),array('TMS3033', 2), array('TMN4013', 2)));

$level2[] = array('id' => 'dd4', 'data' => array(array('TMC1234/TMC1233', 2), array('TMC1254/TMC1253', 3), array('TMX2012', 2),array('TMS3033', 1),array('TME4013', 3)));

$level2[] = array('id' => 'dd5', 'data' => array(array('TMC1833', 3), array('TMS3093', 3), array('TMT3053', 2),array('TMI4013', 2)));

$level2[] = array('id' => 'dd6', 'data' => array(array('TMT2033', 2), array('TMI2073', 3), array('TMN2093', 3),array('TME2113', 3)));

$level2[] = array('id' => 'dd7', 'data' => array(array('TMC1234/TMC1233', 2)));

 

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

        'scripts' => array(

        'modules/drilldown', // in fact, this is mandatory <img src='http://www.yiiframework.com/forum/public/style_emoticons/default/smile.gif' class='bbc_emoticon' alt=':)' />

        ),

    'options'=>array(

        'chart' => array('type' => 'column'),

        'title' => array('text' => Yii::t('app','Venue Against Total No. Of Hours Used According To Zone')),

        'subtitle' => array('text' => Yii::t('app','Click the columns to view details.')),

        'xAxis' => array('type' => 'category'),

        'yAxis' => array('title' => array('text' => Yii::t('app','Total No. of Hours Used')),),

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

        'plotOptions' => array (

            'series' => array (

                            'borderWidth' => 0,

                            'dataLabels' => array(

                                'enabled' => true,

                            ),

                        ),

                    ),

        'series' => array (array(

                        'name' => 'Total No. Of Hours Used',

                        'colorByPoint' => true,

                        'data' => $level1,

                    )),

        'drilldown' => array(

            'series' => $level2,

                    ),

    ),

));

 

?>

</div></div>

</div>

</fieldset>

the first option of graph 5538

is okay but the second option of graph is out of size. Is there anything that I missed out?

fr0d0z · May 9, 2014, 12:01am

One comment re: doing the data that way. It’s worth using floatval() to make sure things come out right. Take a look at how I’m doing it in the ActiveHighstock widget here:

github.com

miloschuman/yii-highcharts/blob/master/highcharts/ActiveHighstockWidget.php#L210-213


 * @param $row
 * @param $batch
 * @return array
 */
protected function processMysqlTimestamp($row, $batch)
{
    return 1000 * floatval($row[$batch['time']]);
}


/**
 * Sorts our date series so we have all the dates from first to last
 *
 * @param $series
 */
protected function sortDateSeries(&$series)
{
    $dates = array();


    //sort by first column (dates ascending order)
    foreach ($series as $key => $row) {
        $dates[$key] = $row[0];

chandrantwins · May 9, 2014, 8:13am

$(document).ready(function () {

&#036;('.group').hide();


&#036;('#option1').show();


&#036;('#selectMe').change(function () {


    &#036;('.group').hide();


    &#036;('#'+&#036;(this).val()).show();


})

});

you have .group class for both div… but it wont work for both… i hope u know that… i think this is the problem