Easily add Highcharts, Highstock and Highmaps graphs to your Yii application.

Create interactive charts easily for your web projects. Used by tens of thousands of developers and 59 out of the world's 100 largest companies, Highcharts is the simplest yet most flexible charting API on the market.
Highstock lets you create stock or general timeline charts in pure JavaScript. Including sophisticated navigation options like a small navigator series, preset date ranges, date picker, scrolling and panning.
Build interactive maps to display sales, election results or any other information linked to geography. Perfect for standalone use or in dashboards in combination with Highcharts!
Note: Highcharts is free for non-commercial use only. For more information, please visit the Highcharts License and Pricing page.
protected/extensionsTo use this widget, you may insert the following code in a view:
$this->Widget('ext.highcharts.HighchartsWidget', array( 'options' => array( 'title' => array('text' => 'Fruit Consumption'), 'xAxis' => array( 'categories' => array('Apples', 'Bananas', 'Oranges') ), 'yAxis' => array( 'title' => array('text' => 'Fruit eaten') ), 'series' => array( array('name' => 'Jane', 'data' => array(1, 0, 4)), array('name' => 'John', 'data' => array(5, 7, 3)) ) ) ));
By configuring the options property, you may specify the options that need to be passed to the Highcharts JavaScript object. Please refer to the demo gallery and documentation on the Highcharts website for possible options.
Alternatively, you can use a valid JSON string in place of an associative array to specify options:
$this->Widget('ext.highcharts.HighchartsWidget', array( 'options' => '{ "title": { "text": "Fruit Consumption" }, "xAxis": { "categories": ["Apples", "Bananas", "Oranges"] }, "yAxis": { "title": { "text": "Fruit eaten" } }, "series": [ { "name": "Jane", "data": [1, 0, 4] }, { "name": "John", "data": [5, 7,3] } ] }' ));
Note: You must provide a valid JSON string (double quotes) when using the second option. You can quickly validate your JSON string online using JSONLint.
See /doc/examples for more usage examples.
If you need to use JavaScript in any of your configuration options, use the js: prefix. For instance:
... 'tooltip' => array( 'formatter' => 'js:function(){ return this.series.name; }' ), ...
Highcharts by default displays a small credits label in the lower right corner of the chart. This can be removed using the following top-level option.
... 'credits' => array('enabled' => false), ...
Since version 3.0.2, all adapters, modules, themes, and supplementary chart types must be enabled through the top-level 'scripts' option.
... 'scripts' => array( 'highcharts-more', // enables supplementary chart types (gauge, arearange, columnrange, etc.) 'modules/exporting', // adds Exporting button/menu to chart 'themes/grid' // applies global 'grid' theme to all charts ), ...
Previous versions relied on auto-detection magic, but that became less reliable as Highcharts evolved. The new method more accurately follows the native process of including/excluding additional script files and gives the user some finer-grain control. For a list of available scripts, see the contents of protected/extensions/highcharts/assets/.
You can access the JavaScript chart object from another script like this:
var chart = $('#my-chart-id').highcharts();
where my-chart-id is set via the top-level id configuration option. Just make sure you register your script after the widget declaration so that it has a chance to initialize.
Please use the 'Comments' section only for reviews. If you have questions, requests, bug reports or other feedback, use the links above.
Total 20 comments
Can anyone give me a working example of a solid gauge chart ?
I wish to create bar graph with count of records entered per month. I am able to get the months and the count. But from there i am stuck on how to get the data to display on the graph.
I know it's arrays but i can't point a finger; I have a working version which is not a very good implementation - it works though. See Below
This is the code i wish to make simple and efficient. thanks
how i can use % in width ?
Hi everyone,
If anyone wants to integrate HighCharts manually, here's a little tutorial I've written on the topic: link
Hope it's helpful!
How can i add some life function for gauge charts. At line 85: JSFiddle
I added 3D chart recognition by changing highcharts/HighchartsWidget.php
Find the line that has
Then add the following ABOVE the line.
Does anyone have any better suggestions to do this?
Super Ji Super. your extension saved my time a lot.
Was a pain to figure out a few graphs but it works great. Here are the example of charts I use to help other people out. They should all work out the box...
Combo Chart Like The one in the pic in the description
Basic Column (bar graph)
Basic Line Chart
Basic Pie Chart
@Milo Thanks a lot for your quick answer. The problem is: I'm not using HighstockWidget at all and it's not included on any of my pages. That's why I just can't figure out what could be the issue in my implementation of Highcharts :-/
theparisian,
This error occurs if you mix Highcharts and Highstock widgets on the same page. All functionality in HighchartsWidget is available in HighstockWidget, so the easiest fix is to use only HighstockWidget on the page.
If you have further issues or comments, please post them in the dedicated forum thread, open a new issue or comment on the related issue I just created on GitHub.
Hi,
Thanks a lot for this extension.
I just upgraded it to the latest version (along with a global update of jQuery) and I'm getting the following error #16: www.highcharts.com/errors/16 The snippet below is called 4 times in a view (this view being encapsulated in a page containing other Highcharts). However my code was working before and I can't find a way to instantiate the Highcharts widget in another way.
Please could you advise?
Thanks a lot! M
Just like my title, is it possible exports without internet connection? Thanks a lot for replying
Thank you patrice, you are a life saver, i finnaly got the drilldown working :-) wow..
Just one remark for this extention, i had to download the newest highcharts lib, and extract the drilldown module from it to the extension modules, after that it all came together... thank you so much patrice for the help!!!
@ptv1p3r, this is a model for a PHP-driven drilldown. Hope this helps.
Thanks patrice, but my problem isn't the script's, it really is the code.. taking this example of a simple chart column :
What's the correct way to add a simple drilldown on the categorie Apples with this simple data : Red Apples => 2 and Green Apples => 3 ?
I've searched all around and i can't seem to find a tutorial on adding drilldown :-(....
I had to register some scripts in order to run a drilldown on my localhost (not sure it's the same issue for you, let me know if there is another problem).
First congrats on this extension, it's really good, but i'm having a bit of a problem when i need to make a drilldown chart.
All i need is a working example of a column chart with a simple drilldown, so i can figure out how drilldown is suposed to work, can anyone help me out please ?
Hello folks, There is strange problem with 3.0.5 version, it simple doesn't show lines until browser's zoom is changed. I'd tried with the latest Chrome and Firefox even Yandex(Chrome), does anyone familar with this ?
Thanks for the 3.0.2 update, Milo.
Have you tried it using Yii 1.1.14 RC? I can't seem to get a simple pie chart to work, however, my bar charts work just fine. 1.1.13 works without problems.
Thanks for this awesome extension!
In a PIE chart, how can I:
1) Set 'gradient' to true?
2) Format legend like (browsers example): 'Chrome: 12.8%'?
Leave a comment
Please login to leave your comment.