Wallogit.com
2017 © Pedro Peláez
Highcharts helper for Lithium
composer require jasonroyle/li3_highcharts
git submodule add https://github.com/IngeniumIDS/li3_highcharts.git libraries/li3_highcharts
Make the application aware of the library by adding the following to app/config/bootstrap/libraries.php., (*1)
Libraries::add('li3_highcharts');
Finally load the jQuery and highcharts JavaScript libraries between the <head> and </head> HTML tags at the top of the layout., (*2)
echo $this->html->script([
'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js',
'http://code.highcharts.com/highcharts.js'
]);
The helper has seven functions that generate different types of charts (area, areaSpline, bar, column, line, pie and spline). These functions accept three parameters (title, data and options)., (*3)
Parameter formatting:, (*4)
Some options have been added to make a few things easier:, (*5)
Area chart:, (*6)
echo $this->highcharts->area(
'Daily Page Clicks',
[
'pointStart' => '28 August 2013',
'pointInterval' => 'day',
'Home' => ['data' => [1,3,2,7,5,4,6,2]],
'Contact' => ['data' => [0,1,1,4,5,0,4,1]]
],
[
'xAxis' => ['type' => 'datetime'],
'yAxis' => ['title' => ['text' => 'Clicks']]
]
);
Pie chart:, (*7)
echo $this->highcharts->pie(
'Browser Share',
[
'Chrome' => 61,
'Safari' => 38,
'IE' => 6,
'Others' => 4,
'Opera' => 3
]
);
Anonymous JavaScript functions can be used., (*8)
Area spline chart:, (*9)
echo $this->highcharts->areaSpline(
'Daily Page Clicks',
[
'pointStart' => '(function(){return Date.UTC(2013,7,28,0,0,0);})()',
'pointInterval' => '(function(){return 24 * 3600 * 1000;})()',
'Home' => ['data' => [1,3,2,7,5,4,6,2]],
'Contact' => ['data' => [0,1,1,4,5,0,4,1]]
],
[
'xAxis' => ['type' => 'datetime'],
'yAxis' => ['title' => ['text' => 'Clicks']]
]
);
The helper has one more function (chart) which can be used with only the options parameter to allow full configuration., (*10)
Spline chart:, (*11)
echo $this->highcharts->chart([
'chart' => ['type' => 'spline'],
'title' => ['text' => 'Daily Page Clicks'],
'xAxis' => ['type' => 'datetime'],
'yAxis' => ['title' => ['text' => 'Clicks']],
'series' => [
'pointStart' => '28 August 2013',
'pointInterval' => 'day',
'Home' => ['data' => [1,3,2,7,5,4,6,2]],
'Contact' => ['data' => [0,1,1,4,5,0,4,1]]
]
]);
Highcharts helper for Lithium
MIT
Highcharts helper for Lithium
MIT
Highcharts helper for Lithium
MIT
Highcharts helper for Lithium
MIT