Yii Highcharts Problem

yee123 · April 20, 2014, 2:04pm

Hi. I have a problem here regarding Yii Highcharts. I have used this Yii Highcharts to dislay data in a column bar graph. I have a dropdown list for the user to choose.

I got a normal graph that fits well to my view page ([color="#FF0000"]as shown in graph.png[/color]) but however, when I select for the second choice, the graph becomes smaller than the usual one ([color="#FF0000"]as shown in graph1.png[/color]).

I have tried to adjust it by many ways but it doesn’t seems to work. Any idea how to solve it??? Thanks in advance.

Here is my code:




<div style="margin-left:10px"><h3>Course Statistic of Venue Optimization</h3></div><br>


<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

$data =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="DK"', 'zone="zone a"'))    

            ->queryColumn();	


$data1 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="BS1"', 'zone="zone a"'))    

            ->queryColumn();


$data2 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="BS2"', 'zone="zone a"'))    

            ->queryColumn();			

			

$data3 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="BS3"', 'zone="zone a"'))    

            ->queryColumn();


$data4 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="BS4"', 'zone="zone a"'))    

            ->queryColumn();	


$data5 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="BS5"', 'zone="zone a"'))    

            ->queryColumn();	


$data6 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="BS6"', 'zone="zone a"'))    

            ->queryColumn();				

			

$data=array_map('intVal', $data);

$data1=array_map('intVal', $data1);

$data2=array_map('intVal', $data2);

$data3=array_map('intVal', $data3);

$data4=array_map('intVal', $data4);

$data5=array_map('intVal', $data5);

$data6=array_map('intVal', $data6);




// $value=var_dump($data2);		

 // echo print_r($xAxis);			

			

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

        'options' =>array(  	

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

            'title' => array('text' => 'Venue Against Total No. Of Hours According To Zone'),

            'xAxis' => array(

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

				                      'CTF1 Seminar Room 5','CTF1 Seminar Room 6'),                  

            ),

            'yAxis' => array(

                'title' => array('text' => 'Total No. Of Hours'),    				

            ),

            'series' => array(

			    array('name'   => 'Total No. of Hours',

				'data'   => [$data,$data1,$data2,$data3,$data4,$data5,$data6],

                ),

			)

        )        

));

?>

</div></div>


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

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

<?php

$data3 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TMM"', 'zone="zone b"'))    

            ->queryColumn();	


$data4 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TR1"', 'zone="zone b"'))    

            ->queryColumn();


$data5 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TR2"', 'zone="zone b"'))    

            ->queryColumn();


$data6 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TR3"', 'zone="zone b"'))    

            ->queryColumn();


$data7 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TR4"', 'zone="zone b"'))    

            ->queryColumn();


$data8 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TR5"', 'zone="zone b"'))    

            ->queryColumn();


$data9 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TR6"', 'zone="zone b"'))    

            ->queryColumn();

			

$data10 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TR7"', 'zone="zone b"'))    

            ->queryColumn();

			

$data11 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TR8"', 'zone="zone b"'))    

            ->queryColumn();


$data12 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TR9"', 'zone="zone b"'))    

            ->queryColumn();


$data13 =  Yii::app()->db->createCommand()

            ->select('SUM(duration)')

            ->from('venue_timeslot')

            ->where(array('and', 'venue="TR10"', 'zone="zone b"'))    

            ->queryColumn();		

			

$data3=array_map('intVal', $data3);

$data4=array_map('intVal', $data4);

$data5=array_map('intVal', $data5);

$data6=array_map('intVal', $data6);

$data7=array_map('intVal', $data7);

$data8=array_map('intVal', $data8);

$data9=array_map('intVal', $data9);

$data10=array_map('intVal', $data10);

$data11=array_map('intVal', $data11);

$data12=array_map('intVal', $data12);

$data13=array_map('intVal', $data13);


// $value=var_dump($data2);		

 // echo print_r($xAxis);			

			

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

        'options' =>array(  	

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

            'title' => array('text' => 'Venue Against Total No. Of Hours According To Zone'),

            'xAxis' => array(

                'categories' => array('FCSIT Teater Multimedia','FCSIT Tutorial Room1','FCSIT Tutorial Room2','FCSIT Tutorial Room3','FCSIT Tutorial Room4',

				                      'FCSIT Tutorial Room5','FCSIT Tutorial Room6','FCSIT Tutorial Room7','FCSIT Tutorial Room8','FCSIT Tutorial Room9','FCSIT Tutorial Room10'),                  

            ),

            'yAxis' => array(

                'title' => array('text' => 'Total No. Of Hours'), 				

            ),

            'series' => array(

			    array('name'   => 'Total No. of Hours',

				'data'   => [$data3,$data4,$data5,$data6,$data7,$data8,$data9,$data10,$data11,$data12,$data13],

                ),

			)

        )        

));

?>

</div></div></div>

</fieldset>


5465

[![graph.png](https://www.forum.yiiframework.com/ipb_uploads/monthly_04_2014/post-222759-071650600%201398002473.png)](https://www.forum.yiiframework.com/ipb_uploads/monthly_04_2014/post-222759-071650600%201398002473.png)


5466

[![graph1.png](https://www.forum.yiiframework.com/ipb_uploads/monthly_04_2014/post-222759-092100800%201398002486.png)](https://www.forum.yiiframework.com/ipb_uploads/monthly_04_2014/post-222759-092100800%201398002486.png)

skworden · April 20, 2014, 2:36pm

i had the same problem with the pie chart. I had to set the width to 100% for the highcharts container.

yee123 · April 20, 2014, 3:16pm

Hi, skworden! I have set the width to 1100px with the x-axis scroll bar for the highcharts container.




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

But, I still get the same size of the graph (as shown in graph1.png). I have no idea why the graph doesn’t same with the first graph (as shown in graph.png).

Does anyone knows how to solve this???

skworden · April 21, 2014, 2:05am

setting the wrapping div to 1100px will do nothing for it.

You need to get the actual div class or id of the highchart bar graph container and set the width to 100% which in turn will set it to 1100px because of the div that is wrapping around the highchart that you set above.




#id_of_the_highcahrt_wrapper {

width:100% !important;

}


or


.calss_of_the_highchart_wrapper {

width:100% !important;

}

yee123 · April 22, 2014, 1:31pm

skworden:

setting the wrapping div to 1100px will do nothing for it.

You need to get the actual div class or id of the highchart bar graph container and set the width to 100% which in turn will set it to 1100px because of the div that is wrapping around the highchart that you set above.
#id_of_the_highcahrt_wrapper {

width:100% !important;

}


or


.calss_of_the_highchart_wrapper {

width:100% !important;

}

I’m sorry that I’m still a bit blur. How am I going to get actual div class or add id of the highchart bar graph container into my code above?? Can you guide me in more detail on this? Thanks in advance.

yee123 · May 7, 2014, 7:13am

skworden:

setting the wrapping div to 1100px will do nothing for it.

You need to get the actual div class or id of the highchart bar graph container and set the width to 100% which in turn will set it to 1100px because of the div that is wrapping around the highchart that you set above.
#id_of_the_highcahrt_wrapper {

width:100% !important;

}


or


.calss_of_the_highchart_wrapper {

width:100% !important;

}

how to set 100% for the actual div class or id of the highchart bar graph container??? can you show me in more detail?

a_addict · May 8, 2014, 4:04pm

Try using Inspect Element feature from Firefox or Chrome and see the CSS files applied to the div and make the changes as needed to those files.

skworden · May 8, 2014, 6:27pm

If in firefox right click on an element and select inspect element

you could try adding the following to your css file




.highcharts-container{

	min-width: 100% !important;

	width:100% !important;

   max-width:100% !important;

}

alternativly you could add the following to your view file at the top. however this is not recommended for a few reason one of them being you will have to put it in every view file with a chart/graph




<style type="text/css">

.highcharts-container{

	min-width: 100% !important;

	width:100% !important;

   max-width:100% !important;

}	

</style>

if those don’t work you will have to get your elements id / class like mentioned above in previous post.