Highcharts adapter and plugin for ExtJS

[vanessa_ng]

Hi Eric,
Have you found a solution for your problem with pie chart? I am using highcharts v2.1.0. Pie chart does not display when I use it with Ext.ux.HighchartPanel

// ChartPanel with pie
            new Ext.ux.HighchartPanel({
                layout:'fit',
                applyTo: 'chart-panel-pie',
                title: 'Ext.ux.HighchartPanel: pie',
                width: 800,
                height: 400,
                chartConfig: {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Browser market shares at a specific website, 2010'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [
                            ['Firefox',   45.0],
                            ['IE',       26.8],
                            {
                                name: 'Chrome',
                                y: 12.8,
                                sliced: true,
                                selected: true
                            },
                            ['Safari',    8.5],
                            ['Opera',     6.2],
                            ['Others',   0.7]
                        ]
                    }]
                }
            });

[vanessa_ng]

I tried using it with highcharts 2.1.4 and pie charts do not work...

Another member also mentioned it and he was told that the adapter is for 2.0.5

I have not tested if other charts are broken or not, but having adapter to support 2.1+ would be great

Hi Eric,
Have you found a solution for your problem with pie chart? I am using highcharts v2.1.0. Pie chart does not display when I use it with Ext.ux.HighchartPanel

// ChartPanel with pie
            new Ext.ux.HighchartPanel({
                layout:'fit',
                applyTo: 'chart-panel-pie',
                title: 'Ext.ux.HighchartPanel: pie',
                width: 800,
                height: 400,
                chartConfig: {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Browser market shares at a specific website, 2010'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [
                            ['Firefox',   45.0],
                            ['IE',       26.8],
                            {
                                name: 'Chrome',
                                y: 12.8,
                                sliced: true,
                                selected: true
                            },
                            ['Safari',    8.5],
                            ['Opera',     6.2],
                            ['Others',   0.7]
                        ]
                    }]
                }
            });

[smkkiran]

can any one please send me example for highcharts plugin in Extjs i am unable to do it
thanks in advance

[Joe Kuan]

To plot pie chart, here is an example of pie chart config

piechart = {
    series: [ {
      name: 'Bytes',
      type: 'pie',
      categorieField: 'section',
      dataField: 'bytes',
    }],
    chartConfig: {
      chart: { height: 300, animation: { duration: 2000 } },
      legend: false,
      credits: false,
      plotOptions: {
        pie: { animation: { duration: 2000 } },
      series: { type: 'pie' },
   }
}; 

On the PHP server side for your JsonStore, you should return something like

$result['root'][] = array('section' => 'First section name', 'bytes' => 100000);
$result['root'][] = array('section' => 'Second section name', 'bytes' => 100000);
$result['root'][] = array('section' => 'Third section name', 'bytes' => 100000);
... and so on
json_encode($result); 

[Joe Kuan]

Hi all,

I have ported the Highcharts extension to ExtJs 4. Here is the link if you are interested.

http://joekuan.wordpress.com/2012/01...n-for-extjs-4/

Cheers
Joe

[SpinoWeb]

Hi all,

I have ported the Highcharts extension to ExtJs 4. Here is the link if you are interested.

http://joekuan.wordpress.com/2012/01...n-for-extjs-4/

Cheers
Joe

thanks! I try it!

[SpinoWeb]

Hi Joe, great work!

My json request return the following code:

{"success":"true","points":[{"x":0,"y":0},{"x":300,"y":0},{"x":300,"y":600},{"x":0,"y":600},{"x":0,"y":0}],"rebars":[{"x":40,"y":40},{"x":260,"y":40},{"x":40,"y":560},{"x":260,"y":560}]}

and I'd like to obtain this plot: http://jsfiddle.net/xPPd8/

How can I set the highchart? I tryed to modify your standalone.js example, but with bad result

[Joe Kuan]

I have included the scatter example. Have a look at the http://github.com/JoeKuan/Highcharts_ExtJs_4

Joe

[SpinoWeb]

I have included the scatter example. Have a look at the http://github.com/JoeKuan/Highcharts_ExtJs_4

Joe

thank u!

[dgotty]

Hey All,

I've been messing with the Highchart plugin for ExtJs but I can't seem to get the pie chart to render properly (you can see the empty pie chart in the middle). I'm using ExtJs 3.1...anyone have any ideas as to why this might be happening?

pieChartFail.jpg

Here's my code:

layout: 'fit',
    initComponent: function() {
        
        this.chart = new Ext.ux.HighChart({
            series: [
                {
                    name: 'Arbitrary Data - column',
                    type: 'column',
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                },{
                    name: 'Arbitrary Data - default (line)',
                    data: [14.5, 301.5, 156.5, 9.2, 44.2, 36.0, 120.1, 100.4, 20.5, 134.4, 205.2, 2.5]
                },{
                    name: 'Arbitrary Data - spline',
                    type: 'spline',
                    data: [36.0, 120.1, 205.2, 2.5, 14.5, 301.5, 156.5, 9.2, 44.2, 100.4, 20.5, 134.4]
                },{
                    name: 'Arbitrary Data - area',
                    type: 'area',
                    data: [176.0, 135.6, 148.5, 29.9, 71.5, 106.4, 129.2, 194.1, 95.6, 54.4, 144.0, 216.4]
                },{
                    name: 'Arbitrary Data - spline with short dot',
                    type: 'spline',
                    data: [71.5, 106.4, 176.0, 135.6, 148.5, 29.9, 129.2, 194.1, 144.0, 216.4, 95.6, 54.4],
                    dashStyle: 'shortdot'
                },{
                    name: 'Arbitrary Data - scatter',
                    type: 'scatter',
                    data: [176.0, 194.1, 95.6, 54.4, 144.0, 216.4, 106.4, 129.2, 135.6, 148.5, 29.9, 71.5]
                },{
                    name: 'Arbitrary Data - pie',
                    type: 'pie',
                    dataField: 'value',
                    data: [106.4, 129.2, 135.6, 176.0, 216.4, 148.5, 29.9, 71.5, 194.1, 95.6, 54.4, 144.0]
                }
            ],
            chartConfig: {
                chart: {},
                title: {
                    text: 'Arg!!!'
                },
                xAxis: {},
                yAxis: {}
            }
        });
        
        this.items = [this.chart]

Any help is appreciated.