Highcharts adapter and plugin for ExtJS

[soulgen]

LOL

Do I ask for a wrong thing? Or I just made incorrect term?

Sorry for making you misunderstanding, but I mean I want the other members to post the solution plus its example codes, so I am not misperception.

[ralphmyers420]

I'm using HighCharts pretty sucessfully when I have a known (static) set of data. What I need is to be able to load the data dynamically according to a user's input.
My normal method of getting user data is:
ComboBox choice -> DataStore.load -> PHP script that takes the combobox data as an input to perform a MySQL SELECT statement. The script then formats the output as a JSON object and passes it back to the Ext JS framework.
Is it possible to do this same thing, but take the JSON object that is returned and use it as the JSON input into a chart?
Any help on this would be fantastic.
Thanks

[buz]

I've been working on an implementation with a Store. I've been on a small vacation so havent completed it yet. I hopefully will complete the extension today/tomorrow.

Daniël

[tonedeaf]

Will the Highcharts adapter work with ext-core? Don't need the ux.HighchartPanel, just the adapter with ext-core as the base library.

[buz]

Sure, the adapter-extjs.js is only required to make the charts work. The Ext.ux.HighchartPanel is only for convenience.

When using the adapter without the panel just use:

        <!-- ExtJS includes -->
        <script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-3.1.1/ext-all-debug.js"></script>
        <link rel="stylesheet" type="text/css" href="ext-3.1.1/resources/css/ext-all.css" />

        <!-- ExtJS adapter for Highcharts -->
        <script type="text/javascript" src="adapter-extjs.js"></script>

        <!-- Highcharts includes -->
        <script type="text/javascript" src="highcharts.src.js"></script>
        <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->

After this you can use all samples used at highcharts.com (See the scatter example in de demo files)

[buz]

Allright, i've uploaded a simple " demo " of the new flexible (Ext.data.Store + Highcharts) version. I've only tested this with basic data and not with things like a piechart. Lets say it is in an Alpha stage (Tested in FireFox/Chrome only).

Row-editor (Same as the examples but uses Ext.ux.ChartPanel)

ExtJS Visits/Views (Using Ext.data.JsonStore)

Just let me know what you think and report the bugs .

[tonedeaf]

Sure, the adapter-extjs.js is only required to make the charts work. The Ext.ux.HighchartPanel is only for convenience.

When using the adapter without the panel just use:

        <!-- ExtJS includes -->
        <script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-3.1.1/ext-all-debug.js"></script>
        <link rel="stylesheet" type="text/css" href="ext-3.1.1/resources/css/ext-all.css" />

        <!-- ExtJS adapter for Highcharts -->
        <script type="text/javascript" src="adapter-extjs.js"></script>

        <!-- Highcharts includes -->
        <script type="text/javascript" src="highcharts.src.js"></script>
        <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->

After this you can use all samples used at highcharts.com (See the scatter example in de demo files)

You have included ext-all-debug.js which I'm trying to replace with ext-core.

Can the ext-all-debug (or ext-all.js) be replaced with ext-core (if I don't want to use the HighChartsPanel ux) for displaying just the charts in a div?

I think the answer is yes, just need some confirmation before I start using it in my project.

[buz]

It should work with the core too. The required classes (Like Ext.Element and Ext.Observable) are in the core lib.

So it should be no problem, but I did not test it yet.

[talha06]

Hi everyone,

First of all I want to learn that can I use this extension with data from DB? If I can, here's my configuration; can someone help me to explore my mistake :

Ext.onReady(function() {
			var chartRecord = new Ext.data.Record.create([{
			    name: 'sayi',
			    type: 'int',
			    allowBlank: false
			}]);
			var chartStore = new Ext.data.JsonStore({
				record : chartRecord,
				fields : [{		
					name : 'sayi'
				}],
				url : 'chartStoreDoldur',
				//autoDestroy : true,
				autoLoad : true,
				root : 'data',
				idProperty : 'sayi'
			});
			Ext.override(Ext.data.Record, {
		        getJson: function () {
		            return Ext.util.JSON.encode(Ext.apply(this.data));
		        }
		    });
		    
			var data;
			Ext.Ajax.request({
				url : 'chartStoreDoldur',
				method : 'GET',
				//success : function(response, options) {
				//	data = eval("(" + response.responseText + ")");
				//}  
				success : function(result, request) {
					data = result.responseText;
				}
			});      
			
			var highPanel = new Ext.ux.HighchartPanelJson({
				renderTo : document.body,
				frame : true,
				title : 'Personel Yaş Dağılım Grafiği',
				layout : 'fit',
				border : true,
				id : 'myChart',
				chartConfig: {
                    chart: {
                        defaultSeriesType: 'spline'
                    },
                    title: {
                        text: 'Personel Yaş Dağılımı'
                    },
                    subtitle: {
                        text: 'Source: google.com'                        
                    },
                    xAxis: {
                        categories: ['15-20', '20-25', '25-30', '35-40', '40-45', '45+'],
                        title: {
                            text: 'Yaş Aralıkları'
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Kişi Sayısı'
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>' + this.x +'</b> aralığında <br/><b>'+
                                							this.y + '</b> kişi var.';
                        }
                    },
                    legend: {
                        enabled : true
                    },
                    series: [
                        {
                            name: 'Kişi Sayısı',
                            //data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                            //dataURL : 'chartStoreDoldur',
                            data : chartStore
                        }
                    ]
                }
			});

The data that I take from chartStore servlet is like this : (copy&paste from Firebug)

{"data":[{"sayi":2},{"sayi":17},{"sayi":2},{"sayi":2},{"sayi":3},{"sayi":3},{"sayi":0}]}

Thanx in advance,
With regards,
Talha

[ralphmyers420]

@Buz
This looks great. Is it possible to get the JsonStore to work with a chart like the 'line-time-series' example?
Thanks