public function column_drilldown()
{
$categories = array('MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera');
$colors = array('#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE');
// custom list of colours
// notice that we set 'renderTo' variable in this case because we want to do some dynamic stuff with it in drilldown JS function
$renderTo = 'column_drilldown';
$chartData = array(array('y' => 55.11, 'color' => $colors[0], 'drilldown' => array('name' => 'MSIE Versions', 'categories' => array('MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'), 'data' => array(10.85, 7.35, 33.06, 2.81), 'color' => $colors[0])), array('y' => 21.63, 'color' => $colors[1], 'drilldown' => array('name' => 'Firefox Versions', 'categories' => array('Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'), 'data' => array(0.2, 0.83, 1.58, 13.12, 5.43), 'color' => $colors[1])), array('y' => 11.94, 'color' => $colors[2], 'drilldown' => array('name' => 'Chrome Versions', 'categories' => array('Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'), 'data' => array(0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.5, 0.22), 'color' => $colors[2])), array('y' => 7.15, 'color' => $colors[3], 'drilldown' => array('name' => 'Safari Versions', 'categories' => array('Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari-Maxthon', 'Safari 3.1', 'Safari 4.1'), 'data' => array(4.55, 1.42, 0.23, 0.21, 0.2, 0.19, 0.14), 'color' => $colors[3])), array('y' => 2.14, 'color' => $colors[4], 'drilldown' => array('name' => 'Opera Versions', 'categories' => array('Opera 9.x', 'Opera 10.x', 'Opera 11.x'), 'data' => array(0.12, 0.37, 1.65), 'color' => $colors[4])));
$chartName = 'Browser Brands';
// anonymous Callback function to format the text of the tooltip
$tooltipFormatFunction = <<<EOF
function(){var point = this.point,s = this.x +':<b>'+ this.y +'% market share</b><br/>';if (point.drilldown) {s += 'Click to view '+ point.category +' versions';} else{s += 'Click to return to browser brands';}return s;}
EOF;
$pointEventsClick = <<<EOF
function(){var drilldown = this.drilldown; if(drilldown){setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);} else { setChart( {$renderTo}.options.series[0].name, {$renderTo}.xAxis[0].options.categories, {$renderTo}.options.series[0].data);}}
EOF;
$dataLabelsFormatter = <<<EOF
function(){return this.y +'%'; }
EOF;
$mychart = $this->HighCharts->create($chartName, 'column');
$this->HighCharts->setChartParams($chartName, array('renderTo' => $renderTo, 'chartWidth' => 1000, 'chartHeight' => 750, 'chartMarginRight' => 10, 'chartBackgroundColorLinearGradient' => array(0, 0, 0, 300), 'chartBackgroundColorStops' => array(array(0, 'rgb(217, 217, 217)'), array(1, 'rgb(255, 255, 255)')), 'title' => 'Browser market share, April, 2011', 'subtitle' => 'Click the columns to view versions. Click again to view brands.', 'plotOptionsColumnCursor' => 'pointer', 'plotOptionsColumnPointEventsClick' => $pointEventsClick, 'plotOptionsColumnDataLabelsEnabled' => TRUE, 'plotOptionsColumnDataLabelsColor' => $colors[0], 'plotOptionsColumnDataLabelsFormatter' => $dataLabelsFormatter, 'legendEnabled' => TRUE, 'exportingEnabled' => FALSE, 'creditsEnabled' => FALSE, 'tooltipEnabled' => TRUE, 'tooltipBackgroundColorLinearGradient' => array(0, 0, 0, 60), 'tooltipBackgroundColorStops' => array(array(0, '#FFFFFF'), array(1, '#E0E0E0')), 'tooltipEnabled' => TRUE, 'tooltipFormatter' => $tooltipFormatFunction, 'xAxisCategories' => $categories, 'yAxisTitleText' => 'Total percent market share'));
$series = $this->HighCharts->addChartSeries();
$series->addName($chartName)->addData($chartData)->addColor('white');
$mychart->addSeries($series);
}
public function grouped_column()
{
$chartName = 'Stacked Grouped Column Chart';
$mychart = $this->HighCharts->create($chartName, 'column');
$this->HighCharts->setChartParams($chartName, array('renderTo' => 'columnwrapper', 'chartWidth' => 1000, 'chartHeight' => 750, 'chartBackgroundColorLinearGradient' => array(0, 0, 0, 300), 'chartBackgroundColorStops' => array(array(0, 'rgb(217, 217, 217)'), array(1, 'rgb(255, 255, 255)')), 'title' => 'Total fruit consumtion, grouped by gender', 'subtitle' => 'Source: World Bank', 'xAxisLabelsEnabled' => TRUE, 'xAxisCategories' => array('Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'), 'yAxisTitleText' => 'Number of Fruits', 'enableAutoStep' => FALSE, 'creditsEnabled' => FALSE, 'plotOptionsSeriesStacking' => 'normal'));
$johnSeries = $this->HighCharts->addChartSeries();
$janeSeries = $this->HighCharts->addChartSeries();
$joeSeries = $this->HighCharts->addChartSeries();
$jillSeries = $this->HighCharts->addChartSeries();
$johnSeries->addName('John')->addData($this->johnData)->stack = 'male';
$janeSeries->addName('Jane')->addData($this->janeData)->stack = 'female';
$joeSeries->addName('Joe')->addData($this->joeData)->stack = 'male';
$jillSeries->addName('Jill')->addData($this->jillData)->stack = 'female';
$mychart->addSeries($johnSeries);
$mychart->addSeries($janeSeries);
$mychart->addSeries($joeSeries);
$mychart->addSeries($jillSeries);
}
