Download the PHP package gremo/highcharts-bundle without Composer

GremoHighchartsBundle

Symfony2 Bundle for creating Highcharts charts, fluently and with as little as possible of JavaScript.

• Installation
• Configuration
• Defining charts
  • Creating charts objects
  • Setting and getting properties
  • Creating axes, series and points
  • Options providers
    • Built-in options providers
• Rendering Charts
• Limitations
• Planned features

Installation

Add the following to your deps file (for Symfony 2.0.*):

Then register the namespaces with the autoloader (app/autoload.php):

Or, if you are using Composer and Symfony 2.1.*, add to composer.json file:

Finally register the bundle with your kernel in app/appKernel.php:

Configuration

See Options providers.

Defining charts

First get gremo_highcharts service from the service container:

Creating charts objects

There is one method for each chart type in gremo_highcharts service:

Last three chart types requires highcharts-more.js. For "special" charts (like combining more than one chart) you can use the generic newChart() method.

Setting and getting properties

Magic methods setXxx (set simple property), newXxx (create nested property), getXxx (get property) are available for charts, axes, series and complex points. String part Xxx will be lcfirst-ed to xxx before setting the property.

Setters setXxx are fluent and returns the instance, while newXxx methods return the nested property itself. Use getParent() to get the parent object:

Will result in:

Refer to to Highcharts API Reference and to Highcharts Demo Page to control the behaviour of your chart.

Creating axes, series and points

The chart object has newXAxis(), newYAxis() and newSeries() methods for creating and adding axes and series to the chart. These methods return nested properties themselves, and work exactly the same way:

For actually addding your data to the chart, you can use newValue($value), newPoint($x, $y) and newComplexPoint():

Alternatively you can set the data directly using setData(array $data) method.

Methods newValue($value), newPoint($x, $y) and setData(array $data) returns the series while newComplexPoint() returns the point itself, for chaining subsequent calls. Values, points and complex points are explained here.

Options providers

Properties defined using options providers applies for all charts. Define a service, add gremo_highcharts.options_provider tag and implement Gremo\HighchartsBundle\Provider\OptionsProviderInterface interface, returing the default options as an array in getOptions() method:

Failing in returing an array type will throw an exception.

Providers with an higher priority will (nicely and recursively) override options from providers with a lower one. See Rendering Charts for actually using default options. Priority attribute is not mandatory.

Built-in options providers

For setting common options, this bundle provides some built-in options providers. If you are fine with default options you can use the short form (works for every provider):

credit_disabler: sets Highcharts credits to off.

lang: provides translation for lang strings using Symfony 2 translation system.

Key reference along with default values:

locale: provides decimal and thousands separators based on the current locale, using PHP intl extension.

Rendering charts

First, pass the chart to your template:

Then in your AcmeHelloBundle:Hello:chart.html.twig template import jQuery along with Highcharts JavaScript file:

Note that jQuery library is only needed for creating the chart after the DOM is ready.

Finally initialize the chart:

You can omit Highcharts.setOptions() if you didn't used any options provider.

Limitations

Since JavaScript closures cannot be serialized, it's not possible to define properties as callbacks directly using this library (e.g. when you need to customize tooltips formatters).

This has to be done directly in JavaScript:

Planned features

• Add an options provider for loading options from a JSON file (i.e. Highcharts themes, JSON file)
• Find out a better way for printing options and charts (a Twig extension maybe)
• Add helper methods for multiple axes and combined charts
• Add a building system for defining reusable chart templates