Highcharts adapter and plugin for ExtJS

[buz]

Hello,

Since many others are asking for this plugin, i'm posting the plugin and adapter for highcharts here.

For people who don't know Highcharts:
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

• Demo
  • Export Sample: http://www.jsfiddle.net/AMx6r/114/
    Column fix: http://www.jsfiddle.net/AMx6r/115/

Regards, Daniël


[Last update 09-11-2010: Highcharts 2+ required!]

 * 09-11-2010
 * Version 2.+
 * 
 * 08-06-2010
 * Fixed the refresh bug. (Do not render if chart is not ready yet) 
 *
 * 28-04-2010
 * + Added class: Ext.ux.HighChart.Serie, Ext.ux.HighChart.LineSerie,  Ext.ux.HighChart.PieSerie, etc..
 * - Fixed: Wait for the panel to be resized to its correct size  (Instead of 0,0) after that create the chart.
 *
 * 19-04-2010
 * - Fixed: Series keep hidden after resize.
 * + bindComponent - Fixes the issue with the fitlayout.
 * + setTitle, setSubTitle - Change the title/subtitle of the chart
 * + addSeries - Add new series to the chart

[mitchellsimoens]

First impression was looks good.

Second was I like the tool tip that goes up or down with the actual chart!

[meroy]

This is very nice. Thank you.

[mystix]

sweet

spotted one bug though: in the windowed chart, the tip doesn't get updated properly (i.e. it appears to be "stuck" once you're past a certain point) when the mouse cursor moves horizontally across the the, say, 20k line.

[Scorpie]

Nice work!

[wki01]

Is it possible to read data from a JsonStore?
Someone has to put a small example here in the forum?

Thank you very much

[ralphmyers420]

I'm using HighCharts pretty sucessfully when I have a known (static) set of data. What I need is to be able to load the data dynamically according to a user's input.
My normal method of getting user data is:
ComboBox choice -> DataStore.load -> PHP script that takes the combobox data as an input to perform a MySQL SELECT statement. The script then formats the output as a JSON object and passes it back to the Ext JS framework.
Is it possible to do this same thing, but take the JSON object that is returned and use it as the JSON input into a chart?
Any help on this would be fantastic.
Thanks

[buz]

I've been working on an implementation with a Store. I've been on a small vacation so havent completed it yet. I hopefully will complete the extension today/tomorrow.

Daniël

[tonedeaf]

Will the Highcharts adapter work with ext-core? Don't need the ux.HighchartPanel, just the adapter with ext-core as the base library.

[buz]

Sure, the adapter-extjs.js is only required to make the charts work. The Ext.ux.HighchartPanel is only for convenience.

When using the adapter without the panel just use:

        <!-- ExtJS includes -->
        <script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-3.1.1/ext-all-debug.js"></script>
        <link rel="stylesheet" type="text/css" href="ext-3.1.1/resources/css/ext-all.css" />

        <!-- ExtJS adapter for Highcharts -->
        <script type="text/javascript" src="adapter-extjs.js"></script>

        <!-- Highcharts includes -->
        <script type="text/javascript" src="highcharts.src.js"></script>
        <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->

After this you can use all samples used at highcharts.com (See the scatter example in de demo files)