i am working on a PHP project build in CodeIgniter framework. This application holds many graphs that are dynamically created. I had a great success working with the ronan-gloo highcharts library . Below is the code that generates my graphs...
$this -> load -> library ( 'Highchart' );
$chart = new Highchart ( );
$chart -> chart -> renderTo = "divid";
$chart -> title -> text = "chart Title";
$chart -> xAxis -> categories = $xaxis;
$chart -> tooltip -> formatter = new HighchartJsExpr ( "function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y;
} else {
s = '<b>'+ this.series.name +'</b><br/><i>' + this.x +'</i>: <b>'+ this.y + '%</b>';
}
return s; }" );
$chart -> series [ ] = array (
'type' => "column" ,
'name' => "%age" ,
'data' => $yaxis ,
'color' => '#CC004B' ,
'showInLegend' => TRUE ,
'dataLabels' => array (
'enabled' => TRUE ,
'color' => '#CC004B' ,
'style' => array (
'fontSize' => '10px' ,
'verticalalign' => 'bottom'
)
)
);
foreach ( $chart->getScripts() as $script ) {
echo '<script type="text/javascript" src="' . $script . '"></script>';
}
echo "<script src='" . base_url ( ) . "assets/js/jquery.cookie.js'></script>";
echo "<script type='text/javascript' src='" . base_url ( ) . "assets/highcharts/js/exporting.js'></script>";
echo "<div id='divid'></div>";
echo "<script type='text/javascript'>" . $chart -> render ( "chart1" ) . "</script>";
this is helping me to a greater extend to create graphs, however, Highcharts has a great drill down functionality ( High Charts Drilldown demo ) which i would wish to implement in my project.
The demo suggest creating javascript objects that holds the drilldown data ( JS Fiddle ) which is called to create a chart. but how could i do it in PHP Codeigniter when the javascript is written on the fly...
Please help!
I was able to manage with the above question. Below is the code that i have used...
$this -> load -> library ( 'Highchart' );
$chart = new Highchart ( );
$chart -> chart -> renderTo = "chartcontainer";
$chart -> title -> text = "Chart Title";
$chart -> chart -> type = "column";
$chart -> subtitle -> text = "Click the columns to view Drilldown. Click again to view main chart.";
$chart -> xAxis -> categories = $xaxis;
$chart -> yAxis -> title -> text = "%age";
$chart -> chart -> plotShadow = TRUE;
$chart -> chart -> plotBorderWidth = 1;
$chart -> chart -> plotBackgroundColor = "#F0F0F0";
$pcolumn = $chart -> plotOptions -> column;
$pcolumn -> cursor = "pointer";
$xaxisjson = json_encode ( $xaxis );
$pcolumn -> point -> events -> click = new HighchartJsExpr ( "function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, '#FA7070');
} else { // restore
setChart('Repeat %age', $xaxisjson, $drilldowndata);
}
function setChart(name, categories, data, color) {
chart2.xAxis[0].setCategories(categories, false);
chart2.series[0].remove(false);
chart2.addSeries({
name: name,
data: data,
color: color || '#7070FA'
}, false);
chart2.redraw();
}
}" );
$pcolumn -> dataLabels = array (
"enabled" => true ,
"style" => array ( "fontWeight" => "bold" ) ,
"formatter" => new HighchartJsExpr ( "function() {
return this.y +'%';
}" )
);
$chart -> tooltip -> formatter = new HighchartJsExpr ( "function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'%</b> Repeat E-Mails<br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +'\'s drilldown data';
} else {
s += 'Click to return to main graph';
}
return s;
}" );
$chart -> series [ ] = array (
"name" => "Series Name" ,
"data" => $drilldowndata [ "data" ]
);
foreach ( $chart->getScripts() as $script ) {
echo '<script type="text/javascript" src="' . $script . '"></script>';
}
echo "<script src='" . base_url ( ) . "assets/js/jquery.cookie.js'></script>";
echo "<script type='text/javascript' src='" . base_url ( ) . "assets/highcharts/js/exporting.js'></script>";
echo "<div id='chartcontainer'></div>";
echo "<script type='text/javascript'>" . $chart -> render ( "chart2" ) . "</script>";
and the array $drilldown is in the below format:
Array
(
[data] => Array
(
[0] => Array
(
[y] => 18.5
[drilldown] => Array
(
[name] => Category0
[categories] => Array
(
[0] => 01-Jul
[1] => 02-Jul
[2] => 03-Jul
)
[data] => Array
(
[0] => 27
[1] => 14.4
[2] => 9.7
)
[color] => #7070FA
)
)
[1] => Array
(
[y] => 15.6
[drilldown] => Array
(
[name] => Category1
[categories] => Array
(
[0] => 01-Jul
[1] => 02-Jul
[2] => 03-Jul
)
[data] => Array
(
[0] => 20
[1] => 16.1
[2] => 0
)
[color] => #7070FA
)
)
[2] => Array
(
[y] => 21.5
[drilldown] => Array
(
[name] => Category2
[categories] => Array
(
[0] => 01-Jul
[1] => 02-Jul
[2] => 03-Jul
)
[data] => Array
(
[0] => 20.6
[1] => 24.3
[2] => 17.9
)
[color] => #7070FA
)
)
[3] => Array
(
[y] => 10
[drilldown] => Array
(
[name] => Category3
[categories] => Array
(
[0] => 01-Jul
[1] => 02-Jul
[2] => 03-Jul
)
[data] => Array
(
[0] => 13.8
[1] => 11.5
[2] => 4
)
[color] => #7070FA
)
)
)
)
Any suggestion or help is welcome in comments
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.