jasonroyle/li3_highcharts

Highcharts helper for Lithium

Maintainers

Details

github.com/jasonroyle/li3_highcharts

Source

Issues

Installs: 107

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 5

Forks: 0

Open Issues: 0

Type:lithium-library

0.1.1 2015-04-10 09:27 UTC

Requires

MIT 5ed9ca4f4e547a2921b551682986187121258e98

  • Jason Royle <jasonroyle.woop@me.com>

This package is not auto-updated.

Last update: 2024-04-27 15:04:33 UTC

README

Composer

composer require jasonroyle/li3_highcharts

Git

git submodule add https://github.com/IngeniumIDS/li3_highcharts.git libraries/li3_highcharts

Enable the Library

Make the application aware of the library by adding the following to app/config/bootstrap/libraries.php.

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.

echo $this->html->script([
	'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js',
	'http://code.highcharts.com/highcharts.js'
]);

Usage

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).

Parameter formatting:

  • The title should either be a string or null.
  • The data for the area, areaSpline, bar, column, line and spline functions is a PHP array version of the series.data JavaScript array.
  • The data for the pie function is an associative array where the keys are the series names and the values are integers.
  • The options is a PHP array version of the JavaScript object that would normally be passed to the highcharts JavaScript function.

Some options have been added to make a few things easier:

  • Series names can be set as the keys of the data array.
  • Values of the data array that aren't arrays are applied to all series as options.
  • The pointStart option can be set to any PHP supported date and time format.
  • The pointInterval option can be set to second, minute, hour, day or week.

Area chart:

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:

echo $this->highcharts->pie(
	'Browser Share',
	[
		'Chrome' => 61,
		'Safari' => 38,
		'IE' => 6,
		'Others' => 4,
		'Opera' => 3
	]
);

Anonymous JavaScript functions can be used.

Area spline chart:

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.

Spline chart:

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]]
	]
]);