Highcharts adapter and plugin for ExtJS

[denise]

The following 2 fixes helped to remove my script errors:

1) HighchartPanel, remove function
IE does not seem to like assigning values to its DOM attributes using the "d[n]". The try-catch clause works or adding a isIE guard.

2) Highcharts source, insertAtFront
The before index is initialized to 0, so even if the childNodes length is 0, an attempt will be made to insert before non-existent node 0. For some reason FF always has childNodes length to at leaset 1, and in IE it's empty. I'm not sure if there is some deeper issue lurking in IE, but by adding in a check for 'childNodes.length == 0' and calling appendChild() instead of insertBefore() worked.

Once I made these 2 fixes, I managed to get the index page (as well as my own code) to work without any script errors.

[sj137]

cheers for that!

PS the fix for the doc.getElementById prob in Layer.prototype.getCtx

is just to check that the el returned is not null before storing it in the cvs variable

                var cvs_temp = doc.getElementById(cvs.id);
                if (cvs_temp) cvs = cvs_temp;

or simply removing that line seems to work also
(I checked how flot does it and they don't include the extra step of getting the element from the document after its created and appended)

[yvestan]

Hi,

How can I directly renderring charts on item's layout ?

I don't understand how to render if there's no div to "renderTo" in my HTML page.

(sorry to my bad english and my newbie question )

 Ext.reg('highchartpanel', Ext.ux.HighchartPanel);

    // Conteneur de démarrage
    var start = { 
        id: 'start-panel',
        title: 'Vue d\'ensemble des crédits',
        layout:'border',
        defaults: {
            collapsible: true,
            split: true
        },  
        items: [{
            title: 'Années',
            region:'east',
            margins: '5 0 0 0',
            cmargins: '5 5 0 0',
            width: 175,
            minSize: 200,
            maxSize: 200 
        },{ 
            title: 'Données',
            collapsible: false,
            height: 200,
            minSize: 200,
            maxSize: 200,
            region:'center',
            margins: '5 0 0 0',
            items: { 
                xtype: 'highchartpanel',
                titleCollapse: true,
                layout:'fit',
                border: true,
                chartConfig: {
                    chart: { defaultSeriesType: 'column' },
                    title: { text: 'Monthly Average Rainfall' },
                    subtitle: { text: 'Source: WorldClimate.com' },
                    xAxis: { categories: ['Jan'] },
                    yAxis: { min: 0, title: { text: 'Rainfall (mm)' } },
                    legend: { layout: 'vertical' },
                    series: [{
                        name: 'Tokyo',
                        data: [49.9]
                    
                    }]  
                }   
            }   
        }]

thanks !

Yves

[mitchellsimoens]

This is a fundamental thing to understand about ExtJS and how to incorporate components. I'd have a look at the examples and the source and you'll start to see that at the start of rendering the "items" config object is used or if you want to add a component to an existing the add() and doLayout() combo is used.

[yvestan]

Thank you for your reply ! I do not understand your answer . Want to see how is made the "start" layout ? Right ?

 // construit le layout en plein écran
    new Ext.Viewport({
        layout: 'border',
        title: 'Culture Layout',
        items: [{
            // entete de titre
            xtype: 'box',
            region: 'north',
            applyTo: 'header',
            height: 30
        },{
            // menu et bloc de détail
            layout: 'border',
            id: 'navigation',
            region:'west',
            border: false,
            split:true,
            margins: '2 0 5 5',
            width: 275,
            minSize: 100,
            maxSize: 500,
            items: [treePanel, detailsPanel]
        }, {
            id: 'content-panel',
            region: 'center', // le centre
            layout: 'card',
            margins: '2 5 5 0',
            activeItem: 0,
            border: false,
            items: [start]
        }],
        renderTo: Ext.getBody()
    });

thank you for your help

[robindel]

Hi Yves,
If I understood your question correctly (even though I'm french too, I had trouble pinning down what you meant), you have trouble rendering the chart.

The problem with highcharts is that you must have data to draw the chart. So if you fetch the data from the server, you must wait for the callback of the ajax request to render.

Now, you mention the fact that 'there is no div to renderTo'. You see, that's the magic about extJS. Each component creates his own html container to render itself into. So internally (in our case) we have something like Ext.apply(this.chartConfig,{chart.renderTo:this.body.dom}); (ie you don't have to write html code to render your components, unless you want to, apart from the outer one (in your case rendering to document.body).

You can PM me if you need more info.

rob'

[soulgen]

How do I load data asynchronously (the best way - HighchartPanel related, especially for TabPanel)

Ok, here is:
I have a TabPanel component which has 3 tabs on it, say it's named: 'Tab 1', 'Tab 2', and 'Tab 3'.

On each tab, I added a HighchartPanel, which needs data to be loaded.
My goal is to load data ONLY when it's needed or in the 1st time the tab (child component of TabPanel) activated.

For example: the activeTab object config of TabPanel now has a value "0" (zero), so the 'Tab 1' is displayed, and in this case I want ONLY the data for the 'Tab 1''s HighchartPanel to be loaded. This also should happen when the 'Tab 2' and/or 'Tab 3' clicked (activated), I want ONLY the appropriate data to be loaded.

In other hand, I want to tell you that I won't all data for all tabs to be loaded in the 1st time TabPanel rendered, ONLY load the appropriate data in the right time.

I encounter this problem when I investigate my code (showed below) in the firebug: All the data for all HighchartPaenl in each tab (child component of TabPanel) has been loaded in the 1st time the TabPanel rendered.

Here is my code:

Ext.onReady(function() {
    
    var myChart1 = new Ext.ux.HighchartPanel({
        layout: 'fit'
        ,renderTo: 'container'
        ,chartConfig: {
            chart: {
                defaultSeriesType: 'bar'
            }
            ,title: {
                text: 'Bar Chart 1'
            }
            ,xAxis: {
                categories: ['aaa', 'bbb', 'ccc']
            }
            ,series: [
                {
                    name: 'Series 1'
                    ,dataURL: 'data-for-mychart1.json'
                }
            ]
        }
    });
    
    var myChart2 = new Ext.ux.HighchartPanel({
        layout: 'fit'
        ,renderTo: 'container'
        ,chartConfig: {
            chart: {
                defaultSeriesType: 'column'
            }
            ,title: {
                text: 'Column Chart 1'
            }
            ,xAxis: {
                categories: ['aaa', 'bbb', 'ccc']
            }
            ,series: [
                {
                    name: 'Series 1'
                    ,dataURL: 'data-for-mychart2.json'
                }
            ]
        }
    });
    
    
    var win = new Ext.Window({
        title: 'Window'
        ,width: 800
        ,height: 400
        ,items: [  
            {
                xtype: 'tabpanel'
                ,activeTab: 0
                ,items: [
                    {
                        title: 'Tab 1'
                        ,items: myChart1
                    }
                    ,{
                        title: 'Tab 2'
                        ,items: myChart2
                    }
		    ,{
                        title: 'Tab 3'
                        //,items: another HighchartPanel
                    }
                ]
            }
        ]
    });
    
    win.show();
    
});

Thank you before.

nb:
Because of lack of my English, I hope you guys doesn't has a problem to understand my question above.

[talha06]

Dear Daniël and other people who gave effort for this extension,

thank you ALL for sharing this great extension with us, it's really so graphical and useful.
With regards,
Talha

[soulgen]

Does anyone knows how to use HighchartPanelJson mixed up with PHP?

I mean:
I want to use HighchartPanelJson, but the Json data value does not manually assign to the data config object, but generated using json_encode function of PHP, where the values of this json data is retrieved from database using PHP+SQL.

I want the snippet codes, please.

Thank you before.

[mitchellsimoens]

I want the snippet codes, please.

lol