Highcharts adapter and plugin for ExtJS

[buz]

@leonard
Nice work.

Did you use my version with the 1.2.5 version of highcharts? That one should make the resizing/moving work. See the demo at http://www.i286.org/examples/index.html

Anyway, nice work. Good idea of creating a ChartStore, this is very useful for implementing many series. At the moment i work on a version that handles the chart as Ext.chart.Chart.

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

I'm currently working on an extended version of the current HighchartPanel that will work the same as the Ext.chart.Chart. So you can bind series on columns instead of a new record. (Using HighchartPanelJson and Ext.ux.ChartStore).

[Remy]

Very impressive guys

[leonardb]

@leonard
Nice work.

Did you use my version with the 1.2.5 version of highcharts? That one should make the resizing/moving work. See the demo at http://www.i286.org/examples/index.html

Anyway, nice work. Good idea of creating a ChartStore, this is very useful for implementing many series. At the moment i work on a version that handles the chart as Ext.chart.Chart.



I'm currently working on an extended version of the current HighchartPanel that will work the same as the Ext.chart.Chart. So you can bind series on columns instead of a new record. (Using HighchartPanelJson and Ext.ux.ChartStore).

Thanks @buz,

Yes, I used the newer version, but was still having some issues (maybe my code ) with getting clean resizing in nested fit layout in an app I'm working on;
----------- north region -----------
| chart |
----------------------------------
| grouping grid |
--------- center region -----------

What i have is a grid showing grouped and summarized data, when a row in a group is selected, a direct method is called to load detailed data based on row data from server and add it to the ChartStore (which adds it to the chart). then on row deselect the data is removed from the store. this all supports multiple rows selections within the same group.

The 'north' region is resizable, so the chart needs to follow any resize event automatically.
I found that with the new code you'd posted it was not resizing correctly. not sure why. What I did was re-work the way the resize is handled (see my last post of Ext.ux.HighchartPanelJson) to try and determine the actual visible area for chart display on load and then set the chart sizes before rendering, and to update the chart size on resize events of parent container.

I'm sure there's a better way to do this, I'm pretty new to ExtJS, and just hacking around.

The move to emulating Ext.chart.Chart API is definitely a good idea, and seems to be very similar/exactly what I've been trying to achieve. So I assume as part of this we'll be able to bind the chart to an Ext.data.(Store|JsonStore|ArrayStore|DirectStore)? Look forward to seeing the results.

Leonard

[ipebaikbanget]

Nice work buz

[sj137]

found a bug in IE8 with the demo page (http://www.i286.org/examples/index.html)

Highcharts.Chart.prototype.remove = function () {

    /**
     * Clear certain attributes from the element
     * @param {Object} d
     */
    function purge(d) {
        var a = d.attributes, i, l, n;
        if (a) {
            l = a.length-1;
            for (i = l; i >= 0; i -= 1) {
                n = a[i].name;
                //if (typeof d[n] !== ‘object’) {
                if (n == 'coords') {
                    //d.parentNode.removeChild(d);
                    d[n] = '0,0,0,0';
                } else if (typeof d[n] != 'object') {
                    d[n] = null;  //<---------------------here... IE says "Could not get the align property"
                }
            }
        }
        a = d.childNodes;
        if (a) {
            l = a.length;
            for (i = 0; i < l; i += 1) {
                purge(d.childNodes[i]);

            }
        }

    }

I used the build in debugger to inspect the objects and found that
the object d does have a property called align which is set to an empty string...

so very strange behaviour indeed...

PS highcharts looks great and well done you guys for integrating it with ext

I've been using flot for a while but with ext3.x it's starting to give me problems...

so i look forward to using highcharts soon!!

keep up the good work, i'll see if i can find out what's going on with IE...

[sj137]

best solution i could find was wrapping the line with a try-catch...

[denise]

I was wondering: has anyone had any success getting the ExtJS Highcharts to work successfully with IE7 or IE8?

I was getting the same error as a previous poster ('Could not get the align property') so I wrapped it in a try-catch clause as suggested. Now I'm getting a new error. The script debugger on IE8 is reporting "Error: 'null' is null or not an object" (highcharts.src.js, line 1105). From what I can tell, the cvs object returned by doc.getElementByID(cvs.id) is null: it can't retrieve the element it just created.

I am going to try and see if I can figure out how to get around this but I was wondering if anyone seen the same behavior or gotten it working?

(This is trying to get the index.html page that came with the adapter-examples.zip file to display in IE)

Thanks.

[mitchellsimoens]

I was wondering: has anyone had any success getting the ExtJS Highcharts to work successfully with IE7 or IE8?

The example is working in my IE8. Only thing I can see wrong is not tooltip for the chart in the window unless I move the window then it will work.

[denise]

Thanks Mitchell, I was afraid of that!

Actually I should clarify: if I skip the script error dialog windows the page eventually *does* show up and seems to work fine. Also if I disable script debugging and notification about script errors, the page shows up as well (everything seems to work fine) but a 'script error on page' icon shows up in the browser.

Are you getting the page without any script errors? If so then I probably have something wrong with my setup!

Thanks.

[mitchellsimoens]

No I am getting the error but things seem to be working, assuming you move the window.