Highcharts adapter and plugin for ExtJS

Sure, I would love to see it!

I'll look at getting a working example up on Fiddle later, but for now here's a basic breakdown of how I implemented it. Below is a basic column chart, but you can edit the highchart code to display any of the available chart types:

Assuming the store load returns data in this format:

Code:

---

"records": [
    {"key":"2012-08-08 23:59:59", "value":"2"},
    {"key":"2012-08-07 23:59:59", "value":"4"},
    {"key":"2012-08-06 23:59:59", "value":"5"},
    {"key":"2012-08-05 23:59:59", "value":"3"},
    {"key":"2012-08-04 23:59:59", "value":"7"},
    {"key":"2012-08-03 23:59:59", "value":"3"},
    {"key":"2012-08-02 23:59:59", "value":"1"}
]

---

Here's a couple of chart specific functions I use in the code later:

Code:

---

function convertChartData(records, name) {
    var arr = [];
    for(i = 0, x = records.length; i < x; i++) { 
        var r = records[i];
        var val = r.get(name);
        arr.push(val)
    };   
    return arr;
}


function resizeChart(containerId, chart) {
    var parent = $('#' + containerId);
    var w = parent.width();
    var h = parent.height();
    chart.setSize(w, h);
}

---

And now the full EXTJS code for adding highcharts to panels:

Code:

---

Ext.ns('MyApp');


MyApp.chart_example = Ext.extend(Ext.Panel, {
   
    initComponent:function() {
       
        var thispanel = this;
       
        var chart;
       
        var fields = [
            {name: 'key', mapping:'key', type:'date', dateFormat:'Y-m-d H:i:s'},
            {name: 'value', mapping:'value', type:'float'}   
        ];
               
        var store = new Ext.data.JsonStore({
            url: URL_GOES_HERE,
            fields: fields,
            root: 'records',
            autoLoad: false,
            listeners: {
               
                load: function(thisStore, records, o)
                       
                    var keys = convertChartData(records, 'key');
                    var values = convertChartData(records, 'value');           
                   
                    chart.xAxis[0].setCategories(keys);
                    chart.series[0].setData(values);
                    resizeChart(thispanel.id, chart)
                   
                }   
            }
        });
           
        var config = {
            flex:1,
            store: store,
            border: false
        };


        Ext.apply(this, Ext.apply(this.initialConfig, config));


        MyApp.chart_example.superclass.initComponent.apply(this, arguments);       
       
        this.on({
            bodyresize: {
                fn: function() {
                    resizeChart(thispanel.id, chart)
                }   
            },
            afterrender:{scope:this, single:true, fn:function() {
                               
                var renderTo = this.id;
       
                chart = new Highcharts.Chart({
                    title: false,
                    credits: false,
                    legend: false,
                    chart: {
                        animation: true,
                        type: 'column',
                        renderTo: renderTo,
                        margin:[20, 20, 55, 35]
                    },
                    yAxis: [{
                        allowDecimals: false,
                        title: false,
                        alternateGridColor: '#f9f9f9'
                    }],
                    xAxis: {
                        reversed: true,
                        labels: {
                            formatter: function() {
                                var formatted = this.value.format('jS M');
                                return formatted
                            },
                            rotation: -45,
                            style: {
                                fontWeight: 'normal',
                                fontSize: '10px'
                            },
                            align:'right',
                            x:5   
                        }
                    },
                    tooltip: {
                        borderWidth: 1,
                          shadow:false,
                          style: {
                              fontSize: '11px'   
                          },
                        formatter: function() {
                            if(this.y == 0) {
                                return false;
                            } else {
                                var formatted = this.x.format('jS M');
                                return '<b>' + formatted + '</b><br>' + this.y;
                            }
                        }
                    },
                    plotOptions: {
                        column: {
                            borderWidth: 0,
                            animation: {duration: 1000},
                            dataLabels: {
                                enabled: true,
                                style: {
                                    color:'#888'
                                },
                                y: -8,
                                formatter: function() {
                                    if(this.y == 0) {
                                        return '';   
                                    } else {
                                        return this.y;
                                    }
                                }
                            }
                        },
                        series: {
                            color: '#dd5658',
                            shadow: false, 
                            cursor: 'pointer',
                            events: {
                                click: function(e) {
                                    // CLICK LOGIC HERE
                                }
                            }       
                        }
                    },
                    series: [{
                        data: []
                    }]
                });   
                   
                this.store.load();
               
                this.chart = chart;
               
            }}
        });
       
       
    }   
});
Ext.reg('chart_example', MyApp.chart_example);

---

Then to add this to your layout, you would simply do something like the following:

Code:

---

var basicPanel = new Ext.Panel({
    title: 'Here is the Chart Container',
    items: {
        xtype: 'chart_example'
    }
});

---

Give me a shout if none of this makes sense...

Sweet! Thanks for taking the time to post this. I will test it our over the coming days and let you know how it goes!

Dear all, thank you for your great work.
I am using Highcharts extension with ExtJS, and I just face an issue. I am trying to create a highchart component in a tabpanel using Xtype. The issue is that when I set the ‘activeTab’ of the tabpanel to the tab where highchart component is, the latter works properly. But, when I set the ‘activeTab’ to another tab and then after click the tab where highchart component is, the chart is not created.
I have also tried to create the chart before the tabpanel using the following way:
var Hchart = Ext.create(“Chart.ux.Highcharts”, {…});
and then in the tabpanel
var tabpanel = Ext.create(‘Ext.tab.Panel’, {
width: 1000,
height: 600,
activeTab: 2,
renderTo:’paneldom’,
items: [{
id:’home’,
title: ‘Home’,
},
{
title: ‘History’,
id:’history’,
layout: ‘border’,
items:[{
region:’center’,
id:’figureId’,
xtype:’panel’,
autoScroll:true,
layout:’fit’,
items : Hchart,
this way does not work even if I activate the tab where the chart is.
could you please tell me what is wrong
Thank you for your time and consideration

Hi,

I'm using ExtJS3.4 with high charts and I'm trying an example chart that can have 2 y-axes. Is this possible? If so can I get an example of how to do this? I'm kind of lost looking in the source code for Ext.ux.HighCharts

Thanks

How have you currently implemented Highcharts into EXTJS? Are you using the adapter and plugin as referenced in the opening post - or have you gone the way of manually inserting highcharts into panels how I mentioned in post #412?

I could probably scrape an example together of the later method if required.

willigogs, I have used the adapter and plugin referenced in the opening post.

感觉好伤心。。。。。。。。。

floow this ban day,run it finnly,3q

Hello,
since now i tried to use Joe Kuan Highcharts Extension for Sencha, but i couldn't manage to make it work properly on my series...
Can i use this plugin also with sencha touch?

Thanks
Lorenzo