Highcharts adapter and plugin for ExtJS

**israel.galan** · 24 Nov 2010 2:26 AM

Can anyone post an example of a chart other than pie using a JSONStore? the pie chart works fine, but I can't figure out how to do the same with other chart types.
Thanks in advance

**Manoharan** · 24 Nov 2010 4:34 AM

Here is an example of a chart that can generate column or line chart. There are three series. The first is a column one, the other two are line right now. You can see the commented out line.

Code:

            win = desktop.createWindow({
                id: 'graphreport',
                title:'Graphical Report',
                width:500,
                height:450,
                minimizable:false,
                maximizable:false,
                resizable:false,
                iconCls: 'graphreport',
                shim:false,
                animCollapse:false,
                constrainHeader:true,
                layout: 'border',
                modal:true,
                items: [
                        {
                        xtype: 'highchart',
                        region:'center',
                        id: 'thechart',
                       store : new Ext.data.Store({
                          proxy: new Ext.data.HttpProxy({
                          url: 'php/membersummary.php'
                          }),
                          reader: new Ext.data.JsonReader({
                                 root:'rows'
                                 }, [
                                   {name:'membername', type:'string'},
                                   {name:'deposittotal', type:'float'},
                                   {name:'withdrawntotal', type:'float'},
                                   {name:'balance', type:'float'}
                           ]),
                           autoLoad:true
                        }),
                        series: [
                            {
                                type: 'column',
                                name: 'Balance',
                                dataIndex: 'balance'
                            },
                            {
//                              type: 'column',
                                name: 'Deposited',
                                dataIndex: 'deposittotal'
                            },
                            {
                                name: 'Withdrawn',
                                dataIndex: 'withdrawntotal'
                            }
                        ],
                        xField: 'membername',
                        chartConfig: {
                            chart: {
                                defaultSeriesType: 'line',
                                zoomType:'x'
                            },
                            title: {
                                text: 'Summary of Savings by Children',
                                style: {
                                    margin: '10px 100px 0 0' // center it
                                }
                            },
                            subtitle: {
                                text: 'Vidyodaya',
                                style: {
                                    margin: '0 100px 0 0' // center it
                                }
                            },
                            xAxis: [{}],
                            yAxis: [{
                                title: {
                                    text: 'Rs.'
                                },
                                labels: {
                                    formatter: function() {
                                        return this.value;
                                    }
                                }
                            }],
                            tooltip: {
                                formatter: function() {
                                    return '<b>'+ this.series.name +'</b><br/>'+
                                        'Rs.'+ this.y;
                                }
                            },
                            legend: {
                                layout: 'vertical',
                                style: {
                                    position:'absolute',
                                    left: 'auto',
                                    bottom: 'auto',
                                    right: 'auto',
                                    top: 'auto'
                                }
                            }
                            }
                        }
            ]
        });

Actually, I am having some problems with pie charts. Only the first pie is showing. So, if you can post your code where pie chart works fine, it will be helpful.

Thanks.

**israel.galan** · 24 Nov 2010 9:57 PM

Originally Posted by Manoharan

Actually, I am having some problems with pie charts. Only the first pie is showing. So, if you can post your code where pie chart works fine, it will be helpful.

Thanks.

Here's my code:

Code:

    var store = new Ext.data.JsonStore({
      url: MyJSON.json',
      fields: [{name:'COUNTRY', type:'string'}, {name:'COUNT', type:'int'}],
      autoLoad:true
    });
    chart = new Ext.ux.HighChart({
        store: store,
        series: [{
                type: 'pie',
                categorieField: 'COUNTRY',
                dataField: 'COUNT'
                }
        ],
        chartConfig: {
             chart:  {},
             title:  {text: 'Title'},
             legend: {layout: 'horizontal'},
             tooltip: {
                  formatter: function() {return '<b>'+ this.point.name +'</b>: '+ this.y, '+Math.round(this.percentage,1)+' %';}
             },                        
             plotOptions: {
                   pie: {
                          allowPointSelect: true,
                          cursor: 'pointer'
                   }
            }
         }    
    });

**Manoharan** · 25 Nov 2010 1:25 AM

While exporting a line graph, there is a problem. The adapter generates the graph fine, but while exporting it into a jpg file, the x-axis values are replaced by 0, 1 and 2, instead of the values generated in the store i.e., membername. The code is given below :

Code:

                        {
                        xtype: 'highchart',
                         store : new Ext.data.Store({
                            proxy: new Ext.data.HttpProxy({
                                url: 'php/membersummary.php'
                            }),
                            reader: new Ext.data.JsonReader({
                                root:'rows'
                                }, [
                                     {name:'membername', type:'string'},
                                     {name:'deposittotal', type:'float'},
                                     {name:'withdrawntotal', type:'float'},
                                     {name:'balance', type:'float'}
                                ]),
                               autoLoad:true
                         }),
                        series: [
                            {
                                type: 'column',
                                name: 'Balance',
                                dataIndex: 'balance'
                            },
                            {
                                name: 'Deposited',
                                dataIndex: 'deposittotal'
                            },
                            {
                                name: 'Withdrawn',
                                dataIndex: 'withdrawntotal'
                            }
                        ],
                        xField: 'membername',
                        chartConfig: {
                            chart: {
                                defaultSeriesType: 'line',
                                zoomType:'x',
                                margin: [50, 50, 60, 80]
                            },
                            title: {
                                text: 'Summary of Savings by Children',
                                style: {
                                    margin: '10px 100px 0 0'
                                }
                            },
                            subtitle: {
                                text: 'Vidyodaya',
                                style: {
                                    margin: '0 100px 0 0'
                                }
                            },
                            xAxis: [{}],
                            yAxis: [{
                                title: {
                                    text: 'Rs.'
                                },
                                labels: {
                                    formatter: function() {
                                        return this.value;
                                    }
                                }
                            }],
                            tooltip: {
                                formatter: function() {
                                    return '<b>'+ this.series.name +'</b><br/>'+
                                        'Rs.'+ this.y;
                                }
                            },
                            legend: {
                                layout: 'horizontal',
                                style: {
                                    position:'absolute',
                                    left: 'auto',
                                    bottom: 'auto',
                                    right: 'auto',
                                    top: 'auto'
                                }
                            }
                            }
                        }

Can someone help please ? The image is attached for your information.

**Manoharan** · 25 Nov 2010 1:35 AM

I have a curious problem.

In my pie chart, the legends overlap each other when I see the chart in the screen. But, when I export it, the saved file displays the legends properly.

Attaching both the images.

The code is given below :

Code:

                {
                        xtype: 'highchart',
                        store : new Ext.data.Store({
                            proxy: new Ext.data.HttpProxy({
                               url: 'php/membersummary.php'
                            }),
                            reader: new Ext.data.JsonReader({
                                root:'rows'
                                }, [
                                   {name:'membername', type:'string'},
                                   {name:'deposittotal', type:'float'}
                            ]),
                            autoLoad:true
                        }),
                        series: [{
                                type: 'pie',
                                name: 'Savings',
                                categorieField:'membername',
                                dataField:'deposittotal'
                            }
                        ],
                        chartConfig: {
                            chart: {
                                margin: [50, 50, 60, 80]
                            },
                            title: {
                                text: 'Summary of Savings by Children',
                                style: {
                                    margin: '10px 100px 0 0'
                                }
                            },
                            subtitle: {
                                text: 'Vidyodaya',
                                style: {
                                    margin: '0 100px 0 0'
                                }
                            },
                            tooltip: {
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b><br/>'+
                                        'Rs.'+ this.y;
                                }
                            },
                    plotArea: {
                     shadow: null,
                     borderWidth: null,
                     backgroundColor: null
                    },
                        legend: {
                            layout: 'horizontal',
                            style: {
                        position: 'absolute',
                                left: 'auto',
                                bottom: 'auto',
                                right: 'auto',
                                top: 'auto'
                            }
                        },
                    plotOptions: {
                     pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                           enabled: true,
                           color: '#000000',
                           connectorColor: '#000000',
                           formatter: function() {
                                   return '<b>'+ this.point.name +'</b>';
                           }
                        },
                        showInLegend:true
                     }
                  }
               }
          }

Can someone help please?

**fabads** · 26 Nov 2010 11:13 PM

Why I cannot set my yAxis max value ?

If I use

PHP Code:


this.hcDay.chartConfig.yAxis[0].max = 3000;

it's working, but if i affect a variable like in the example below, the max seems to be set to 0 (and it's not true because the alert give me the good value)

PHP Code:


this.storeDay.on('load', function(store, rec, options){       

            var seriesStatus = this.storeDay.reader.jsonData.message.split(";");

            var series = [];

                                  var mymax = 0;

            for (var i = 0; i < seriesStatus.length; i++) {

                var serie = seriesStatus[i].split(",");

                var dt = new Date(serie[0]);

                

                series.push({yField: 'w' + (i+1), xField: 't', 

                    name: dt.format('l d F Y') + ' / ' + serie[1] + 

                    ' EUR / Total: ' + serie[2] + ' Wh / Min: </text>' + serie[3] + ' Wh / Max: ' + serie[4] + ' Wh / Avg: ' + serie[5] + ' Wh', color: colors[i]}); 

                

                if (serie[7]*1 > mymax) {

                    mymax = serie[7]*1;

                }

            }

                                  alert(mymax);

            this.hcDay.chartConfig.yAxis[0].max = mymax;

            this.hcDay.addSeries(series, false);    

        },this);

**ToddJB** · 27 Nov 2010 4:08 PM

I can't get a basic chart to work with a jsonStore. I get an error 'too much recursion' line 81 adapter-extjs.js
Thx,
Todd

Code:

Code:

  Ext.onReady(function(){

     var revenueJson = new Ext.data.JsonStore({
        fields: ['month','revenue'],
        data: [{"month":"MAY-08","revenue":"456"},{"month":"JUN-08","revenue":"509"},{"month":"JUL-08","revenue":"356"},
            {"month":"AUG-08","revenue":"459"}],
        autoLoad: true
    })  // End Json Store

   var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      defaultSeriesType: 'line',
      zoomType: 'x'
    },
    store: revenueJson,
    series: [{
        name: 'Revenue',
        yField: 'revenue'
    }],
    xField: 'month'
  });  // End chart

});  // End OnReady

**Manoharan** · 27 Nov 2010 5:33 PM

Hi ToddJB,

When I tried your code, it worked and it displayed a graph. So, problem may be with the adapter file?

**ralphmyers420** · 28 Nov 2010 6:48 AM

Has anyone tried to use the adapter with Highcharts 2.1? I know its only been out for a couple of days, but it is supposed to fix some bugs that I've been having (huge memory usage and flickering/blinking graphs).
Thanks

**ToddJB** · 28 Nov 2010 7:16 AM

Thanks, I'm using v. 0.4 of the adapter and Ext.ux.HighChart.js from the first page of this thread. High Charts version is 2.0.5.

Here's my html:

Code:

        <!-- ExtJs Libraries and CSS -->
          <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
          <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"> </script>
          <script type="text/javascript" src="../extjs/ext-all.js"> </script>
        <!-- ExtJS-Highcharts Stuff-->
          <script type="text/javascript" src="charts/adapter-extjs.js"></script>
          <script type="text/javascript" src="charts/highcharts.src.js"></script>
          <script type="text/javascript" src="charts/Ext.ux.HighChart.js"></script>
                  <!-- Page specific js -->
          <script type="text/javascript" src="js/test_chart3.js"> </script>

Highcharts adapter and plugin for ExtJS

Thread Tools

Search Thread

Display

Problems while exporting

Problems while exporting

Legends in pie chart

Legends in pie chart

Highcharts 2.1

Highcharts 2.1