PHPackages gremo/highcharts-bundle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. gremo/highcharts-bundle AbandonedArchivedSymfony-bundle[Templating & Views](/categories/templating) gremo/highcharts-bundle ======================= Symfony2 Bundle for creating Highcharts charts, fluently and with as little as possible of JavaScript. v1.0.3(12y ago)193.1k5[1 PRs](https://github.com/gremo/GremoHighchartsBundle/pulls)MITPHPPHP >=5.3.2 Since Jan 6Pushed 10y ago3 watchersCompare [ Source](https://github.com/gremo/GremoHighchartsBundle)[ Packagist](https://packagist.org/packages/gremo/highcharts-bundle)[ RSS](/packages/gremo-highcharts-bundle/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (2)Dependencies (4)Versions (5)Used By (0) GremoHighchartsBundle ===================== [](#gremohighchartsbundle) [![Build status](https://camo.githubusercontent.com/786fda8a49d4f5ee94d79c958d4fac4fa1e9ebbd23da23ecf60ad67ec76cd017/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f6772656d6f2f4772656d6f4869676863686172747342756e646c652e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/gremo/GremoHighchartsBundle) [![GitHub issues](https://camo.githubusercontent.com/1b796e974b49a80f6d2bed24611a162e6932624af329103057094210a758dd51/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6772656d6f2f4772656d6f4869676863686172747342756e646c652e7376673f7374796c653d666c61742d737175617265)](https://github.com/gremo/GremoHighchartsBundle/issues) [![Latest stable](https://camo.githubusercontent.com/d7cabb6351f0f3806b25055300a55edbff9ee163350fdb7717ce1e4cf227ac99/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6772656d6f2f686967686368617274732d62756e646c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/gremo/highcharts-bundle) [![Downloads total](https://camo.githubusercontent.com/00d2af44d1854ceb443be299d8a81f7d106d43e8d2eb58bffb4ad6d2c08eeaf4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6772656d6f2f686967686368617274732d62756e646c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/gremo/highcharts-bundle) Symfony2 Bundle for creating Highcharts charts, fluently and with as little as possible of JavaScript. - [Installation](#installation) - [Configuration](#configuration) - [Defining charts](#defining-charts) - [Creating charts objects](#creating-charts-objects) - [Setting and getting properties](#setting-and-getting-properties) - [Creating axes, series and points](#creating-axes-series-and-points) - [Options providers](#options-providers) - [Built-in options providers](#built-in-options-providers) - [Rendering Charts](#rendering-charts) - [Limitations](#limitations) - [Planned features](#panned-features) Installation ------------ [](#installation) Add the following to your `deps` file (for Symfony 2.0.\*): ``` [GremoHighchartsBundle] git=https://github.com/gremo/GremoHighchartsBundle.git target=bundles/Gremo/HighchartsBundle ``` Then register the namespaces with the autoloader (`app/autoload.php`): ``` $loader->registerNamespaces(array( // ... 'Gremo' => __DIR__.'/../vendor/bundles', // ... )); ``` Or, if you are using Composer and Symfony 2.1.\*, add to `composer.json` file: ``` { "require": { "gremo/highcharts-bundle": "*" } } ``` Finally register the bundle with your kernel in `app/appKernel.php`: ``` public function registerBundles() { $bundles = array( // ... new Gremo\HighchartsBundle\GremoHighchartsBundle(), // ... ); // ... } ``` Configuration ------------- [](#configuration) See [Options providers](#options-providers). Defining charts --------------- [](#defining-charts) First get `gremo_highcharts` service from the service container: ``` /** @var $highcharts \Gremo\HighchartsBundle\Highcharts */ $highcharts = $this->get('gremo_highcharts'); ``` ### Creating charts objects [](#creating-charts-objects) There is one method for each chart type in `gremo_highcharts` service: ``` $highcharts->newAreaChart(); $highcharts->newAreaSplineChart(); $highcharts->newBarChart(); $highcharts->newColumnChart(); $highcharts->newLineChart(); $highcharts->newPieChart(); $highcharts->newScatterChart(); $highcharts->newSplineChart(); $highcharts->newAreaRangeChart(); $highcharts->newAreaSplineRangeChart(); $highcharts->newColumnRangeChart(); ``` 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 [](#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: ``` $chart = $highcharts->newLineChart() ->newChart() ->setRenderTo('chart-container') ->getParent() ->newTitle() ->setText('My chart') ->newStyle() ->setColor('#FF00FF') ->setFontWeight('bold') ->getParent() ->getParent(); echo $chart; ``` Will result in: ``` { "chart" : { "renderTo": "chart-container" }, "title" : { "text": "My Chart", "style": { "color": "#FF00FF", "fontWeight": "bold" } } } ``` Refer to to [Highcharts API Reference](http://api.highcharts.com/highcharts) and to [Highcharts Demo Page](http://www.highcharts.com/demo/)to control the behaviour of your chart. ### Creating axes, series and points [](#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: ``` $chart = $highcharts->newBarChart() ->newXAxis() ->setCategories(array('Africa', 'America', 'Asia', 'Europe', 'Oceania')) ->newTitle() ->setText(null) ->getParent() ->getParent() ->newYAxis() ->setMin(0) ->newTitle() ->setText('Population (millions)') ->setAlign('high') ->getParent() ->newLabels() ->setOverflow('justify') ->getParent() ->getParent(); ``` For actually addding your data to the chart, you can use `newValue($value)`, `newPoint($x, $y)` and `newComplexPoint()`: ``` $chart->newSeries() ->newComplexPoint() ->setName('Point 1') ->setColor('#00FF00') ->setY(0) ->getParent() ->newComplexPoint() ->setName('Point 2') ->setColor('#FF00FF') ->setY(5) ->getParent(); ``` 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](http://api.highcharts.com/highcharts#series.data). ### Options providers [](#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: ``` use Gremo\HighchartsBundle\Provider\OptionsProviderInterface; use JMS\DiExtraBundle\Annotation as DI; /** * @DI\Service("my_options_provider") * @DI\Tag("gremo_highcharts.options_provider", attributes={"priority"=10}) */ class MyOptionsProvider implements OptionsProviderInterface { /** * @return array */ public function getOptions() { return array( 'colors' => array( '#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4', ) ); } } ``` 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](#rendering-charts) for actually using default options. Priority attribute is not mandatory. #### Built-in options providers [](#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): ``` gremo_highcharts: options_providers: credits_disabler: ~ lang: ~ locale: ~ # ... ``` **credit\_disabler**: sets Highcharts credits to off. ``` gremo_highcharts: options_providers: # ... credits_disabler: enabled: true ``` **lang**: provides translation for [`lang` strings](http://api.highcharts.com/highcharts#lang) using [Symfony 2 translation system](http://symfony.com/doc/current/book/translation.html). ``` gremo_highcharts: options_providers: # ... lang: enabled: true messages_domain: mydomain # default to gremo_highcharts ``` Key reference along with default values: ``` downloadJPEG: Download JPEG image downloadPDF: Download PDF document downloadPNG: Download PNG image downloadSVG: Download SVG vector image exportButtonTitle: Export to raster or vector image loading: Loading... months: january: January february: February march: March april: April may: May june: June july: July august: August september: September october: October november: November december: December printButtonTitle: Print the chart resetZoom: Reset zoom resetZoomTitle: Reset zoom level 1:1 shortMonths: jan: Jan feb: Feb mar: Mar apr: Apr may: May jun: Jun jul: Jul aug: Aug sep: Sep oct: Oct nov: Nov dic: Dic weekdays: sunday: Sunday monday: Monday tuesday: Tuesday wednesday: Wednesday thursday: Thursday friday: Friday saturday: Saturday ``` **locale**: provides decimal and thousands separators based on the current locale, using [PHP intl extension](http://php.net/manual/en/book.intl.php). ``` gremo_highcharts: options_providers: # ... locale: enabled: true ``` Rendering charts ---------------- [](#rendering-charts) First, pass the chart to your template: ``` public function showAction() { // Chart building... return $this->render( 'AcmeHelloBundle:Hello:chart.html.twig', array('chart' => $chart) ); } ``` Then in your `AcmeHelloBundle:Hello:chart.html.twig` template import jQuery along with Highcharts JavaScript file: ``` Highcharts Example {% javascripts '@AcmeHelloBundle/Resources/public/js/jquery.js' '@AcmeHelloBundle/Resources/public/js/highcharts.js' %} {% endjavascripts %} ``` Note that jQuery library is only needed for creating the chart after the DOM is ready. Finally initialize the chart: ``` Highcharts.setOptions({% render 'gremo_highcharts:getOptions' %}); $(function() { $(document).ready(function() { new Highcharts.Chart({{ chart|raw }}); }); })(jQuery);; ``` You can omit `Highcharts.setOptions()` if you didn't used any options provider. Limitations ----------- [](#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](http://api.highcharts.com/highcharts#tooltip.formatter)). This has to be done directly in JavaScript: ``` // ... $(function() { $(document).ready(function() { var options = {{ chart|raw }}; options.tooltip = { formatter: function() { return 'The value for '+ this.x + ' is '+ this.y +''; } }; new Highcharts.Chart(options); }); })(jQuery); ``` Planned features ---------------- [](#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 ### Health Score 34 — LowBetter than 77% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity27 Limited adoption so far Community14 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor1 Top contributor holds 83.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~89 days Total 4 Last Release 4612d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/f9a79689fe41827b4fd386dd42a9117115e27a4f946935d6ce77d7f6a76260fe?d=identicon)[gremo](/maintainers/gremo) --- Top Contributors [![gremo](https://avatars.githubusercontent.com/u/1532616?v=4)](https://github.com/gremo "gremo (15 commits)")[![maphe](https://avatars.githubusercontent.com/u/2337357?v=4)](https://github.com/maphe "maphe (2 commits)")[![richsage](https://avatars.githubusercontent.com/u/231551?v=4)](https://github.com/richsage "richsage (1 commits)") --- Tags highchartscharts ### Embed Badge ![Health badge](/badges/gremo-highcharts-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/gremo-highcharts-bundle/health.svg)](https://phpackages.com/packages/gremo-highcharts-bundle) ``` ### Alternatives [a2lix/auto-form-bundle Automate form building 873.8M11](/packages/a2lix-auto-form-bundle)[cmen/google-charts-bundle This Bundle provides a Twig extension and PHP objects to display Google charts in your Symfony application. 76844.8k2](/packages/cmen-google-charts-bundle)[iq2i/storia-bundle UI Storia bundle 144.6k](/packages/iq2i-storia-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)