Highcharts adapter and plugin for ExtJS

[leonardb]

The following allows for the hideLoading() method of Chart to work correctly. There was no definition for opacity modifications in the animate: and the Highcharts passes a function in options.complete to remove the loading layer from display.

    animate: function (el, params, options){
        if (params.width!==undefined) {
            Ext.get(el).setWidth(parseInt(params.width), true);
        }
        else if (params.height!==undefined) {
            Ext.get(el).setHeight(parseInt(params.height), true);
        }
        else if (params.left!==undefined) {
            Ext.get(el).setLeft(parseInt(params.left));
        }
        else if (params.opacity!==undefined) {
            Ext.get(el).setOpacity(parseInt(params.opacity),true);
            if (options.complete !== undefined && typeof options.complete == 'function'){
                options.complete();
            }
        } else {
            Ext.get(el).setTop(parseInt(params.top));
        }
    },

[wemerson.januario]

Wonderfull

[leonardb]

The attached contains an experimental replacement for Ext.ux.HighchartPanel.js using a Json Store for controlling the lines on a chart.

Also attached is an example file which can be dropped into the highcharts example folder

So instead of adding/removing series from the chart itself, you can add remove from the Json store. Again, requires that you use ids for all defined series and series you dynamically add.

I've only tested this with Chrome on Linux and line charts.

Comments/criticism/suggestions/improvements welcome

[buz]

The attached contains an experimental replacement for Ext.ux.HighchartPanel.js using a Json Store for controlling the lines on a chart.

Also attached is an example file which can be dropped into the highcharts example folder

So instead of adding/removing series from the chart itself, you can add remove from the Json store. Again, requires that you use ids for all defined series and series you dynamically add.

I've only tested this with Chrome on Linux and line charts.

Comments/criticism/suggestions/improvements welcome

Nice work! I will continue development asap (now on a business trip)

The updatePosition function will be implemented in the 1.2.5 release (Yay). Now we only need a onContainerResize function. Maybe i'll try to create that. It's really needed to use with ExtJS.

[leonardb]

Nice work! I will continue development asap (now on a business trip)

The updatePosition function will be implemented in the 1.2.5 release (Yay). Now we only need a onContainerResize function. Maybe i'll try to create that. It's really needed to use with ExtJS.

Sounds great. I've also posted to the HighCarts board asking about an issue with creating charts with an empty series array. This is critical when you want to handle the series adds/removes based on external logic or stores which do not exist when the chart is initially created. IE adding and removing plots to a base chart based on the actions of the user. EG showing a grid of "data" and then using user selected/deselected rows to add/remove series from chart. Very useful in case of doing visual comparisons of wide data sets.

I'll update when/if I get an answer to that.

Leonard

[nathand]

Hopefully this helps:
http://highcharts.com/cases/empty-chart.htm

[leonardb]

Hopefully this helps:
http://highcharts.com/cases/empty-chart.htm

Yep, it should.

[buz]

I have updated the HighchartPanel to 1.2.5 (See 1st post). The highchart source is in the adapter.zip. The demo is also updated: click.

The HighchartPanel will not redraw after being moved. Only when it is resized, but that can be disabled (For large data sets).

@option: redrawOnResize: false

[leonardb]

Thanks @buz / Daniël,

I've been plugging away at the idea of actually using a Ext.data.JsonStore as the backend for the chart (as per earlier post).

I've made a few changes to your updated code, the whole resize thing was not working for me, and the copying is now handled by the store itself.

Attached is a new Ext.ux.HighchartPanelJson.js and demo files line-json.js and line-json.htm

The ux actually contains 2x ux. Ext.ux.ChartStore which is a mildly extend Ext.data.JsonStore (with some added methods), and the Ext.ux.HighchartPanelJson

The extension supports grouping of lines (using filter on the store), and auto-toolbar generation. This is useful when you want to be able to show groups of lines on a single chart using the same backing store.

The store itself handles all the adding/removing/updating of lines on the graph.

I've only really tested this with line and spline type charts.

I'd be interested to hear what others think about shifting all the handling to the store (ala grid type control) vs using the chart methods directly.

Leonard

[christophe67]

Very nice plugin, but i'm very intterested to connect the chart with a data base like a grid have you any example.
thanks
Christophe