PDA

View Full Version : Highcharts adapter and plugin for ExtJS



Pages : [1] 2

buz
6 Mar 2010, 7:17 AM
Hello,

Since many others are asking for this plugin, i'm posting the plugin and adapter for highcharts here.

For people who don't know Highcharts (http://www.highcharts.com):
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.


Demo

Export Sample: http://www.jsfiddle.net/AMx6r/114/
Column fix: http://www.jsfiddle.net/AMx6r/115/





Regards, Daniël


[Last update 09-11-2010: Highcharts 2+ required!]


* 09-11-2010
* Version 2.+
*
* 08-06-2010
* Fixed the refresh bug. (Do not render if chart is not ready yet)
*
* 28-04-2010
* + Added class: Ext.ux.HighChart.Serie, Ext.ux.HighChart.LineSerie, Ext.ux.HighChart.PieSerie, etc..
* - Fixed: Wait for the panel to be resized to its correct size (Instead of 0,0) after that create the chart.
*
* 19-04-2010
* - Fixed: Series keep hidden after resize.
* + bindComponent - Fixes the issue with the fitlayout.
* + setTitle, setSubTitle - Change the title/subtitle of the chart
* + addSeries - Add new series to the chart

mitchellsimoens
6 Mar 2010, 2:55 PM
First impression was looks good.

Second was I like the tool tip that goes up or down with the actual chart!

meroy
6 Mar 2010, 3:59 PM
This is very nice. Thank you.

mystix
6 Mar 2010, 8:41 PM
sweet =D>

spotted one bug though: in the windowed chart, the tip doesn't get updated properly (i.e. it appears to be "stuck" once you're past a certain point) when the mouse cursor moves horizontally across the the, say, 20k line.

Scorpie
9 Mar 2010, 12:44 AM
Nice work!

wki01
9 Mar 2010, 6:28 AM
Is it possible to read data from a JsonStore?
Someone has to put a small example here in the forum?

Thank you very much

leonardb
9 Mar 2010, 7:10 AM
Hitting a problem with the current implementation of the renderChart method in Ext.ux.HighchartPanel.js

Hoping someone has an idea of how to fix the behavior.

Use case:
Create base line graph with 1 plot.
Add new series to graph on button click.
resize graph.
Result, 2nd series is missing as the renderChart method discards the existing chart and reloads the initial config.

This is of course a bit of an issue if you want to have dynamic graphs in re-sizable windows or panels.

Example (replaces line-basic.js in the examples):


Ext.onReady(function(){

var graphWin = new Ext.Window({
title: 'Resizeable Graph Window',
resizeable: true,
width: 800,
height: 450,
items: [
{
xtype: 'button',
text: 'Add line',
handler: function(){
var add = {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
};
Ext.getCmp('thechart').chart.addSeries(add,true);
}
},
new Ext.ux.HighchartPanel({
titleCollapse: true,
layout:'fit',
border: true,
id: 'thechart',
chartConfig: {
chart: {
id: 'thechart',
defaultSeriesType: 'line',
margin: [50, 150, 60, 80]
},
title: {
text: 'Monthly Average Temperature',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Source: WorldClimate.com',
style: {
margin: '0 100px 0 0' // center it
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title: {
text: 'Month'
}
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [
{
value: 0,
width: 1,
color: '#808080'
}
]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
},
series: [
{
name: 'Tokyo',
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]
}
]
}
})
]
});
graphWin.show();
});

buz
9 Mar 2010, 9:20 AM
I have created a simple fix for this problem. This will fix the problem of re-rendering the chart but only when the panel is not in a fitlayout. The content of the panel (the chart) wont resize. The highcharts developers should develop a function that can handle onResize.



/**
* See http://www.extjs.com/forum/showthread.php?t=93669
*/
Ext.ns('Ext.ux');

Ext.ux.HighchartPanel = Ext.extend(Ext.Panel, {

/**
* Chart object
*/
//chart: null,
width: this.width || 600, //width should be greater then height, 2x works well
height: this.height || 300,

initComponent: function() {
this.on('afterlayout', this.renderChart, this);

Ext.ux.HighchartPanel.superclass.initComponent.call(this);
},

/**
* Renders the chart
*/
renderChart: function() {
/**
* This will recreate the chart when the layout has changed.
* The highchart lib should have functions like resize(w,h).
* since it doesnt have these functions yet, we have to do it this
* dirty way.
*/
//this.removeChart();
if (this.chart) this.chart.calculatePositions()
else {
var currConfig = this.chartConfig;

Ext.apply(currConfig.chart, {
renderTo: this.body.dom
});

this.chart = new Highcharts.Chart(currConfig);

// In case of a window
if (this.ownerCt){
this.ownerCt.on('move', function(){
this.chart.calculatePositions()
},
this);
}
}
},

removeChart: function() {
if (this.chart) {
this.chart.remove();
this.chart = null;
}
}

destroy: function() {
if(this.chart) {
this.chart.options.chart.renderTo = null;
delete this.chart;
}

Ext.ux.HighchartPanel.superclass.destroy.call(this);
}

});
And you need to add this to the Highcharts.chart class. at +/- line 1500


function calculatePositions(){
position = updatePosition(container)
}

And add this at line 4050


chart.calculatePositions = calculatePositions

Hopefully this will be added to the lib in 1.2.4

I will continue development of a version that can handle resizing and moving of objects.

leonardb
9 Mar 2010, 10:39 AM
Thanks @buz, far more efficient than what I was doing in copying series to temp location and re-adding them to the config :-P

One bug, need to add

chart.calculatePositions = calculatePositions;
to the API methods in highcharts.src.js around line 3985 to expose the method. I have multiple graphs on page and was erroring out without this.

Leonard

leonardb
9 Mar 2010, 4:08 PM
@buz

Well, it seems the fix prevents the redraw of the graph, but unfortunately that does not solve my problem.

I've opted to go with the shallow copy of the series and re-applying them to the new graph as I need the graphs to resize inside the layout:'fit' containers we use.

I'm sure there has got to be a better way of doing this, but as you've previously commented and I discovered there is no mechanism in highcharts for resizing a rendered chart.

For anyone else wanting to do this, the code I'm using below. Caveat. You my be defining unique Ids for all Series.



/**
* See http://www.extjs.com/forum/showthread.php?t=93669
*/
Ext.ns('Ext.ux');

Ext.ux.HighchartPanel = Ext.extend(Ext.Panel, {

/**
* Chart object
*/
//chart: null,

initComponent: function() {
this.on('afterlayout', this.renderChart, this);

Ext.ux.HighchartPanel.superclass.initComponent.call(this);
},
/**
* Hold a copy of series objects for re-adding after re-rendering
*/
backupSeries: [],
/**
* Renders the chart
*/
renderChart: function() {
/**
* Create a somewhat limited copy of existing series data
* for re-applying after re-rendering
*/
if (undefined != this.chart) {
//console.log('this.chart',this.chart);
this.backupSeries = [];
for (var i = 0, len = this.chart.series.length; i < len; i++) {
var data = [], s = this.chart.series[i];
for (var c = 0, dlen = s.data.length; c < dlen; c++) {
data.push([s.data[c].x,s.data[c].y]);
}
var opt = {id:'',name:s.name,data:data};
if (typeof s.options != undefined && typeof s.options.id != undefined) opt.id = s.options.id;
if (typeof s.options != undefined) Ext.apply(opt.options,s.options);
if (typeof s.color != undefined) opt.color = s.color;
if (typeof s.selected != undefined) opt.selected = (s.selected) ? true:false;
if (typeof s.type != undefined) opt.type = s.type;
if (typeof s.visible != undefined) opt.visible = (s.visible) ? true:false;
if (typeof s.xAxis != undefined) Ext.apply(opt.xAxis, s.xAxis);
if (typeof s.yAxis != undefined) Ext.apply(opt.yAxis,s.yAxis);
this.backupSeries.push(opt);
}
}

/**
* This will recreate the chart when the layout has changed.
* The highchart lib should have functions like resize(w,h).
* since it doesnt have these functions yet, we have to do it this
* dirty way.
*/
this.removeChart();

var currConfig = this.chartConfig;

Ext.apply(currConfig.chart, {
renderTo: this.body.dom
// To add event to the chart place them in the chart config section
//,events: {
// beforerender: function(){
// alert('=beforeload')
// }
//}
});

this.chart = new Highcharts.Chart(currConfig);
//this.chart.showLoading();
this.getEl().mask('Building graph...','x-mask-loading');
// need to wait for chart to exist before adding series
(function(el,chart,bs){
if (bs.length > 0) {
for (var i=0;i<chart.series.length;i++) {
//remove series defined in default config
chart.get(chart.series[i].options.id).remove();
}
}
for (var i=0, l=bs.length;i<l;i++) {
chart.addSeries(bs[i]);
}
el.unmask();
}).defer(5,this, [this.getEl(),this.chart,this.backupSeries]);
},

removeChart: function() {
if (this.chart) {
this.chart.remove();
this.chart = null;
}
}
/*
destroy: function() {
if(this.chart) {
this.chart.options.chart.renderTo = null;
delete this.chart;
}

Ext.ux.HighchartPanel.superclass.destroy.call(this);
}
*/
});

Highcharts.Chart.prototype.remove = function () {

/**
* Clear certain attributes from the element
* @param {Object} d
*/
function purge(d) {
var a = d.attributes, i, l, n;
if (a) {
l = a.length-1;
for (i = l; i >= 0; i -= 1) {
n = a[i].name;
//if (typeof d[n] !== ‘object’) {
if (n == 'coords') {
//d.parentNode.removeChild(d);
d[n] = '0,0,0,0';
} else if (typeof d[n] != 'object') {
d[n] = null;
}
}
}
a = d.childNodes;
if (a) {
l = a.length;
for (i = 0; i < l; i += 1) {
purge(d.childNodes[i]);

}
}

}

// get the container element
var container = this.imagemap.parentNode;

// purge potential leaking attributes
purge(container);

// remove the HTML
container.innerHTML = '';
};

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

leonardb
10 Mar 2010, 8:02 AM
The following allows for the hideLoading() method of Chart to work correctly. There was no definition for opacity modifications in the animate: and the Highcharts passes a function in options.complete to remove the loading layer from display.



animate: function (el, params, options){
if (params.width!==undefined) {
Ext.get(el).setWidth(parseInt(params.width), true);
}
else if (params.height!==undefined) {
Ext.get(el).setHeight(parseInt(params.height), true);
}
else if (params.left!==undefined) {
Ext.get(el).setLeft(parseInt(params.left));
}
else if (params.opacity!==undefined) {
Ext.get(el).setOpacity(parseInt(params.opacity),true);
if (options.complete !== undefined && typeof options.complete == 'function'){
options.complete();
}
} else {
Ext.get(el).setTop(parseInt(params.top));
}
},

wemerson.januario
10 Mar 2010, 9:08 AM
Wonderfull

leonardb
11 Mar 2010, 10:44 AM
The attached contains an experimental replacement for Ext.ux.HighchartPanel.js using a Json Store for controlling the lines on a chart.

Also attached is an example file which can be dropped into the highcharts example folder

So instead of adding/removing series from the chart itself, you can add remove from the Json store. Again, requires that you use ids for all defined series and series you dynamically add.

I've only tested this with Chrome on Linux and line charts.

Comments/criticism/suggestions/improvements welcome

buz
11 Mar 2010, 3:34 PM
The attached contains an experimental replacement for Ext.ux.HighchartPanel.js using a Json Store for controlling the lines on a chart.

Also attached is an example file which can be dropped into the highcharts example folder

So instead of adding/removing series from the chart itself, you can add remove from the Json store. Again, requires that you use ids for all defined series and series you dynamically add.

I've only tested this with Chrome on Linux and line charts.

Comments/criticism/suggestions/improvements welcome

Nice work! I will continue development asap (now on a business trip)

The updatePosition function will be implemented in the 1.2.5 release (Yay). Now we only need a onContainerResize function. Maybe i'll try to create that. It's really needed to use with ExtJS.

leonardb
11 Mar 2010, 3:58 PM
Nice work! I will continue development asap (now on a business trip)

The updatePosition function will be implemented in the 1.2.5 release (Yay). Now we only need a onContainerResize function. Maybe i'll try to create that. It's really needed to use with ExtJS.

Sounds great. I've also posted to the HighCarts board asking about an issue with creating charts with an empty series array. This is critical when you want to handle the series adds/removes based on external logic or stores which do not exist when the chart is initially created. IE adding and removing plots to a base chart based on the actions of the user. EG showing a grid of "data" and then using user selected/deselected rows to add/remove series from chart. Very useful in case of doing visual comparisons of wide data sets.

I'll update when/if I get an answer to that.

Leonard

nathand
12 Mar 2010, 8:43 AM
Hopefully this helps:
http://highcharts.com/cases/empty-chart.htm

leonardb
12 Mar 2010, 9:40 AM
Hopefully this helps:
http://highcharts.com/cases/empty-chart.htm

Yep, it should.

buz
13 Mar 2010, 9:18 AM
I have updated the HighchartPanel to 1.2.5 (See 1st post). The highchart source is in the adapter.zip. The demo is also updated: click (http://www.i286.org/examples/).

The HighchartPanel will not redraw after being moved. Only when it is resized, but that can be disabled (For large data sets).

@option: redrawOnResize: false

leonardb
17 Mar 2010, 9:49 AM
Thanks @buz / Daniël,

I've been plugging away at the idea of actually using a Ext.data.JsonStore as the backend for the chart (as per earlier post).

I've made a few changes to your updated code, the whole resize thing was not working for me, and the copying is now handled by the store itself.

Attached is a new Ext.ux.HighchartPanelJson.js and demo files line-json.js and line-json.htm

The ux actually contains 2x ux. Ext.ux.ChartStore which is a mildly extend Ext.data.JsonStore (with some added methods), and the Ext.ux.HighchartPanelJson

The extension supports grouping of lines (using filter on the store), and auto-toolbar generation. This is useful when you want to be able to show groups of lines on a single chart using the same backing store.

The store itself handles all the adding/removing/updating of lines on the graph.

I've only really tested this with line and spline type charts.

I'd be interested to hear what others think about shifting all the handling to the store (ala grid type control) vs using the chart methods directly.

Leonard

christophe67
17 Mar 2010, 11:47 PM
Very nice plugin, but i'm very intterested to connect the chart with a data base like a grid have you any example.
thanks
Christophe

buz
18 Mar 2010, 2:13 AM
@leonard
Nice work.

Did you use my version with the 1.2.5 version of highcharts? That one should make the resizing/moving work. See the demo at http://www.i286.org/examples/index.html

Anyway, nice work. Good idea of creating a ChartStore, this is very useful for implementing many series. At the moment i work on a version that handles the chart as Ext.chart.Chart.


Very nice plugin, but i'm very intterested to connect the chart with a data base like a grid have you any example.
thanks
Christophe

I'm currently working on an extended version of the current HighchartPanel that will work the same as the Ext.chart.Chart. So you can bind series on columns instead of a new record. (Using HighchartPanelJson and Ext.ux.ChartStore).

Remy
18 Mar 2010, 2:52 AM
Very impressive guys=D>

leonardb
18 Mar 2010, 11:22 AM
@leonard
Nice work.

Did you use my version with the 1.2.5 version of highcharts? That one should make the resizing/moving work. See the demo at http://www.i286.org/examples/index.html

Anyway, nice work. Good idea of creating a ChartStore, this is very useful for implementing many series. At the moment i work on a version that handles the chart as Ext.chart.Chart.



I'm currently working on an extended version of the current HighchartPanel that will work the same as the Ext.chart.Chart. So you can bind series on columns instead of a new record. (Using HighchartPanelJson and Ext.ux.ChartStore).

Thanks @buz,

Yes, I used the newer version, but was still having some issues (maybe my code :-?) with getting clean resizing in nested fit layout in an app I'm working on;
----------- north region -----------
| chart |
----------------------------------
| grouping grid |
--------- center region -----------

What i have is a grid showing grouped and summarized data, when a row in a group is selected, a direct method is called to load detailed data based on row data from server and add it to the ChartStore (which adds it to the chart). then on row deselect the data is removed from the store. this all supports multiple rows selections within the same group.

The 'north' region is resizable, so the chart needs to follow any resize event automatically.
I found that with the new code you'd posted it was not resizing correctly. not sure why. What I did was re-work the way the resize is handled (see my last post of Ext.ux.HighchartPanelJson) to try and determine the actual visible area for chart display on load and then set the chart sizes before rendering, and to update the chart size on resize events of parent container.

I'm sure there's a better way to do this, I'm pretty new to ExtJS, and just hacking around.

The move to emulating Ext.chart.Chart API is definitely a good idea, and seems to be very similar/exactly what I've been trying to achieve. So I assume as part of this we'll be able to bind the chart to an Ext.data.(Store|JsonStore|ArrayStore|DirectStore)? Look forward to seeing the results.

Leonard

ipebaikbanget
19 Mar 2010, 11:07 AM
Nice work buz

sj137
22 Mar 2010, 9:25 AM
found a bug in IE8 with the demo page (http://www.i286.org/examples/index.html)




Highcharts.Chart.prototype.remove = function () {

/**
* Clear certain attributes from the element
* @param {Object} d
*/
function purge(d) {
var a = d.attributes, i, l, n;
if (a) {
l = a.length-1;
for (i = l; i >= 0; i -= 1) {
n = a[i].name;
//if (typeof d[n] !== ‘object’) {
if (n == 'coords') {
//d.parentNode.removeChild(d);
d[n] = '0,0,0,0';
} else if (typeof d[n] != 'object') {
d[n] = null; //<---------------------here... IE says "Could not get the align property"
}
}
}
a = d.childNodes;
if (a) {
l = a.length;
for (i = 0; i < l; i += 1) {
purge(d.childNodes[i]);

}
}

}





I used the build in debugger to inspect the objects and found that
the object d does have a property called align which is set to an empty string...

so very strange behaviour indeed...

PS highcharts looks great and well done you guys for integrating it with ext =D>

I've been using flot for a while but with ext3.x it's starting to give me problems...

so i look forward to using highcharts soon!! :D

keep up the good work, i'll see if i can find out what's going on with IE... >:)

sj137
22 Mar 2010, 9:44 AM
best solution i could find was wrapping the line with a try-catch...

denise
30 Mar 2010, 6:10 AM
I was wondering: has anyone had any success getting the ExtJS Highcharts to work successfully with IE7 or IE8?

I was getting the same error as a previous poster ('Could not get the align property') so I wrapped it in a try-catch clause as suggested. Now I'm getting a new error. The script debugger on IE8 is reporting "Error: 'null' is null or not an object" (highcharts.src.js, line 1105). From what I can tell, the cvs object returned by doc.getElementByID(cvs.id) is null: it can't retrieve the element it just created.

I am going to try and see if I can figure out how to get around this but I was wondering if anyone seen the same behavior or gotten it working?

(This is trying to get the index.html page that came with the adapter-examples.zip file to display in IE)

Thanks.

mitchellsimoens
30 Mar 2010, 6:16 AM
I was wondering: has anyone had any success getting the ExtJS Highcharts to work successfully with IE7 or IE8?

The example is working in my IE8. Only thing I can see wrong is not tooltip for the chart in the window unless I move the window then it will work.

denise
30 Mar 2010, 6:22 AM
Thanks Mitchell, I was afraid of that! :)

Actually I should clarify: if I skip the script error dialog windows the page eventually *does* show up and seems to work fine. Also if I disable script debugging and notification about script errors, the page shows up as well (everything seems to work fine) but a 'script error on page' icon shows up in the browser.

Are you getting the page without any script errors? If so then I probably have something wrong with my setup!

Thanks.

mitchellsimoens
30 Mar 2010, 6:23 AM
No I am getting the error but things seem to be working, assuming you move the window.

denise
30 Mar 2010, 9:30 AM
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
31 Mar 2010, 1:17 PM
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
2 Apr 2010, 8:29 AM
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
2 Apr 2010, 8:32 AM
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
3 Apr 2010, 12:06 AM
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
5 Apr 2010, 4:27 AM
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
5 Apr 2010, 7:43 PM
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
6 Apr 2010, 6:44 AM
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. =D>
With regards,
Talha

soulgen
6 Apr 2010, 7:46 PM
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
6 Apr 2010, 7:48 PM
I want the snippet codes, please.

lol

soulgen
6 Apr 2010, 9:03 PM
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
8 Apr 2010, 3:01 AM
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
8 Apr 2010, 11:16 PM
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
9 Apr 2010, 4:57 AM
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
9 Apr 2010, 5:04 AM
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
9 Apr 2010, 6:23 AM
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 (http://i286.org/examples/rowedit/row-editor.html) (Same as the examples but uses Ext.ux.ChartPanel)

ExtJS Visits/Views (http://i286.org/examples/test.html) (Using Ext.data.JsonStore)

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

tonedeaf
9 Apr 2010, 7:14 AM
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
9 Apr 2010, 7:59 AM
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
10 Apr 2010, 12:27 AM
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
12 Apr 2010, 6:24 AM
@Buz
This looks great. Is it possible to get the JsonStore to work with a chart like the 'line-time-series' example?
Thanks

buz
12 Apr 2010, 9:44 AM
@Buz
This looks great. Is it possible to get the JsonStore to work with a chart like the 'line-time-series' example?
Thanks

Sure. It will work fine. Only in a window it acts a little strange. I'll check that later.

Line-time-serie (With ArrayStore) (http://www.i286.org/examples/line-time.html)

christophe67
13 Apr 2010, 10:15 PM
hi Buz,

Your last update is very useful, this is very easy to use. Why we cannot have the data on the "xAxis categories", is this a bug or is comming in the next update.
Thanks

buz
13 Apr 2010, 11:25 PM
hi Buz,

Your last update is very useful, this is very easy to use. Why we cannot have the data on the "xAxis categories", is this a bug or is comming in the next update.
Thanks

It's comming in the next update.

talha06
13 Apr 2010, 11:34 PM
I'm taking this boring error. Please can somone help me to explore my mistake.. Here's my configuration for HighchartPanel:


this.events is undefined
var ce = this.events[eventName] || true; ext-all-debug.js (line 1231)


var publicChart = new Ext.ux.HighchartPanel({
renderTo : 'istatistikPanel',
id : 'publicChartId',
frame : true,
title : 'Rapor İstatistikleri',
layout : 'fit',
width : 800,
height : 400,
border : true,
iconCls : 'icon-chart',
chartConfig : {
chart: {
defaultSeriesType: 'line',
margin: [50, 150, 60, 80]
},
title: {
text: '<b>' + Ext.getCmp('myComboId').getValue() + ' Yılı Rapor İstatistikleri</b>',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Kaynak: akgunyazilim.com.tr',
style: {
margin: '0 100px 0 0' // center it
}
},
xAxis: {
categories: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
title: {
text: 'Aylar'
}
},
yAxis: {
title: {
text: 'Dosya Adeti'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x +'</b> ayında <b>'+
this.y + '</b> adet <br/><b>' + this.series.name + '</b> dosyası hazırlanılmış.';
}
},
legend: {
enabled : true,
layout: 'vertical',
style: {
left: '635px',
bottom: 'auto',
right: '-25px',
top: '100px'
}
},
series: [
{
name : 'Açık İhale',
dataURL : 'LoadChartStore?q=acik&y=2010' + Ext.getCmp('myComboId').getValue()
}, {
name : 'Doğrudan Temin',
dataURL : 'LoadChartStore?q=dogrudan&y=2010' + Ext.getCmp('myComboId').getValue()
}, {
name : 'Pazarlık Usulü',
dataURL : 'LoadChartStore?q=pazarlik&y=2010' + Ext.getCmp('myComboId').getValue()
}, {
name : 'Münferit Sözleşme',
dataURL : 'LoadChartStore?q=munferit&y=2010' + Ext.getCmp('myComboId').getValue()
}
]
}
});

Thanx in advcance,
Regards,
Talha

buz
14 Apr 2010, 12:34 AM
I'm taking this boring error. Please can somone help me to explore my mistake.. Here's my configuration for HighchartPanel:


this.events is undefined
var ce = this.events[eventName] || true; ext-all-debug.js (line 1231)
var publicChart = new Ext.ux.HighchartPanel({
renderTo : 'istatistikPanel',
id : 'publicChartId',
frame : true,
title : 'Rapor İstatistikleri',
layout : 'fit',
width : 800,
height : 400,
border : true,
iconCls : 'icon-chart',
chartConfig : {
chart: {
defaultSeriesType: 'line',
margin: [50, 150, 60, 80]
},
title: {
text: '<b>' + Ext.getCmp('myComboId').getValue() + ' Yılı Rapor İstatistikleri</b>',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Kaynak: akgunyazilim.com.tr',
style: {
margin: '0 100px 0 0' // center it
}
},
xAxis: {
categories: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
title: {
text: 'Aylar'
}
},
yAxis: {
title: {
text: 'Dosya Adeti'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x +'</b> ayında <b>'+
this.y + '</b> adet <br/><b>' + this.series.name + '</b> dosyası hazırlanılmış.';
}
},
legend: {
enabled : true,
layout: 'vertical',
style: {
left: '635px',
bottom: 'auto',
right: '-25px',
top: '100px'
}
},
series: [
{
name : 'Açık İhale',
dataURL : 'LoadChartStore?q=acik&y=2010' + Ext.getCmp('myComboId').getValue()
}, {
name : 'Doğrudan Temin',
dataURL : 'LoadChartStore?q=dogrudan&y=2010' + Ext.getCmp('myComboId').getValue()
}, {
name : 'Pazarlık Usulü',
dataURL : 'LoadChartStore?q=pazarlik&y=2010' + Ext.getCmp('myComboId').getValue()
}, {
name : 'Münferit Sözleşme',
dataURL : 'LoadChartStore?q=munferit&y=2010' + Ext.getCmp('myComboId').getValue()
}
]
}
});Thanx in advcance,
Regards,
Talha

I'm not having any issue when using your code. Do you have the latest version of the code? Check http://www.i286.org/examples/cases/talha06.html

Otherwise, please upload it somewhere so I can debug.

talha06
14 Apr 2010, 12:46 AM
@Daniël,

Thank you so much for your reply.. I'm using this code(yeah this's my current code) in a big project that uses Spring MVC Framework. Despite I added servlet's mapping configuration in .xml file, it doesn't work. Now I think there's a prevent towards to my servlet. I must solve this problem to make request from my servlet.

Again thank you so much for your interest and care.
With regards,
Talha

buergi
14 Apr 2010, 1:39 AM
I did the 2 fixes (try/catch & appendChild) to make it work under IE. Now after resizing, the browser tries to load an image 'null'. It doesn't throw an error, but the browser icon is running all the time.

My fix was to insert this line at the beginning of the purge function:



if (d == null) return;

buergi
14 Apr 2010, 1:42 AM
Does anyone use Highchart with Accordion?

Under IE I can collapse the panel, but after expanding I get the error "Invalid argument".

Any idea?

buz
14 Apr 2010, 1:59 AM
Does anyone use Highchart with Accordion?

Under IE I can collapse the panel, but after expanding I get the error "Invalid argument".

Any idea?

I have no problems with accordion and highcharts (in IE). Can you show us the code?

buergi
14 Apr 2010, 2:04 AM
I'm taking this boring error. Please can somone help me to explore my mistake.. Here's my configuration for HighchartPanel:


this.events is undefined
var ce = this.events[eventName] || true; ext-all-debug.js (line 1231)


var publicChart = new Ext.ux.HighchartPanel({
renderTo : 'istatistikPanel',
id : 'publicChartId',
frame : true,
title : 'Rapor İstatistikleri',
layout : 'fit',
width : 800,
height : 400,
border : true,
iconCls : 'icon-chart',
chartConfig : {
chart: {
defaultSeriesType: 'line',
margin: [50, 150, 60, 80]
},
title: {
text: '<b>' + Ext.getCmp('myComboId').getValue() + ' Yılı Rapor İstatistikleri</b>',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Kaynak: akgunyazilim.com.tr',
style: {
margin: '0 100px 0 0' // center it
}
},
xAxis: {
categories: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
title: {
text: 'Aylar'
}
},
yAxis: {
title: {
text: 'Dosya Adeti'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x +'</b> ayında <b>'+
this.y + '</b> adet <br/><b>' + this.series.name + '</b> dosyası hazırlanılmış.';
}
},
legend: {
enabled : true,
layout: 'vertical',
style: {
left: '635px',
bottom: 'auto',
right: '-25px',
top: '100px'
}
},
series: [
{
name : 'Açık İhale',
dataURL : 'LoadChartStore?q=acik&y=2010' + Ext.getCmp('myComboId').getValue()
}, {
name : 'Doğrudan Temin',
dataURL : 'LoadChartStore?q=dogrudan&y=2010' + Ext.getCmp('myComboId').getValue()
}, {
name : 'Pazarlık Usulü',
dataURL : 'LoadChartStore?q=pazarlik&y=2010' + Ext.getCmp('myComboId').getValue()
}, {
name : 'Münferit Sözleşme',
dataURL : 'LoadChartStore?q=munferit&y=2010' + Ext.getCmp('myComboId').getValue()
}
]
}
});

Thanx in advcance,
Regards,
Talha

I had the same issue. I wrapped the Highchart with a container and this works for me.

buergi
14 Apr 2010, 2:06 AM
I have no problems with accordion and highcharts (in IE). Can you show us the code?

Nevermind, I changed the layout to tabpanels.

thanks for your brilliant work!

ps. Do you have a timeframe for your next update about x-axis and json?

buz
14 Apr 2010, 3:08 AM
Hopefully next week. The xAxis categories in highcharts are not that flexible as the one in Ext.chart.Chart, but i'm having progress in the work i'm doing. Also the series will have the option to have xField and yField (Instead of dataIndex).

So you can set:


xAxis: {
field: 'column1'
style...
},
yAxis: {
field: 'column2'
style, formatter, etc..
},
series: [{
xField: 'column3',
yField: 'column4'
}]


This is the same way as the Ext.ux.Chart is handling the data in a cartesianchart.

leonardb
14 Apr 2010, 4:09 AM
Hi Talha,

Probably not a good idea to use the HighchartPanelJson any more. It was really just a test hack of an idea and should not be considered stable by any means.

The work @buz is doing now with the new Ext.ux.ChartPanel version should supersede this old hack and be far more stable and is headed in the right direction for a much better extension.

Leonard

ralphmyers420
14 Apr 2010, 4:11 AM
The Line-time-series is working very well with one last (hopefuly) issue.
When I try to use a remote php script to load my JsonStore, the chart doesn't load any of the data.
Using your example, I'm trying to change to store out to the following:
var store = new Ext.data.JsonStore
({
url : 'json.php',
autoLoad : false,
fields : ['point'],
root: 'data',
});

The output of json.php mirrors the data from your example. When I load the page and click the 'load data' button, I can see in FireBug that the php request returns the correct array, but the chart doesn't get updated. Am I missing something, or is it not possible to use a remotely loaded Json store?
I really appreciate all the help you're giving us all.
Thanks

prabhu_patil
14 Apr 2010, 5:21 AM
Works fine. Positioning of windows (chart.updatePosition and chart.container) issue been fixed in Highcharts new release version 1.2.5. Download new release (http://www.highcharts.com/download)

buz
14 Apr 2010, 11:39 PM
The Line-time-series is working very well with one last (hopefuly) issue.
When I try to use a remote php script to load my JsonStore, the chart doesn't load any of the data.
Using your example, I'm trying to change to store out to the following:
var store = new Ext.data.JsonStore
({
url : 'json.php',
autoLoad : false,
fields : ['point'],
root: 'data',
});

The output of json.php mirrors the data from your example. When I load the page and click the 'load data' button, I can see in FireBug that the php request returns the correct array, but the chart doesn't get updated. Am I missing something, or is it not possible to use a remotely loaded Json store?
I really appreciate all the help you're giving us all.
Thanks

It works for me. See here (http://www.i286.org/examples/test.html)

araiczyk
15 Apr 2010, 10:10 AM
Hi all, I'm new to ExtJs and to HighCharts also.

I have a working code, that creates a tab when a leaf of a tree is clicked. The tabs created are dynamic Ext.ux.HighchartPanel.
The thing is, that when I close a tab, I want to "destroy" the chart and stop updating it, this is what I don't know how to do (bold code).

One more question, when I add a new tab, the chart is not rendered, I have to resize the tab and then it shows up, what can this be?

Thanks in advance

Alejandro

var treeNodes;

getTreeNodes();

var tabPanel;

// Save the charts
var chartPanels = [];

// Save the last id fetched per namespace
var lastTraceId = [];

function createChart(namespace){
getTraces(null, namespace, createChartHandler);
}

function createChartHandler(data){
var traces = data.result.traces;
if (traces.size == 0)
return;
var traces_type = data.result.type;
var namespace = data.result.namespace;

var chartPanel = new Ext.ux.HighchartPanel({
iconCls:'chart',
title: namespace,
frame:true,
width:500,
height:300,
layout:'fit',
closable: true,
titleCollapse: true,
border: true,
chartConfig: {
chart: {
// renderTo: 'container',
defaultSeriesType: 'spline',
margin: [50, 150, 60, 80],

events: {
load: function() {

// set up the updating of the chart each second
//var series = this.series[0];
setInterval(function() {
getTraces(lastTraceId[namespace], namespace, updateChart);
}, 10000);
}
}
},
title: {
text: 'Live runtime data',
style: {
margin: '10px 100px 0 0' // center it
}
},
xAxis: {
type: 'datetime',
tickInterval: 'auto'
// tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ (this.series.name == "mean" ? "invocations: "+this.z : this.series.name) +'</b><br/>'+
Highcharts.dateFormat('%d-%m-%Y %H:%M:%S', this.x) +': '+ this.y;
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
},
// The series depends on the traces type
series: getSeries(namespace,traces,traces_type)
}
});

var new_tab = tabPanel.add(chartPanel);
new_tab.on('beforeclose', function(){
//chartPanels[this.title] = null;
this.chartConfig.chart.events.load = null;
});
tabPanel.activate(chartPanel);
//chartPanel.chart.redraw();

// TODO
chartPanels[namespace] = chartPanel;

}

function getSeries(namespace,traces,traces_type){
var result, i;
switch (traces_type){
case "STICKY":
var data = [];
for (i=0; i<traces.length; i++){
data[i] = {x: traces[i].timestamp,y:traces[i].value};
}
result =
[{
name: 'value',
data: data
}];
break;
// Interval Averaged
case "AVG":
// Prepare the data arrays
var i, data_mean = [], data_max = [], data_min = [];
for (i=0; i<traces.length; i++){
data_mean[i] = {x: traces[i].timestamp,y:traces[i].mean,z:traces[i].invocations};
data_max[i] = {x: traces[i].timestamp,y:traces[i].max};
data_min[i] = {x: traces[i].timestamp,y:traces[i].min};
}
result =
[{
name: 'mean',
data: data_mean
},
{
name: 'max',
data: data_max
},
{
name: 'min',
data: data_min
}];
break;
}
// Save the last trace id received
lastTraceId[namespace] = traces[i-1].uuid;
return result;
}

function getTraces(uuid, namespace, handler){
var _req = '"'+namespace+'","'+uuid+'"';
var _resp = jsonCall("http://localhost:8080/tjrm-server/monitoringService", "getLive", _req, handler);
}

function updateChart(data){
var traces = data.result.traces;
if (traces.size == 0)
return;
var traces_type = data.result.type;
var namespace = data.result.namespace;
var chartPanel = chartPanels[namespace];
var i;
for (i=0; i<traces.length; i++){
if (traces_type == "AVG"){
chartPanel.chart.series[0].addPoint([traces[i].timestamp, traces[i].mean, traces[i].invocations], false, true);
chartPanel.chart.series[1].addPoint([traces[i].timestamp, traces[i].max], false, true);
chartPanel.chart.series[2].addPoint([traces[i].timestamp, traces[i].min], false, true);
}else if (traces_type == "STICKY"){
chartPanel.chart.series[0].addPoint([traces[i].timestamp, traces[i].value], false, true);
}
}
lastTraceId[namespace] = traces[i-1].uuid;
// Redraw the chart when all the new points are added
chartPanel.chart.redraw();
}

function formatDate(date){
return date.hours+":"+date.minutes+":"+date.seconds
}

function doHandleGetNamespacesTreeResponse(data){
treeNodes = data.result[0].children;

// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
tabPanel =
new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
enableTabScroll:true,
resizeTabs:false,
defaults: {autoScroll:true},
activeTab: 0, // first tab initially active
items: [{
contentEl: 'center1',
title: 'Welcome',
autoScroll: true
}]
});

Ext.onReady(function(){


// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
}
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
}, {
region: 'east',
title: 'East Side',
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 1, // second tab initially active
tabPosition: 'bottom',
items: [{
html: '<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll: true
}, new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
})
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: treeNodes
}),
lines: false,
singleExpand: true,
useArrows: true,
listeners: {
click: function(n) {
//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
if (n.attributes.leaf==true)
createChart(n.attributes.namespace);
}
}
},

tabPanel]
});
});


}

//*******************************************************
var _id = 1;

function jsonCall(url, method, req, handleFunction) {

if (req == undefined || req == null)
var req = '';

// create the json message
var jsonRequest = '{ "method" : "' + method + '", "params" : [ ' + req.replace(/\\n/g, '') + ' ], "id" : "' + _id + '" }';
_id++;

// create an HTTP request object
var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if ( ! xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
if ( ! xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp = false;
}
}

// do the request
xmlhttp.open('POST', url, true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
var jsonResponse = eval('(' + xmlhttp.responseText + ')');
handleFunction(jsonResponse);
};
};
xmlhttp.send(jsonRequest);
}

function getTreeNodes(){
var _resp = jsonCall("http://localhost:8080/tjrm-server/monitoringService", "getNamespacesTree", "", doHandleGetNamespacesTreeResponse);
}

stephen.friedrich
15 Apr 2010, 1:45 PM
Initially I was a little confused about what the "adapter" is for.
Only by browsing the Highcharts sources, I learnt about its plugable base lib.
I am using ExtJS together with jQuery anyway, so I don't need any custom adapter, right?

Another small issue: Could you provide an Ext.ux.HighchartsContainer.js, too (without duplicating (too much) code)?
I don't need any feature of Panel in my charts and would like to avoid the additional markup.

buergi
16 Apr 2010, 6:33 AM
Am I the only one with this effect:

I am setting new categories like this:


Ext.getCmp('highchart').xAxis[0].setCategories(['foo', 'bar']);

this works until I resize my window. Then I got the categories from chartConfig.xAxis.categories again.

This is my workaround which I had to add to the first line:


Ext.getCmp('highchart').chartConfig.xAxis.categories = ['foo', 'bar']


Is this an Ext adapter bug or a highchart bug?

buz
16 Apr 2010, 8:17 AM
It's a HighchartPanel bug. Since that one doesn't use a Store to update everything. The new version listens to events fired by a Ext.data.Store

I've updated the first post, containing a new Ext.ux.HighChart.zip file (Demo included, test.html) This new HighChart ux requires to have a Ext.data.Store with the data. Also it is not a Ext.Panel anymore, it's a Ext.BoxComponent.

This version doesnt have the onResize function yet.

Configuration:


xtype: 'highchart',
id: 'thechart',
store: store,
/**
* Add the serie, set the xField/yField
* yField is required
*/
series: [
{
type: 'column',
name: 'Views',
yField: 'views'
},
{
name: 'Visits',
yField: 'visits'
}
],
/**
* Set the categories (xAxis)
*/
xField: 'name',
/**
* Default chart configuration (Style settings)
*/
chartConfig: {
chart: {
defaultSeriesType: 'line',
margin: [50, 150, 60, 80]
},
title: {
text: 'ExtJS Visits',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Source: extjs.com',
style: {
margin: '0 100px 0 0' // center it
}
},
xAxis: [{}],
yAxis: {
title: {
text: ''
},
labels: {
formatter: function() {
return this.value / 1000 +'k';
}
}
},
tooltip: {
formatter: function() {
/**
* this.point.data.name to access record data (Not the record, only the data!)
*/
return '<b>'+ this.series.name +'</b><br/>'+
this.point.data.name +': '+ this.y +' views';
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
}
}

MeeMMeeM
16 Apr 2010, 8:25 AM
Hi,

This is quite a cool idea, I have been having lots of problems with YUI charts and flash objects and this looks like it could solve them.

I was wondering if there was a click event for a point on the line and bar charts? I've had a quick look but could'nt seem to see it any where.

Kind regards

MeeMMeeM

buz
16 Apr 2010, 8:44 AM
Hi,

This is quite a cool idea, I have been having lots of problems with YUI charts and flash objects and this looks like it could solve them.

I was wondering if there was a click event for a point on the line and bar charts? I've had a quick look but could'nt seem to see it any where.

Kind regards

MeeMMeeM

Yes, thats possible http://highcharts.com/demo/?example=line-ajax&theme=default

MeeMMeeM
17 Apr 2010, 1:31 AM
Brilliant : )

ganchsg
17 Apr 2010, 7:37 PM
for new HighChart ... can it add one more property "yColorField" to support different color for each point

buergi
18 Apr 2010, 9:36 AM
This version doesnt have the onResize function yet.

If you're going to implement it, why not include the setCategories in Ext.ux.HighChart, so the changed categories stays after resize?


About the store:
I want to add a new serie. I did that with chart.addSeries. I don't see a way to do that with store.loadData(json, true). (Also 'fields' should be modified, which is a readonly prop).

Only way is to bind a new store. right?

buz
18 Apr 2010, 12:17 PM
If you're going to implement it, why not include the setCategories in Ext.ux.HighChart, so the changed categories stays after resize?

Thats implemented in latest the version (See http://www.i286.org/examples/test.html)



About the store:
I want to add a new serie. I did that with chart.addSeries. I don't see a way to do that with store.loadData(json, true). (Also 'fields' should be modified, which is a readonly prop).

Only way is to bind a new store. right?

Yes, you cannot add new fields in a store. So you need to bind a new store to the chart.

I will add the basic chart functions to the ext.ux too ( addSerie, etc.. )

buergi
19 Apr 2010, 12:34 AM
Thanks!

At the moment, I have to add the series like that to make it work:



var arr = new Array();
for (var x = 0; x < data.length; x++){
arr.push({
name: data[x],
dataIndex: data[x],
data: []
});
}

chart.chartConfig.series = arr;


With addSeries it gets lost after resize.


Another things:
I have my highchart with layout 'fit' in a tabpanel. After rendering the size is not fitted to the panel. I have to do a onContainerResize() to fit it. And after changing the tab and going back the chart is gone, I have to do a resize again to get it back.

buergi
19 Apr 2010, 12:45 AM
btw guys: I am using the 1.2.6 prerelease and the latest version from buzz. Now it works without any fixes in IE...

buz
19 Apr 2010, 3:53 AM
[QUOTE=buergi;459077]Thanks!

At the moment, I have to add the series like that to make it work:



var arr = new Array();
for (var x = 0; x < data.length; x++){
arr.push({
name: data[x],
dataIndex: data[x],
data: []
});
}

chart.chartConfig.series = arr;


With addSeries it gets lost after resize.

Add this to the Ext.ux.HighChart


/**
* Add one or more series to the chart
* @param {Array} series An array of series
*/
addSeries: function(series){
if (this.chart){
for (var i=0;i<series.length;i++){
var serie = series[i];
if (!serie.data){
serie.data = [];
}
this.chart.addSeries(serie,false)
}
this.chartConfig.series = this.chartConfig.series.concat(series);
this.refresh();
} else
this.series = this.series.concat(series);
}


Daniël

MeeMMeeM
19 Apr 2010, 8:16 AM
Hi,

I have a few things that have been causing me trouble..

1. I wanted to dynamically change the charts title so created a function to do that and thought I would share it.



setTitle: function(newTitle) {
this.chart.titleLayer.div.firstChild.innerHTML = newTitle;
},
2. My chart is constantly being updated when a user selects an item from the list (this is the reason for the dynamic title), this leads me to binding and unbinding various stores. My chart sits in a normal ext panel in the centre of the screen but it does not resize itself accordingly when the panel does, I've seen the window example but was wondering if there was a way to do this within a panel?

3. I am slo looking for a nice way to render dates on the x-axis, at the moment they overlap, I was going to use the formatter to do something, but was wondering if people had any other ideas?

Keep up the good work people : )

MeeMMeeM

buergi
19 Apr 2010, 10:14 AM
My chart sits in a normal ext panel in the centre of the screen but it does not resize itself accordingly when the panel does, I've seen the window example but was wondering if there was a way to do this within a panel?

do you use the latest version from buz? I have a chart in my panel (layout 'fit') and I do this after rendering:


myChart.onContainerResize();


otherwise my chart is not extended to the whole panel.

buergi
19 Apr 2010, 10:18 AM
@buz: If you hide some lines and you resize, the selection gets lost (of course). Perhaps it would be an another way to copy all settings and inserting them in the new chart...

buz
19 Apr 2010, 12:38 PM
* Updates:
* 19-04-2010
* - Fixed: Series keep hidden after resize.
* + bindComponent - Fixes the issue with fitlayout.
* + setTitle, setSubTitle - Change the title/subtitle of the chart
* + addSeries - Add new series to the chart

And i did some small code optimizations.

MeeMMeeM
19 Apr 2010, 1:05 PM
Thanks buz, wondering if anyone has looked more at the feature of highlighting a single point on the chart?

buergi
19 Apr 2010, 11:33 PM
I would propose these two changes:



addSeries: function(series){
if (this.chart){
for (var i=0;i<series.length;i++){
var serie = series[i];
if (!serie.data){
serie.data = [];
}
this.chart.addSeries(serie,false)
}
this.chartConfig.series = this.chartConfig.series ? this.chartConfig.series.concat(series) : series;
this.refresh();
}
this.series = this.series ? this.series.concat(series) : series;
},

ralphmyers420
20 Apr 2010, 12:57 AM
It works for me. See here (http://www.i286.org/examples/test.html)


Is it possible to make this work with the zoomable time graph also?

MeeMMeeM
20 Apr 2010, 4:40 AM
I have a chart which will not have a store or series initially defined. They will be defined once another store has been loaded, I was wondering what the best way to do this was?

I attempted to use null but got errors and when I used a dummy store and [] series I got this.chart is undefined.

Any help is always appreciated, no doubt the answer is simple but it is evading me at this time!

Kind regards

MeeMMeeM

buergi
20 Apr 2010, 11:14 AM
I have a chart which will not have a store or series initially defined. They will be defined once another store has been loaded, I was wondering what the best way to do this was?

I attempted to use null but got errors and when I used a dummy store and [] series I got this.chart is undefined.

Any help is always appreciated, no doubt the answer is simple but it is evading me at this time!

Kind regards

MeeMMeeM

I have the same issue. I initialize my chart with an empty JSON-Store and series:[] and it works for me

buz
20 Apr 2010, 1:15 PM
I have a chart which will not have a store or series initially defined. They will be defined once another store has been loaded, I was wondering what the best way to do this was?

I attempted to use null but got errors and when I used a dummy store and [] series I got this.chart is undefined.

Any help is always appreciated, no doubt the answer is simple but it is evading me at this time!

Kind regards

MeeMMeeM

http://www.i286.org/examples/cases/empty.html#

Fixed in the latest version (See http://www.i286.org/examples/Ext.ux.HighChart.js )

MeeMMeeM
20 Apr 2010, 11:40 PM
http://www.i286.org/examples/cases/empty.html#

Fixed in the latest version (See http://www.i286.org/examples/Ext.ux.HighChart.js )

Wicked, thanks buz!

Sesshomurai
22 Apr 2010, 7:57 AM
Can I catch an event on a click on a bar in a chart or other? Is there a demo of this? (Sorry if I missed it)

buz
22 Apr 2010, 8:06 AM
Can I catch an event on a click on a bar in a chart or other? Is there a demo of this? (Sorry if I missed it)

Yes, see http://www.highcharts.com/demo/

xstegner
22 Apr 2010, 10:45 AM
I'm having an issue with rendering the chart panel within another panel. Since it's checking for ownerCt to decide if it needs to render, otherwise wait for the resize event, it doesn't get rendered until I manually call fireEvent('resize') on the panel. Maybe it should check if it's ownerCt is a window rather than just checking if it has an ownerCt?

buz
23 Apr 2010, 3:03 AM
New version, should fix the issue with rendering the chart in a different panel. http://www.i286.org/examples/Ext.ux.HighChart.js

ralphmyers420
23 Apr 2010, 4:09 AM
*(I've posted this question to the HighCharts forum as well)*

Do you know if it is possible to configure the time series zoomable chart to allow you to select all the way to the edge of the graph? If I select a point and drag outside of the box (or even to the very last point), I don't get any selection at all. As this happens even with the demo at highcharts.com, I've got a feeling that this is a highcharts bug. Any thoughts?

Also, is it possible to get the same json chart that you made (i286.org/examples/test.html) to work as a time series zoomable chart? (Not the exact same chart, but the same json calls)
Thanks

xstegner
23 Apr 2010, 5:56 AM
Any chance of updating the demos to use this version, or providing some documentation?

Edit: Nm I saw your download link on the previous page which included a demo.

lossendae
24 Apr 2010, 7:59 AM
Thanks for this great extension.
I've encountered an issue with setSubTitle and setTitle functions.
Firebug was telling me that this.chart.titleLayer.div is undefined .

To overcome (in my case the issue, i had to change the line to: this.chart.options.subtitle.text = title;

And it worked.

Any idea what the problem could be?

Another issue:

I want to use an area chart with a datetime type.

Any idea how can i update a dynamic chart so that the date render correctly with pointStart and pointInterval using an Ext Json Store?

buz
24 Apr 2010, 2:38 PM
*(I've posted this question to the HighCharts forum as well)*

Do you know if it is possible to configure the time series zoomable chart to allow you to select all the way to the edge of the graph? If I select a point and drag outside of the box (or even to the very last point), I don't get any selection at all. As this happens even with the demo at highcharts.com, I've got a feeling that this is a highcharts bug. Any thoughts?

It's a highcharts bug indeed.



Also, is it possible to get the same json chart that you made (i286.org/examples/test.html) to work as a time series zoomable chart? (Not the exact same chart, but the same json calls)
Thanks http://www.i286.org/examples/charts/time.html

Thanks for this great extension.
I've encountered an issue with setSubTitle and setTitle functions.
Firebug was telling me that this.chart.titleLayer.div is undefined .

To overcome (in my case the issue, i had to change the line to: this.chart.options.subtitle.text = title;

And it worked.

Any idea what the problem could be?


Fixed in the latest version. You called the function before the chart was rendered.

Another issue:

I want to use an area chart with a datetime type.

Any idea how can i update a dynamic chart so that the date render correctly with pointStart and pointInterval using an Ext Json Store?
You can read complete data set from the JsonStore. When sending the data add pointStart and pointInterval

JSON:


{
pointInterval: 1000,
pointStart: 1,
data:[{
point: 3
}, {point:...}]
}
Script


var ps = store.reader.jsonData.pointStart, pi = store.reader.jsonData.pointInterval;

chart.addSeries([{
yField: 'point',
pointStart: ps,
pointInterval: pi,
name: 'point'
}])
And to make it work, it think the easiest way is to override the onLoad function in the chart. Because you need it after the data has been loaded in the store, but before it has done an update.

Daniël

robin30
27 Apr 2010, 6:57 AM
hi all,

got a question.

i have a jsonstore:

var store = new Ext.data.JsonStore({
fields:['name', 'amount'],
url: 'bills/charts/data.json',
root: "Data"
});
store.load();

then i have this as my code for the pie chart.

var chart;
chart = new Ext.ux.HighchartPanel({
titleCollapse: true,
layout:'fit',
border: false,
chartConfig: {
chart: {
margin: [50, 200, 60, 170]

},

title: {

text: 'Browser market shares at a specific website, 2008'

},

plotArea: {

shadow: null,

borderWidth: null,

backgroundColor: null

},

tooltip: {

formatter: function() {

return '<b>'+ this.point.name +'</b>: '+ this.y +' %';

}

},

plotOptions: {

pie: {

allowPointSelect: true,

dataLabels: {

enabled: true,

formatter: function() {

if (this.y > 5) return this.point.name;

},

color: 'white',

style: {

font: '13px Trebuchet MS, Verdana, sans-serif'

}

}

}

},

legend: {

layout: 'vertical',

style: {

left: 'auto',

bottom: 'auto',

right: '50px',

top: '100px'

}

},

series: [{

type: 'pie',

name: 'Browser share',

data: {"Data": [{ "name":'Penelec', "amount": 36.50 },{ "name":'Dish', "amount": 50.00 }]},


//data: [3.40, 1.05, 2.90, 1.65, 1.35, 2.59, 1.39, 3.07, 2.82]
dataParser: function(data) {
// The real data are in the Results member
data = data.Data;
// Highcharts needs y, not qty
for (var i = 0; i < data.length; i++) {
data[i].y = parseFloat(data[i].amount);
}
return data;
}


}]


}
});
var win12= new Ext.Window({
title: 'Highchart and ExtJS',
width:800,
closeAction:'hide',
height:400,
modal:true,
layout: 'fit',
items: new Ext.TabPanel({
activeTab: 0,
items: [chart]
})

in series the data is like this

data: {"Data": [{ "name":'Penelec', "amount": 36.50 },{ "name":'Dish', "amount": 50.00 }]},

and this is exactly what i have when the store loads. but how do i get my json output where i typed

data: {"Data": [{ "name":'Penelec', "amount": 36.50 },{ "name":'Dish', "amount": 50.00 }]}

i hope i made it clear what my question is. don't know how else to ask.

any help is appreciated.

Regards,

robin30

buz
27 Apr 2010, 9:13 AM
@robin30,

You should use the new Ext.ux.HighChart (Without the panel)

See:
http://www.i286.org/examples/test.html and http://www.i286.org/examples/charts/time.html

This extension can handle the store. Just create a serie with yField pointing to 'amount'

robin30
27 Apr 2010, 9:46 AM
thanks for your reply, really appreciate it.

but i need a pie chart and not a column or line chart

i had it already working using the test.html.

thanks for your reply,

Regards,
robin30

lj2008
27 Apr 2010, 11:06 PM
very good,thank you for share

buergi
28 Apr 2010, 12:40 AM
@buz: When I open my panel, the chart is going to render without fitting the panelsize. After rendering, it is rendering again to match the panelsize.

I am asking myself, if this first rendering is necessary.

buz
28 Apr 2010, 1:05 AM
@buz: When I open my panel, the chart is going to render without fitting the panelsize. After rendering, it is rendering again to match the panelsize.

I am asking myself, if this first rendering is necessary.

Yes, I have the same problem, it's caused by the Ext.Panel. Thats why I've started implementing the update function.

The update function does a delayed call to the onContainerResize function (onContainerResize should be renamed to something like, draw/redraw) And in the afterRender call everything below "//Create the chart" replaced with this.update(); To make it work onContainerResize also needs to create the chart if rendered and resized, after that it can set the delay to 0.

Anyway, I'll update asap. Currently working on a new version which enables Pie series with the Ext.data.Store.

Daniël

PTG
28 Apr 2010, 3:23 AM
I have a chart with multiple Y axies, when I resize the panel, only the first Y axis values are visible, the others are gone.
Any idea why ?

buz
28 Apr 2010, 3:49 AM
I have a chart with multiple Y axies, when I resize the panel, only the first Y axis values are visible, the others are gone.
Any idea why ?

Can you show the code? http://www.i286.org/examples/charts/empty.html# <- works fine here... (Add series multiple times)

buz
28 Apr 2010, 6:41 AM
New update:

Pie - http://www.i286.org/examples/charts/pie.html
Combinationchart (Pie/Spline/Bar) - http://www.i286.org/examples/charts/multi.html
Time - http://www.i286.org/examples/charts/time.html



* 28-04-2010
* + Added class: Ext.ux.HighChart.Serie, Ext.ux.HighChart.LineSerie, Ext.ux.HighChart.PieSerie, etc... :)
* - Fixed: Wait for the panel to be resized to its correct size (Instead of 0,0)
* after that create the chart.

PTG
28 Apr 2010, 12:14 PM
Can you show the code? http://www.i286.org/examples/charts/empty.html# <- works fine here... (Add series multiple times)
That's not the same kind of graph. I meant multiple Y axis, not multiple series.
I use something like this:


xAxis: {type: 'datetime'},
yAxis: [{
min: res.data.minValue,
max: res.data.maxValue,
title: {enabled: false}
},{
min: 0,
max: res.data.maxValue2,
title: {enabled: false},
opposite: true
}],
series: [{
type: 'area',
name: 'serie 1',
data: res.data.s1
},{
name: 'serie 2',
data: res.data.s2,
yAxis: 1
},{
name: 'serie 3',
data: res.data.s3,
yAxis: 1
}]
When I resize the panel, series 2 & 3 are no more visible.

Anyway I've found the problem and did a quick hack to fix it but it's not the proper way to do it.
The problem was that the series were assigned to the wrong Y axis after redraw in the redrawChart function so I have overwrited the yAxis value like this: opt.yAxis = s.yAxis.options.index;

I'm not sure how to fix it properly but I think this line:
if (typeof s.yAxis != undefined) Ext.apply(opt.yAxis,s.yAxis);
doesn't work properly for each case.

ccquiles
28 Apr 2010, 4:13 PM
Hi - I have a Highchart with two y axes, and I am trying to load data from two different data stores. Does anyone know if this is possible?
my code looks like this



chart = new Ext.ux.HighChart({
loadMask:true,
store: wtstore,
renderTo: 'mychart',
chartConfig:{
chart: {
zoomType: 'x'
},
title: {
text: 'Weight History'
},
subtitle: {
text: 'Click and drag in the plot area to zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 14 * 24 * 3600000, // fourteen days
title: {
text: null
}
},
yAxis: [{
title: {
text: 'Weight (lbs)',
style:{
color: '#4572A7'
},
margin: 25
}
},{
title:{
text: 'CD4 Count',
style: {
color: '#89A54E'
},
margin: 25
},
opposite: true
}],
tooltip: {
formatter: function() {
return '<b>'+ (this.point.name || this.series.name) +'</b><br/>'+
Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>'+
'Patient weight= '+ Highcharts.numberFormat(this.y, 2) +' kg';
}
},
legend: {
enabled: false
} },
series: [{
type: 'line',
color: '#4572A7',
xField: 'date',
yField: 'wt',
yAxis: 1,
name: 'Weight (lbs)'
},{
name: 'CD4 Count',
color: '#89A54E',
xField: 'date',
yField: 'wt', I NEED TO REPLACE THIS WITH REFERENCE TO DATA FROM A DIFF STORE
type: 'spline'
}]
})

buz
28 Apr 2010, 11:35 PM
Hi - I have a Highchart with two y axes, and I am trying to load data from two different data stores. Does anyone know if this is possible?


No, thats not possible at the moment. Maybe in a later version it will.

buergi
29 Apr 2010, 12:53 AM
great stuff, Daniël. works perfect!

DirkWei
10 May 2010, 12:15 AM
When I remove a record from store, the firebug says
"this.getxAxisData is not a function
[Break on this error] this.chart.xAxis[0].setCategories(this.getxAxisData(), true);
Ext.ux...hart.js (第 503 行)",

this.getxAxisData() is not defined!

buergi
10 May 2010, 12:50 PM
@Buz: Got a small question: I want to do a spline chart. Is it possible to pass the x + y coordinates with a store?

something like this:



var store = new Ext.data.JsonStore({
fields:['point'],
root: "",
data: [{ "point": ['test', 3]},{ "point": ['test2', 4]},{ "point": ['test3', 5]},{ "point": ['test4', 6]}]
});

soulgen
11 May 2010, 1:40 AM
How do I configure Ext.ux.HighChart which has a dynamic series loaded from json?

Here is my chart configuration using a static data:



var myChart = new Ext.ux.HighChart({
id: 'myChart'
,chartConfig: {
chart: {
defaultSeriesType: 'column'
}
,title: {
text: 'My Chart'
}
,xAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
,title: {
enabled: true
,text: 'Date'
}
}
,yAxis: {
title: {
text: 'Total'
}
}
,plotOptions: {
column: {
stacking: 'normal'
}
}
,series: [
{
name: 'Shift 3'
,data: [16000, 0, 8000, 0, 24000, 16000, 0, 0, 8000, 0]
}
,{
name: 'Shift 2'
,data: [0, 16000, 0, 16000, 16000, 16000, 0, 0, 0, 16000]
}
,{
name: 'Shift 1'
,data: [24000, 0, 16000, 0, 0, 0, 0, 24000, 0, 16000]
}
]
}
});


you can look how this chart looks like in the attachment

back to topic: Take a look at the "series" config, inside them I have a 3 series named "Shift 1", "Shift 2", and "Shift 3" come with their own data.

From the Ext.ux.HighChart's examples, I know how to populating the chart with dynamic data used in a series. But, those data is just for static series.

And yes, my problem is: I don't know how to creating dynamic series from json.

Here is the json that will be used for the chart:



{
"root":
[
{"date": "1", "shift": "1", "total": "10000.00"},
{"date": "1", "shift": "2", "total": "24000.0000"},
{"date": "1", "shift": "3", "total": "20000.00"},
{"date": "2", "shift": "1", "total": "16000.00"},
{"date": "2", "shift": "2", "total": "0.00"},
{"date": "2", "shift": "3", "total": "16000.0000"},
{"date": "3", "shift": "1", "total": "8000.00"},
{"date": "3", "shift": "2", "total": "0.0000"},
{"date": "3", "shift": "3", "total": "24000.00"},
{"date": "4", "shift": "1", "total": "16000.00"},
{"date": "4", "shift": "2", "total": "0.0000"},
{"date": "4", "shift": "3", "total": "8000.00"}
]
}


This json comes with data about "shift" and "total" which will be used in the chart's series and series' data.

Would anyone help me to solving this problem?

Thank you before

tolichsvs
11 May 2010, 4:08 AM
I have error in IE.
The link to a thread at a highcharts support forum
http://highslide.com/forum/viewtopic.php?f=9&t=6153&p=29525#p29403

(http://mybill.net.ua/test/index.html)

Mayus
15 May 2010, 5:44 AM
Hi all,

Like Soulgen, I don't understand how to configure my Ext.ux.HighChart to use dynamic series loaded from json.

Is it possible with the current version ? Or someone can explain us how it work.

Thanx for your work Buz ;-)

vahid4134
16 May 2010, 2:03 AM
Hi
I think animate method is no correct. this must define like below code



animate: function (el, params, options){
if(options){
if(options.duration==undefined || options.duration==0){
options.duration=1;
}
else{
options.duration=options.duration/1000;
}
}

if (params.width!==undefined) {
Ext.get(el).setWidth(parseInt(params.width), {duration:options.duration});
}
else if (params.height!==undefined) {
Ext.get(el).setHeight(parseInt(params.height), {duration:options.duration});
}
else if (params.left!==undefined) {
Ext.get(el).setLeft(parseInt(params.left));
}
else if (params.opacity!==undefined) {
Ext.get(el).setOpacity(parseInt(params.opacity),{duration:options.duration,callback:options.complete});
} else {
Ext.get(el).setTop(parseInt(params.top));
}
}

4fan
16 May 2010, 5:31 PM
Thank you.
I like it

buz
17 May 2010, 1:09 AM
@Buz: Got a small question: I want to do a spline chart. Is it possible to pass the x + y coordinates with a store?

something like this:



var store = new Ext.data.JsonStore({
fields:['point'],
root: "",
data: [{ "point": ['test', 3]},{ "point": ['test2', 4]},{ "point": ['test3', 5]},{ "point": ['test4', 6]}]
});

Use this as the data:


{
"Root":[
{ "id": 1, "x": 1, "y": 12 },
{ "id": 2, "x": 2, "y": 18 },
{ "id": 3, "x": 3, "y": 14 },
{ "id": 4, "x": 4, "y": 13 }
]
}
And use xField & yField in the serie configuration.



series: [{
type: 'spline',
name: 'Spline',
yField: 'y',
xField: 'x'
}]

buz
17 May 2010, 1:13 AM
Hi
I think animate method is no correct. this must define like below code



animate: function (el, params, options){
if(options){
if(options.duration==undefined || options.duration==0){
options.duration=1;
}
else{
options.duration=options.duration/1000;
}
}

if (params.width!==undefined) {
Ext.get(el).setWidth(parseInt(params.width), {duration:options.duration});
}
else if (params.height!==undefined) {
Ext.get(el).setHeight(parseInt(params.height), {duration:options.duration});
}
else if (params.left!==undefined) {
Ext.get(el).setLeft(parseInt(params.left));
}
else if (params.opacity!==undefined) {
Ext.get(el).setOpacity(parseInt(params.opacity),{duration:options.duration,callback:options.complete});
} else {
Ext.get(el).setTop(parseInt(params.top));
}
}


Thanks! I'll update the code.

medusadelft
22 May 2010, 4:02 AM
Buz: great work!

Did anyone run into a similair error like this (using HighChart 1.2.5 and Ext.3.2.1):
dom is undefined
extjs-debug(5318) if(!/^body/i.test(dom.tagName) ...& me.getStyle('position') == 'static'){\n

I have a panel with a toolbar and a listview. Clicking on the toolbar button opens a window with the highchart graphic. The store used for the highchart is the same store as I used for the listView (why query the server again as we already have all the data at the pc?).
After closing (using the closing cross at the top right or the close button I created on the window, function: winGraph.close() ). I get this message when I want to change the store of the listview (with a reload to get other data). Redisplaying the chart again works. It also seems to work when I change the winGraph.close() to winGraph.hide()

Your suggestions are welcome :)
Thanks,
Maurice.

medusadelft
22 May 2010, 4:44 AM
Hi,

I've got a problem. Maybe someone can point me in the right direction?

I want to add an xAxis title, but I get the error:
this.chartConfig.xAxis[0] is undefined
Ext.ux.HighChart.js (line 293) this.chartConfig.xAxis[0].categories = data;


My Chart code:

var chartSeries = new Array({
type: 'column',
name: 'Gemiddelde',
yField: 'gemiddelde'
});
for (i=1;i<=tabLeagGames;i++) {
chartSeries.push({
name: 'Game '+i,
yField: 'game'+i
});
}

var chart = new Ext.ux.HighChart({
store: storeSpelers,
loadMask: true,
chartConfig: {
chart: {
backgroundColor: '#ffffff'
,defaultSeriesType: 'line'
,margin: [50, 150, 60, 80]
,zoomType: 'x'
},
title: {
text: 'Gemiddelde en games',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: chartSubTitle,
style: {
margin: '0 100px 0 0' // center it
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
},
plotOptions: {
line: {
states: {
hover: {
enabled: true
}
}
}
}
,xAxis: {
title: { enabled: true ,text: 'Speelweek' }
}
,yAxis: {
max: 300
,title: { text: 'Score' }
}
},
xField: 'speeldag',
series: chartSeries
});


Thanks in advance,
Maurice.

buz
22 May 2010, 5:41 AM
Hi,

I've got a problem. Maybe someone can point me in the right direction?

I want to add an xAxis title, but I get the error:
this.chartConfig.xAxis[0] is undefined
Ext.ux.HighChart.js (line 293) this.chartConfig.xAxis[0].categories = data;


My Chart code:

var chartSeries = new Array({
type: 'column',
name: 'Gemiddelde',
yField: 'gemiddelde'
});
for (i=1;i<=tabLeagGames;i++) {
chartSeries.push({
name: 'Game '+i,
yField: 'game'+i
});
}

var chart = new Ext.ux.HighChart({
store: storeSpelers,
loadMask: true,
chartConfig: {
chart: {
backgroundColor: '#ffffff'
,defaultSeriesType: 'line'
,margin: [50, 150, 60, 80]
,zoomType: 'x'
},
title: {
text: 'Gemiddelde en games',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: chartSubTitle,
style: {
margin: '0 100px 0 0' // center it
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
},
plotOptions: {
line: {
states: {
hover: {
enabled: true
}
}
}
}
,xAxis: {
title: { enabled: true ,text: 'Speelweek' }
}
,yAxis: {
max: 300
,title: { text: 'Score' }
}
},
xField: 'speeldag',
series: chartSeries
});
Thanks in advance,
Maurice.

Change xAxis: { config... } to xAxis: [{ config... }], same for the yAxis field, it should be an array instead of an object.

For the first problem? What version are you using of the plugin?

medusadelft
22 May 2010, 7:00 AM
Wow, quick repsonse! Thanks buz!

Axis are working now, great!

I'm using Ext.ux.HighChart.js 0.3.0 (downloaded somewhere last week)

fabads
24 May 2010, 7:28 AM
Hello,

I want to display data at non regular intervals on a time series chart.
For that, I followed the tips given on Highcharts forum and published a json file like that :


{
"Points" : [
{
"point" : 360,
"time" : 1000
},
{
"point" : 360,
"time" : 62000
},
...

time is converted to milliseconds and I specified the datetime type for xAxis :


function W3hConsoGraphToday() {
var store = new Ext.data.JsonStore({
fields:['point'],
url: '../w3h-data/w3h-conso-graph-today.json',
root: "Points"
});

store.load();


W3hConsoGraphToday.superclass.constructor.call(this,
{
loadMask:true,
store: store,

chartConfig:{
chart: {
zoomType: 'x'
},
title: {
text: 'Today energy'
},
xAxis: {
type: 'datetime',
maxZoom: 15 * 60000, // 15 minutes
title: {
text: null
}
},
yAxis: {
title: {
text: 'Energy (Watts)'
},
startOnTick: false,
showFirstLabel: false
},
tooltip: {
formatter: function() {
return '<b>'+ (this.point.name || this.series.name) +'</b><br/>'+
Highcharts.dateFormat('%Hh%M', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 0) +' Watts';
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, "#4572A7"],
[1, 'rgba(0,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
}
},
series: [{
type: 'area',
yField: 'point',
xField: 'time',
name: 'Energy',
//pointInterval: 60000,
//pointStart: Date.UTC(2006, 0, 01)
}]
});
}

Ext.extend(W3hConsoGraphToday, Ext.ux.HighChart);



Data are not displayed according the time (I have one vertical line !)

What's wrong with my code ?

Thanks for your support.

Fabrice

fabads
24 May 2010, 8:23 AM
Ok, I've found my error.
I missed to specify 'time' in the Fields property of JsonStore.

fabads
24 May 2010, 8:26 AM
And I want to add that this adapter is really really useful. Thanks to the author !!! =D>

Is it possible to have a graph updated each seconds when I click a button ? Like on this example :

http://www.highcharts.com/demo/?example=dynamic-update&theme=default

buz
24 May 2010, 11:47 PM
And I want to add that this adapter is really really useful. Thanks to the author !!! =D>

Is it possible to have a graph updated each seconds when I click a button ? Like on this example :

http://www.highcharts.com/demo/?example=dynamic-update&theme=default

Yes, that should be no problem. Just add a record to the store every second.

medusadelft
26 May 2010, 11:56 AM
Hi,

Just have problem with a stacked-column. It doesn't display/render correctly. The first column is not displayed from the bottom, only small segments are shown. The second column is displayed in the correct height as far as I can tell. Clicking twice on one of the legends (off/on) OR pausing using 'alert()' makes the chart columns display as they should. I tried window.setSize, the rendering seems to be a bit more often good, but not always.

My code:

var storeChart = new Ext.data.JsonStore({
url: 'phpscripts/js.league.tab.teams.points.php'
,baseParams: {teamId: teamId}
,root: 'data'
,fields: [
{name: 'speeldag', type: 'int'}
,{name: 'wedpnt', type: 'float'}
,{name: 'bonuspnt', type: 'float'}
]
});
storeChart.load();

var chartSeries = new Array({
name: 'Wedstrijdpunten'
,yField: 'wedpnt'
},{
name: 'Bonuspunten'
,yField: 'bonuspnt'
});


var chartSubTitle = Ext.getCmp('tabBrdCenter'+tabId).tabpanTeam.title.substr(20);

var chart = new Ext.ux.HighChart({
store: storeChart,
loadMask: true,
chartConfig: {
credits: chartCredits
,chart: {
backgroundColor: '#ffffff'
,defaultSeriesType: 'column'
,margin: [50, 50, 70, 80]
,zoomType: 'x'
},
title: {
text: 'Punten overzicht',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: chartSubTitle,
style: {
margin: '0 100px 0 0' // center it
}
}
,xAxis: [{
title: { enabled: true ,text: 'Speelweek' }
}]
,yAxis: [{
min: 0
,max: 25
,title: { text: 'Punten' }
}]
,tooltip: {
formatter: function() {
return '<b>Speelweek: '+ (this.x+1) +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Totaal: '+ this.point.stackTotal;
}
}
,plotOptions: {
column: {
stacking: 'normal'
,visible: true
}
,series: {
events: {
click: function(a,b,c) {
graphWin.hide();
showMatchScores(tabId, teamId, 0, a.point.data.speeldag, maxSpeeldagNr);
}
}
}
}
},
xField: 'speeldag',
series: chartSeries
});


var graphWin = new Ext.Window({
resizeable: true,
width: 800,
height: 450,
layout: 'fit',
modal: true,
closable: false,
fbar: new Ext.Toolbar({
items: [{
xtype: 'button',
text: 'Sluiten',
handler: function(){
graphWin.hide();
}
}]
})
,items: [chart]
}).show();

// setSize fixes the 'stack' not displayed correctly...
graphWin.setSize(801,450);


Not sure if it has to do with Ext, HighChart itself or the ux.HighChart. Any ideas?

Thanks,
Maurice.

ljankowski
26 May 2010, 1:06 PM
Where can I get the most current files needed to run HighCharts and your controls, I've seen HighchartPanel, HighChart etc I just want to make sure I'm using the most current ones available. I'm trying to get this working with the Coolite toolkit, and had it working up to a point, but had trouble when I was trying to have it resize in a panel (Center Viewport).

Thanks!

bdunkin
26 May 2010, 2:29 PM
Maurice,

I had the same problem and I updated the Ext.ux.Highcharts refresh function as shown below:



/**
* Complete refresh of the chart
*/
refresh: function(){
if (this.store){
var data = new Array(), seriesCount = this.chart.series.length, i;

for (i=0;i<seriesCount;i++)
data.push(new Array());

// We only want to go true the data once.
// So we need to have all columns that we use in line.
// But we need to create a point.
var items = this.store.data.items;
var xFieldData = [];

for (var x = 0; x < items.length;x++){
var record = items[x];
if (this.xField){
xFieldData.push(record.data[this.xField]);
}
for (i = 0; i < seriesCount; i++){
var serie = this.series[i], point;
if ((serie.type == 'pie' && serie.useTotals)){
if (x == 0)
serie.clear();
point = serie.getData(record);
} else {
point = serie.getData(record);
data[i].push(point);
}
}
}

// Update the series
for (i = 0; i < seriesCount; i++) {
if (this.series[i].useTotals) {
this.chart.series[i].setData(this.series[i].getTotals())
}
else if (data[i].length > 0)
this.chart.series[i].setData(data[i], (i == (seriesCount-1))); // true == redraw.
}

if (this.xField){
this.updatexAxisData();
}
}
},
NOTE: the update is on line 403 of the file in the update series for loop where setData is called. I believe you only need to redraw the chart after updating the last series.

Brian

lpastor
27 May 2010, 2:02 PM
Thanks a lot Brian, that's better now.

I have an other problem, chart is well displayed in Firefox, but in IE 8, I have this error :



Message : 'this.chart.series' is Null isn't an object.
Ligne : 362
Caractère : 37
Code : 0
URI : https://127.0.0.1/commun/base/highcharts/Ext.ux.HighChart.js


Message : 'G_vmlCanvasManager' is undefined.
Ligne : 1102
Caractère : 5
Code : 0
URI : https://127.0.0.1/commun/base/highcharts/js/highcharts.src.js


Message : 'G_vmlCanvasManager' is undefined.
Ligne : 1102
Caractère : 5
Code : 0
URI : https://127.0.0.1/commun/base/highcharts/js/highcharts.src.jsfor information, this is my load scripts order :


<link rel="stylesheet" type="text/css" href="/commun/ext-3.2.1/resources/css/ext-all.css" >
<script type="text/javascript" src="/commun/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/commun/ext-3.2.1/ext-all.js"></script>
<!--<script type="text/javascript" src="/commun/ext-3.2.1/ext-all-debug.js"></script>-->
<script type="text/javascript" src="/commun/ext-3.2.1/src/locale/ext-lang-fr.js"></script>

<script type="text/javascript" src="/commun/base/highcharts/adapter-extjs.js"></script>
<script type="text/javascript" src="/commun/base/highcharts/Ext.ux.HighChart.js"></script>
<script type="text/javascript" src="/commun/base/highcharts/js/highcharts.src.js"></script>

<script type="text/javascript" src="BUDGET_Graphe6.js"></script>And the javascript :


var store = new Ext.data.JsonStore({
fields:[
'nom_bd',
{name:'m_engage_bd', type: 'float'},
{name:'m_reserve_bd', type: 'float'},
{name:'m_solde_reserve_bd', type: 'float'}
],
url: 'BUDGET_Graphe_inc.php',
autoDestroy:true,
root: "data"
});

store.load();

Ext.onReady(function(){

var graphWin = new Ext.Window({
title: 'Statistiques budgétaires',
resizeable: true,
width: 800,
height: 500,
layout: 'fit',
items: [
{
xtype: 'highchart',
id: 'thechart',
store: store,

series: [
{
name: 'Solde avec réserve',
dataIndex: 'm_solde_reserve_bd'
},
{
name: 'Engagé',
dataIndex: 'm_engage_bd'
},
{
name: 'Reservé',
dataIndex: 'm_reserve_bd'
}
],
xField: 'nom_bd',

chartConfig: {

chart: {
defaultSeriesType: 'column',
margin: [50, 50, 30, 60]
},
title: {
text: 'Statistiques par domaines'
},
xAxis: [{}],
yAxis: [
{
min: 0,
title: {
text: 'Montants'
}
}
],
legend: {
style: {
left: 'auto',
bottom: 'auto',
right: '70px',
top: '35px'
},
backgroundColor: '#FFFFFF',
borderColor: '#CCC',
borderWidth: 1,
reversed: true,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name+'</b><br/>'+'Montant: '+this.y+ ' €';
}
},
plotOptions: {
series: {
stacking: 'normal'
}
}

}

}
]
});

graphWin.show();
});

buz
27 May 2010, 11:12 PM
You are missing one include



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

fabads
30 May 2010, 2:28 AM
Hello,

I want to use local time zone on my X-axis (datetime type).
I see in the HC documentation (http://highcharts.com/ref/#global) that there is a new fresh option called useUTC.

The only way to proceed is to use the setOption function like that :


Highcharts.setOptions({
global: {
useUTC: false
}
});

How can I do that through the adapter ?

buz
30 May 2010, 11:43 AM
Hello,

I want to use local time zone on my X-axis (datetime type).
I see in the HC documentation (http://highcharts.com/ref/#global) that there is a new fresh option called useUTC.

The only way to proceed is to use the setOption function like that :


Highcharts.setOptions({
global: {
useUTC: false
}
});

How can I do that through the adapter ?

Just use the code displayed above. Those options have nothing to do with the adapter.

bdom
3 Jun 2010, 3:58 AM
Hi everyone
Nice work buz.
I have a problem with my chart.
In Ext.ux.HighChart.js
refresh: function(){
if (this.store){
var data = new Array(), seriesCount = this.chart.series.length
I have this error: 'this.chart.series' is Null isn't an object.

I have this.chartConfig.chart.series but not this.chart

Here is my load scripts order:




<linkhref="http://includes/ext/resources/css/ext-all.css"rel="stylesheet"type="text/css"/>
<scriptsrc="http://includes/ext/adapter/ext/ext-base.js"type="text/javascript"></script>
<scriptsrc="http://includes/ext/ext-all.js"type="text/javascript"></script>

<!-- ExtJS adapter for Highcharts -->
<scriptsrc="http://includes/ext/adapter-extjs.js"type="text/javascript"></script>
<!-- Highcharts includes -->
<scriptsrc="http://includes/ext/highcharts.src.js"type="text/javascript"></script>
<!-- ExtJS Plugin for Highcharts -->
<scriptsrc="http://includes/ext/Ext.ux.HighChart.js"type="text/javascript"></script>
<!--[if IE]><script type="text/javascript" src="http://includes/ext/excanvas.compiled.js"></script><![endif]-->

<linkhref="estilos/estiloDefault.css"rel="stylesheet"type="text/css"/>
<scriptsrc="includes/panelInformes.js"type="text/javascript"></script>
<scriptsrc="includes/inicializarInformes.js"type="text/javascript"></script>



And the javascript :



var hcstore = new Ext.data.JsonStore({
url: 'obtener_datos.aspx?tipo=highChart1',
fields:['point'],
root: "Points"
});

var chart = new Ext.ux.HighChart({
loadMask:true,
store:hcstore,
chartConfig:{
chart: {
zoomType: 'x'
},
title: {
text: null
},
subtitle: {
text: 'Click y arrastra en el área de la gráfica para hacer zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 14 * 24 * 3600000, // fourteen days
title: {
text: null
}
},
yAxis: {
title: {
text: 'Contaminante'
},
min: 0.6,
startOnTick: false,
showFirstLabel: false
},
tooltip: {
formatter: function() {
return '<b>'+ (this.point.name || this.series.name) +'</b><br/>'+
Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>'+
'1 USD = '+ Highcharts.numberFormat(this.y, 2) +' EUR';
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, "#4572A7"],
[1, 'rgba(0,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
}
},
series: [{
type: 'area',
yField: 'point',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2007, 0, 01)
}]
});
var panelGrafica = new Ext.Panel({
tbar: tbContaminantes,
id:'panelGrafica',
items: [ chart],
listeners: {
render: function(){ hcstore.load(); }
}
});
var win = new Ext.Window({
title:sTitulo,
id:'winGrafica',
layout:'fit',
maximizable:true,
minimizable:true,
modal:true,
width:700,
height:600,
plain: true,
items: panelGrafica,
buttons: [{
text: 'Cerrar',
handler: function(){
win.close();
}
}]
});
win.show();

babaqga123
3 Jun 2010, 5:06 AM
Hi all, I have the following problem:

I have multiple Ext.ux.HighCharts updating from the same store. Each time the store loads, it creates a new Ext.ux.HighChart and the store has a variable which tells it where to render the Ext.ux.HighChart on each load. It does that correctly, however, each time the store loads, it reloads all HighChart objects that are bound to it. I would like to know how to have them unbind the store after it made them render and gave them the proper series.

Here is some code:


for (var j=0;j< IdsAndNames.length;j++)
{
if (serverIDasSent==IdsAndNames[j][0])
{
var allChildren=getChildren();
Ext.getCmp(allChildren[j].getId()).getEl().unmask();
var highChart=new Ext.ux.HighChart({
store:storeForChart,
autoLoad:false,
width:500,
height:200,
id:'charter'+IdsAndNames[j][1],
chartConfig:
{
chart:
{

zoomType: 'x'
},
title: {
text:chooser()+' for <u>'+ IdsAndNames[j][1] +'</u>'
},
xAxis:
{
type: 'datetime',
maxZoom: 1000, // fourteen days
title:
{
text: null
}
},
yAxis:
{
min: 0,
max:1500000,
startOnTick: false,
showFirstLabel: false
},
tooltip:
{
formatter: function()
{
return '<b>'+ (this.point.name || this.series.name) +'</b><br/>'+
Highcharts.dateFormat('%A %B %e %Y %H %M', this.x ) + '<br/>'+
this.y;
}
},
legend:
{
enabled: false
},
plotOptions:
{
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, "#4572A7"],
[1, 'rgba(0,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
}
},
series:
[{
id:'seriesobject'+IdsAndNames[j][1],
name: Ext.getCmp('MultipleChooser').getRawValue(),
type: 'area',
yField: Ext.getCmp('MultipleChooser').getRawValue(),
pointInterval: 25*10*60*4,
pointStart: Date.UTC(yearX,monthX-1,dayX,hourX,minuteX,secondX)
}]
});
var addedItem=new Ext.FormPanel({
title:IdsAndNames[j][1],
id:'addedItemFor'+IdsAndNames[j][1],
height:300,
width:490,
frame:false,
header:false,
padding:.3,
bodyBorder:true,
items:highChart
});
Ext.getCmp(allChildren[j].getId()).add(addedItem);
Ext.getCmp(allChildren[j].getId()).doLayout();
}
}

In the last row, after doLayout(), I would like to make the highChart variable that was rendered not to react to store changes, so only the others that were not rendered react to changes in the store.

medusadelft
4 Jun 2010, 8:52 AM
Thanks Brian, it worked! (sorry for the late response) [ @msg #131 ]

karthik085
7 Jun 2010, 12:43 PM
buz,

Problem related to 132, 133 and 136
I believe the problems are at Ext.ux.HighChart.js - Line 90 an 368.

For Line 368, instead of this.chart.series.length, shouldn't it be
this.chartConfig.series.length - In Firebug, this -> chartConfig contains series.

I am loading the excanvas.compiled.js
But, that does not seem to be the problem.

Please let us know.

Thanks,
K

bdom
7 Jun 2010, 10:33 PM
Hi
Problem related to 132, 133 and 136.

I didn´t find a solution. While I´m waiting for a solution I did a workarround, I modified line 368 of Ext.ux.HighChart.js:



if(this.chart){
var data = new Array(), seriesCount = this.chart.series.length, i;
}
else{
var data = new Array(), seriesCount = this.series.length, i;
}



And after I needed to remove the line 415:


else{
//this.series[i].setData(data[i], true); // true == redraw.
}

Know it´s not the best solution but so I can keep working...


Regards

karthik085
8 Jun 2010, 6:38 AM
Hi,
Thank you for posting the workaround. I did try the same - however, it is causing another problem.
It complains of the following in Ext.ux.HighChart.js:

Message: Object doesn't support this property or method
Line: 396
Char: 25
Code: 0

BTW, if it is working for you, would you be kind enough to post the entire Ext.ux.HighChart.js so I can try with your version.

NOTE: I am using the following Ext.us.HighCharts.js which begins like this:
/**
* @author Daniel Kloosterman
* @email buz.i286@gmail.com
* @version 0.3.0
* @examples {@link http://www.i286.org/examples/}
* @requires HighChart 1.2.5+, HighCharts-ExtJS-adapter
*
* Todo:
* setSerieStyle, setStyle, Multiple datastores (0.4.0)
*
* 28-04-2010
* ! New version 0.3.0
* + Added class: Ext.ux.HighChart.Serie, Ext.ux.HighChart.LineSerie, Ext.ux.HighChart.PieSerie, etc... :)
*



Thanks,
K

buz
8 Jun 2010, 6:53 AM
Hm, somehow i didnt update the version numbers. 0.3.1. should fix this problem

Please download the latest version.

karthik085
8 Jun 2010, 7:03 AM
Hi buz,
Thanks for the fast reply - that worked for the second error. Can you update your code with the fix for the first error as well?


Hm, somehow i didnt update the version numbers. 0.3.1. should fix this problem

Please download the latest version.

Thanks,
K

karthik085
8 Jun 2010, 7:05 AM
Hi,
With legends, it is possible to turn off one entire series, by clicking on one of the items in the legend.
Is there a way to do that for X-values, i.e.
Say X-Values are [0, 1, 2, 3, 4]
and are plotted in the chart.

Now, there is a selection box or legend, that allows you to select what x-values are to be displayed.
Is that possible with HighCharts? If so, kindly explain the solution
If not, what workarounds or code additions can be done - any suggestions are appreciated.

Thanks,
K

buz
8 Jun 2010, 9:31 AM
Hi buz,
Thanks for the fast reply - that worked for the second error. Can you update your code with the fix for the first error as well?



Thanks,
K

Whats the first error? Can you show me the log?


Hi,
With legends, it is possible to turn off one entire series, by clicking on one of the items in the legend.
Is there a way to do that for X-values, i.e.
Say X-Values are [0, 1, 2, 3, 4]
and are plotted in the chart.

Now, there is a selection box or legend, that allows you to select what x-values are to be displayed.
Is that possible with HighCharts? If so, kindly explain the solution
If not, what workarounds or code additions can be done - any suggestions are appreciated.

Thanks,
K
Do you have a sample where the x values are shown? (Maybe from www.highcharts.com )

karthik085
8 Jun 2010, 9:42 AM
First error happens only in IE and hence, the chart does not get displayed
Message: 'serieCls' is null or not an object
Line: 86
Char: 13
Code: 0
URI: http://********/js/Ext.ux.HighChart.js


For the x-values question, any highcharts demo would do. Take for example, the first one (Basic Line):
http://highcharts.com/demo/?example=line-basic&theme=default

X-values are 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
Say, I have a list where each item is the x-value and a checkbox associated with it like
CHECKBOX Jan
CHECKBOX Feb

If I click on Jan and not on feb, the Y-values associated with Jan are only shown and with Feb gets hidden.



Whats the first error? Can you show me the log?


Do you have a sample where the x values are shown? (Maybe from www.highcharts.com (http://www.highcharts.com) )

buz
8 Jun 2010, 10:12 AM
First error happens only in IE and hence, the chart does not get displayed
Message: 'serieCls' is null or not an object
Line: 86
Char: 13
Code: 0
URI: http://********/js/Ext.ux.HighChart.js

if you change line #86 to


if (serie.serieCls==null){
will that help?



For the x-values question, any highcharts demo would do. Take for example, the first one (Basic Line):
http://highcharts.com/demo/?example=line-basic&theme=default

X-values are 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
Say, I have a list where each item is the x-value and a checkbox associated with it like
CHECKBOX Jan
CHECKBOX Feb

If I click on Jan and not on feb, the Y-values associated with Jan are only shown and with Feb gets hidden.You can create a Ext.data.Store with the fields
['serie1','serie2','serie3','xField', 'filter']

And then filter out the selected rows using store.filterBy(function(item){ if (item.data['filter']==true) return false; return true })

karthik085
8 Jun 2010, 10:40 AM
if you change line #86 to


if (serie.serieCls==null){
will that help?


No - it is not able to associate serie with Ext.ux.HighChart.Serie, i.e. none of the variables and methods in Ext.ux.HighChart.Serie seems to be recognized by serie.



You can create a Ext.data.Store with the fields
['serie1','serie2','serie3','xField', 'filter']

And then filter out the selected rows using store.filterBy(function(item){ if (item.data['filter']==true) return false; return true })





Thank you for the suggestion - that worked!

buz
8 Jun 2010, 11:06 AM
I can't reproduce the error. (Tested both in IE8 & 6). Can you show me the code somehow?

buz

karthik085
8 Jun 2010, 1:26 PM
buz,
I think I found the problem. If series which is an array of objects, such as


series: [
{
name: 'total',
id: 'total',
dataIndex: 'total'
},
]
the last comma adds one more element to the series.
For the above, in addSeries, series.length becomes 2, where else it should be 1.

Is this a common bug in JavaScript that causes the program to not work (OR) is it HighCharts plugin or HighCharts causing this problem?



I can't reproduce the error. (Tested both in IE8 & 6). Can you show me the code somehow?

buz

buz
8 Jun 2010, 10:13 PM
buz,
I think I found the problem. If series which is an array of objects, such as


series: [
{
name: 'total',
id: 'total',
dataIndex: 'total'
},
]
the last comma adds one more element to the series.
For the above, in addSeries, series.length becomes 2, where else it should be 1.

Is this a common bug in JavaScript that causes the program to not work (OR) is it HighCharts plugin or HighCharts causing this problem?

At microsoft they would say, this is a feature :) But it's just wrong syntax. Firefox, chrome and safari would ignore the ,

Christiand
11 Jun 2010, 8:52 AM
many IDE will display the warning.

fabads
11 Jun 2010, 9:47 PM
Hello,

I'd like to update a chart every second with fresh data and I'd like to have the same result as the highchart example :
http://www.highcharts.com/demo/?example=dynamic-update&theme=default

My server writes the data in a Json file. I use a JsonStore to retrieve the data like that :

var store = new Ext.data.JsonStore({
fields:['p', 't'],
url: 'myfile.json',
root: "Points"
});

store.load();

How can I tell to highchart to update the data (just add the missing data, not refresh all the graph would be great), each 1 second for example ?

How can I tell to the jsonstore to update the data periodically (general question, not related to highcharts !)
How can I tell to highcharts to refresh the graph ?

Thanks a lot for your help.

fabads
11 Jun 2010, 10:18 PM
One solution I've found thanks to this forum is to use Ext.TaskMgr to refresh the store. It works but not as expected because the chart display a message "Loadin in progress" on each update. I don't know if it is possible to hide this screen.

Is it the right way to proceed ?

buz
13 Jun 2010, 12:50 PM
You can use an Ext.ajax request to get the updated data and add it with store.loadData(json, true). This will add the latest data instead of refreshing the store.

Also, you can disable the "loading" with setting the loadMask = false;

pawelb1973
14 Jun 2010, 6:24 AM
You can tell highcharts to refresh the graph by using store event 'load':


var store = new Ext.data.JsonStore({
fields:['p', 't'],
url: 'myfile.json',
root: "Points"
});
store.on('load',function(Store,records,Store_options){ do_something_to_refesh_grah},this); // hookup event load to call do_something afrer all record loaded


//fireup store load each 1 second
Ext.TaskMgr.start({
run: function(){
store.load();
},
interval: 1000 //period 1000 ms = 1 sec
});

also look at this http://www.i286.org/examples/line-time.html

Read the API doc. There is more about store and events.

fabads
14 Jun 2010, 11:07 AM
Hello,

Thanks a lot for your help. I simply set loadmask to false and set a taskmgr and it works fine now. I hope it is the right and better way to implement this kind of polling.

cq.yangyu@gmail.com
15 Jun 2010, 8:04 PM
this is great , I really like it ! thanks a lot !

dr1811
16 Jun 2010, 6:33 AM
Buz,
looks great!!

I almost have everything converted over from ext charts, just having one hang up with the xField in the xaxis not showing up in the tooltip correctly. It should be period:2008-01, period:2008-02,period:2008-03,etc, but rendering as period:0,period:1,period:2,period:3,period:4,etc.

The xaxis itself looks good. This config is very similar to the extjs site visits chart, except my chart is multi axis.
I have tried several different things, but no gold. Do you have any idea, what the issue could be? Particulars are below. Thanks!

the adapter 1.2.5
highcharts is 1.2.5
the ux @version 0.3.1


function statsStorePendConfig(config) {
return new Ext.data.JsonStore(Ext.apply({
fields : [
{ name : 'ht', mapping : 'ht' },
{ name : 'product', mapping : 'product' },
{ name : 'TOTAL_UNITS', mapping : 'TOTAL_UNITS', type: 'int' },
{ name : 'AVG_SALES_PRICE', mapping : 'AVG_SALES_PRICE', type: 'int' },
{ name : 'MED_SALES_PRICE', mapping : 'MED_SALES_PRICE', type: 'int' }

],
url : 'statssearch/statsSearchTest',
method : 'POST',
root : "Data"

}, config));
};

function highChartPendConfig(config) {
return new Ext.ux.HighChart(Ext.apply({
store: statsStorePendConfig({}),
series: [
{
type : 'column',
dataIndex : 'AVG_SALES_PRICE',
name : 'Avg Price',
},
{
type : 'column',
name : 'Med Price',
dataIndex : 'MED_SALES_PRICE',
},
{
type : 'spline',
dataIndex : 'TOTAL_UNITS',
yAxis : 1,
name : 'Total Units',
}],
xField: 'ht',
chartConfig: {
colors: ['#FFAAAA','#AAAAFF','#4572A7','#AA4643','#89A54E','#80699B','#3D96AE','#DB843D','#92A8CD','#A47D7C','#B5CA92'],
plotOptions: {
column: {
borderRadius: 0,
pointPadding: 0,
pointWidth: 5,
shadow: false,
animation: true,
borderWidth: 0,
marker: {
lineWidth: 0
}
},
spline: {
marker: {
lineWidth: 0
}
}
},
lang: {
loading : 'Loading Requested Chart...'
},
chart: {
margin: [20, 55, 90, 70]
},
credits: {
enabled: false,
},
title: {
text: '',
},
xAxis: [{
tickInterval: 'auto',
type: 'linear',
labels: {
x: 5,
y: 5,
rotation: -90,
align: 'right',
style: {
font: 'bold 10px Arial, sans-serif',
margin: '5px 0 0 0' // center
}
},
title: {
align: 'middle',
enabled: true,
margin: 0,
rotation: 0,
text: '',
}
}],
yAxis: [
{ // Primary yAxis
min: 0,
tickInterval: 'auto',
type: 'linear',
title: {
text: 'Avg Price',
style: {
font: 'normal 12px Arial, sans-serif',
color: '#4572A7'
},
margin: 45
},
labels: {
formatter: function() {
return Ext.util.Format.currency((this.value/1000) + 'k');
},
style: {
font: 'normal 11px Arial, sans-serif',
color: '#4572A7'
}
},
},
{ // Secondary yAxis
min: 0,
tickInterval: 'auto',
type: 'linear',
opposite: true,
title: {
text: 'Total Units',
margin: 30,
style: {
font: 'normal 12px Arial, sans-serif',
color: '#89A54E'
}
},
labels: {
formatter: function() {
return Ext.util.Format.number(this.value);
},
style: {
font: 'normal 11px Arial, sans-serif',
color: '#89A54E'
}
},
}
],
tooltip: {
formatter: function() {
var periodInfo = '<b>'+ 'Period: ' + this.x +'</b><br/>';
if(this.series.name == 'Total Units'){
var statInfo = this.series.name + ': '+ Ext.util.Format.number(this.y);
} else {
var statInfo = this.series.name + ': '+ Ext.util.Format.currency(this.y);
}
return periodInfo + '\n' + statInfo;
}
},
legend: {
enabled: true,
layout: 'horizontal',
backgroundColor: '#FFFFFF',
borderColor: '#909090',
borderRadius: 5,
borderWidth: 1,
style: {
position: 'absolute',
zIndex: 10,
bottom: '5px',
left: '5px',
padding: '5px'
}
}}}, config));
};

{
"Data":[
{"ht":"2008-12","product":"Records","TOTAL_UNITS":"26","AVG_SALES_PRICE":"203777.93","MED_SALES_PRICE":"187900.00"},
{"ht":"2009-01","product":"Records","TOTAL_UNITS":"13","AVG_SALES_PRICE":"201706.25","MED_SALES_PRICE":"167450.00"}, {"ht":"2009-02","product":"Records","TOTAL_UNITS":"15","AVG_SALES_PRICE":"178150.00","MED_SALES_PRICE":"147350.00"},
{"ht":"2009-03","product":"Records","TOTAL_UNITS":"16","AVG_SALES_PRICE":"151612.50","MED_SALES_PRICE":"129900.00"},
{"ht":"2009-04","product":"Records","TOTAL_UNITS":"16","AVG_SALES_PRICE":"212411.11","MED_SALES_PRICE":"206950.00"},
{"ht":"2009-05","product":"Records","TOTAL_UNITS":"35","AVG_SALES_PRICE":"195158.69","MED_SALES_PRICE":"157900.00"}
]
}

buz
16 Jun 2010, 7:45 AM
Buz,
looks great!!

I almost have everything converted over from ext charts, just having one hang up with the xField in the xaxis not showing up in the tooltip correctly. It should be period:2008-01, period:2008-02,period:2008-03,etc, but rendering as period:0,period:1,period:2,period:3,period:4,etc.

The xaxis itself looks good. This config is very similar to the extjs site visits chart, except my chart is multi axis.
I have tried several different things, but no gold. Do you have any idea, what the issue could be? Particulars are below. Thanks!

the adapter 1.2.5
highcharts is 1.2.5
the ux @version 0.3.1


function statsStorePendConfig(config) {
return new Ext.data.JsonStore(Ext.apply({
fields : [
{ name : 'ht', mapping : 'ht' },
{ name : 'product', mapping : 'product' },
{ name : 'TOTAL_UNITS', mapping : 'TOTAL_UNITS', type: 'int' },
{ name : 'AVG_SALES_PRICE', mapping : 'AVG_SALES_PRICE', type: 'int' },
{ name : 'MED_SALES_PRICE', mapping : 'MED_SALES_PRICE', type: 'int' }

],
url : 'statssearch/statsSearchTest',
method : 'POST',
root : "Data"

}, config));
};

function highChartPendConfig(config) {
return new Ext.ux.HighChart(Ext.apply({
store: statsStorePendConfig({}),
series: [
{
type : 'column',
dataIndex : 'AVG_SALES_PRICE',
name : 'Avg Price',
},
{
type : 'column',
name : 'Med Price',
dataIndex : 'MED_SALES_PRICE',
},
{
type : 'spline',
dataIndex : 'TOTAL_UNITS',
yAxis : 1,
name : 'Total Units',
}],
xField: 'ht',
chartConfig: {
colors: ['#FFAAAA','#AAAAFF','#4572A7','#AA4643','#89A54E','#80699B','#3D96AE','#DB843D','#92A8CD','#A47D7C','#B5CA92'],
plotOptions: {
column: {
borderRadius: 0,
pointPadding: 0,
pointWidth: 5,
shadow: false,
animation: true,
borderWidth: 0,
marker: {
lineWidth: 0
}
},
spline: {
marker: {
lineWidth: 0
}
}
},
lang: {
loading : 'Loading Requested Chart...'
},
chart: {
margin: [20, 55, 90, 70]
},
credits: {
enabled: false,
},
title: {
text: '',
},
xAxis: [{
tickInterval: 'auto',
type: 'linear',
labels: {
x: 5,
y: 5,
rotation: -90,
align: 'right',
style: {
font: 'bold 10px Arial, sans-serif',
margin: '5px 0 0 0' // center
}
},
title: {
align: 'middle',
enabled: true,
margin: 0,
rotation: 0,
text: '',
}
}],
yAxis: [
{ // Primary yAxis
min: 0,
tickInterval: 'auto',
type: 'linear',
title: {
text: 'Avg Price',
style: {
font: 'normal 12px Arial, sans-serif',
color: '#4572A7'
},
margin: 45
},
labels: {
formatter: function() {
return Ext.util.Format.currency((this.value/1000) + 'k');
},
style: {
font: 'normal 11px Arial, sans-serif',
color: '#4572A7'
}
},
},
{ // Secondary yAxis
min: 0,
tickInterval: 'auto',
type: 'linear',
opposite: true,
title: {
text: 'Total Units',
margin: 30,
style: {
font: 'normal 12px Arial, sans-serif',
color: '#89A54E'
}
},
labels: {
formatter: function() {
return Ext.util.Format.number(this.value);
},
style: {
font: 'normal 11px Arial, sans-serif',
color: '#89A54E'
}
},
}
],
tooltip: {
formatter: function() {
var periodInfo = '<b>'+ 'Period: ' + this.x +'</b><br/>';
if(this.series.name == 'Total Units'){
var statInfo = this.series.name + ': '+ Ext.util.Format.number(this.y);
} else {
var statInfo = this.series.name + ': '+ Ext.util.Format.currency(this.y);
}
return periodInfo + '\n' + statInfo;
}
},
legend: {
enabled: true,
layout: 'horizontal',
backgroundColor: '#FFFFFF',
borderColor: '#909090',
borderRadius: 5,
borderWidth: 1,
style: {
position: 'absolute',
zIndex: 10,
bottom: '5px',
left: '5px',
padding: '5px'
}
}}}, config));
};

{
"Data":[
{"ht":"2008-12","product":"Records","TOTAL_UNITS":"26","AVG_SALES_PRICE":"203777.93","MED_SALES_PRICE":"187900.00"},
{"ht":"2009-01","product":"Records","TOTAL_UNITS":"13","AVG_SALES_PRICE":"201706.25","MED_SALES_PRICE":"167450.00"}, {"ht":"2009-02","product":"Records","TOTAL_UNITS":"15","AVG_SALES_PRICE":"178150.00","MED_SALES_PRICE":"147350.00"},
{"ht":"2009-03","product":"Records","TOTAL_UNITS":"16","AVG_SALES_PRICE":"151612.50","MED_SALES_PRICE":"129900.00"},
{"ht":"2009-04","product":"Records","TOTAL_UNITS":"16","AVG_SALES_PRICE":"212411.11","MED_SALES_PRICE":"206950.00"},
{"ht":"2009-05","product":"Records","TOTAL_UNITS":"35","AVG_SALES_PRICE":"195158.69","MED_SALES_PRICE":"157900.00"}
]
}



Somehow, it works fine for me :)
http://i286.org/examples/images/test1.png
Here, test it http://i286.org/examples/charts/test_1.html

dr1811
16 Jun 2010, 8:16 AM
Hey buz,

thanks for quick response. Very strange. The only difference I see is that I am using 3.2.0. I will have to look at plugging 3.1.1 in. Do you know of any issues with 3.2.0?? thanks.

buz
16 Jun 2010, 9:09 AM
Hey buz,

thanks for quick response. Very strange. The only difference I see is that I am using 3.2.0. I will have to look at plugging 3.1.1 in. Do you know of any issues with 3.2.0?? thanks.

I've also tested it in 3.2.1 and works fine.

buz

dr1811
16 Jun 2010, 5:10 PM
Buz,

I was also able to get it to work as a stand alone window with in-line data and also from a data.json served from a url, but in my app, which is back-ended with php using codeigniter, still giving me the previously stated results. bah.

Do you have any pointers on where to look to get some idea of where my values are being replaced with the 0,1,2.. values, we know they are being read in correctly, because the xaxis labels are correct.

Thanks!

buz
17 Jun 2010, 3:43 AM
Buz,

I was also able to get it to work as a stand alone window with in-line data and also from a data.json served from a url, but in my app, which is back-ended with php using codeigniter, still giving me the previously stated results. bah.

Do you have any pointers on where to look to get some idea of where my values are being replaced with the 0,1,2.. values, we know they are being read in correctly, because the xaxis labels are correct.

Thanks!

For the tooltip you can use


function() {
var periodInfo = ''+ 'Period: ' + this.point.data.ht +'';
if(this.series.name == 'Total Units'){
var statInfo = this.series.name + ': '+ Ext.util.Format.number(this.y);
} else {
var statInfo = this.series.name + ': '+ Ext.util.Format.usMoney(this.y);
} return periodInfo + '\n' + statInfo;
}

Maybe that will work

dr1811
17 Jun 2010, 4:47 AM
Buz,

You are just stellar! That did it. I saw that you had used the this.point.data.name in the site visit example, but it did not click, the .name threw me, i guess.

So, as a last question to this, why can the xaxis data point be this.x or this.point.data.x, when in-line data is used to populate the graph vs. only this.point.data.x when echoed/printed from the server??

You really did a great job here!! Now I don't have to chase down timing issues with undefined "swf.data xxx" messages. Thanks again!!

soulgen
20 Jun 2010, 7:42 PM
I got a problem in getting value of xField..

I dont know why but sometimes when I mouseover the series, the xField (or this.x) value is correct (ex: 'product1', 'product 2', 'product 3', ...), but sometimes it just shown an index key (0, 1, 2, 3, ...)

Here is the code:



var productsChart = new Ext.ux.HighChart({
id: 'productsChart'
,store: productsChartStore
,xField: 'product_name'
,series: [
{
name: 'Quantity'
,yField: 'qty'
}
]
,chartConfig: {
chart: {
defaultSeriesType: 'column'
}
,title: {
text: 'Title goes here'
}
,xAxis: [
{
title: {
enabled: true
,text: 'Products'
}
}
]
,yAxis: {
title: {
text: 'Qty'
}
,labels: {
formatter: function() {
return this.value;
}
}
}
,tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br />' + this.series.name + ' = ' + this.y;
}
}
}
});

tvik
24 Jun 2010, 2:25 AM
Hi,
I'm using Highcharts with Extjs in a pilot project. Now, as Highcharts is moving towards SVG from Canvas and Extjs bought a theoretically great (but undocumented) SVG drawing library I'm curious what the Extjs Highcharts plugin's predestination is. Buz: will you continue the development and the bug fixing?

It seems logical to me, that if extjs has some internal Flash chart drawing facility and gRaphael would support the SVG drawing then Highcharts could be a strong HTML5/Canvas alternative. ...if it wouldn't change to SVG.
Thanks for the great work! Viktor

buz
24 Jun 2010, 6:46 AM
Hi,
I'm using Highcharts with Extjs in a pilot project. Now, as Highcharts is moving towards SVG from Canvas and Extjs bought a theoretically great (but undocumented) SVG drawing library I'm curious what the Extjs Highcharts plugin's predestination is. Buz: will you continue the development and the bug fixing?

Yes, I will continue development, but only when Highcharts will keep a couple steps ahead of the gRaphael library. I don't think gRaphael will become just as good as Highcharts (within a few months).



It seems logical to me, that if extjs has some internal Flash chart drawing facility and gRaphael would support the SVG drawing then Highcharts could be a strong HTML5/Canvas alternative. ...if it wouldn't change to SVG.
Thanks for the great work! Viktor
SVG is the future. It will also be included in IE9, so I think it is the good way to choose. Also, it makes it easier to use highcharts generated code (SVG) in something like a PDF/doc.

plaak
26 Jun 2010, 3:34 AM
Thank for the great UX. I don't mean to sound ungrateful but the HighchartsAdapter was missing some semicolons that prevented it from working properly in multiple browsers once minified! I added a few and everything works fine now. Just an FYI and thanks!

BlueCamel
28 Jun 2010, 3:09 PM
This post could be unintentional FUD.

For what it's worth, in my quick observational testing, SVG appears to be slower than canvas when dealing with a large number of points on a graph. I *assume* this is because SVG operates in the DOM (each point in the graph is a DOM node) where as canvas drawing does not. Has anyone looked into it in depth?

fabads
30 Jun 2010, 8:13 AM
Hello,

Is this possible to include highchart into a plugin?

For example, I tried to create a plugin consisting of a panel, a toolbar and an highchart.
Without encapsulating into a plugin, the code works fine. But when I try to include the highchart into the plugin, the chart is not displayed (the panel & the toolbar are displayed).

I use something like that :


Ext.namespace('W3h.panels');

W3h.panels.Graph = Ext.extend(Ext.Panel,{
initComponent: function(){
this.store = new Ext.data.JsonStore(...);

W3h.panels.Graph.superclass.initComponent.call(this);
},

width: 700,
height: 400,

items : new Ext.ux.HighChart(..... store: this.store ...),
tbar: new Ext.Toolbar(.....)
});

Ext.reg('graph', W3h.panels.Graph);


Why am I wrong ?

buz
30 Jun 2010, 11:04 AM
Your highchart component is created when the panel is extended. When the Ext library is initialized. You need to create the HighChart component (or other components) when the initComponent (or the constructor) is called.



Ext.namespace('W3h.panels');

W3h.panels.Graph = Ext.extend(Ext.Panel,{
width: 700,
height: 400,

// Initialize component (called by the constructor)
initComponent: function(){

//First create the store.
this.store = new Ext.data.JsonStore({});

// Second: Add the items (Toolbar, Highchart etc.)
Ext.apply(this, {
items: new Ext.ux.HighChart({
store: this.store
}),
tbar: new Ext.Toolbar({ })
});

// Call the superclass
W3h.panels.Graph.superclass.initComponent.call(this);
}
});
Ext.reg('graph', W3h.panels.Graph);

fabads
30 Jun 2010, 11:33 AM
Hello Buz,

Thanks a lot for your code sample. The component is now displayed with the chart.
I don't really understand why we need to use the Ext.apply function (in the doc it said that Apply copies all the properties of config to obj) instead of directly define the properties in the component.

Regards.

buz
30 Jun 2010, 12:24 PM
Hello Buz,

Thanks a lot for your code sample. The component is now displayed with the chart.
I don't really understand why we need to use the Ext.apply function (in the doc it said that Apply copies all the properties of config to obj) instead of directly define the properties in the component.

Regards.
Ext.apply is not required. this.items=x will work too.
Ext.apply and applyIf are handy tools for using in the constructor


constructor: function(config){
Ext.applyIf(this, config, {
title: 'Will only be set if there is no title yet'
})
Ext.apply(this, {
title: 'This will override the title'
});
superclass....
}

fabads
2 Jul 2010, 12:34 PM
The mistery continue :

If a use this code :

Ext.namespace('W3h.panels');

W3h.panels.Graph = Ext.extend(Ext.Panel,{
width: 700,
height: 400,

// Initialize component (called by the constructor)
initComponent: function(){

//First create the store.
this.store = new Ext.data.JsonStore({});

// Second: Add the items (Toolbar, Highchart etc.)
Ext.apply(this, {
items: new Ext.ux.HighChart({
store: this.store
}),
tbar: new Ext.Toolbar({ })
});

The chart is not updated with the values added in the store.

If I use this code :


Ext.namespace('W3h.panels');

W3h.panels.Graph = Ext.extend(Ext.Panel,{
width: 700,
height: 400,

// Initialize component (called by the constructor)
initComponent: function(){

//First create the store.
store = new Ext.data.JsonStore({});

// Second: Add the items (Toolbar, Highchart etc.)
Ext.apply(this, {
items: new Ext.ux.HighChart({
store: store
}),
tbar: new Ext.Toolbar({ })
});

it works ... and I don't understand why ...

fabads
4 Jul 2010, 10:20 AM
Hello,

Another question, what is the best way to reset the chart ?

I have a datepicker which allow to select a date. But when there is no data on a given date, the chart does not reset (I have the last chart always displayed).

I tried removeAll() and a chart refresh() on the store, but it does not seem to work.

Thanks for your help.

kurt schrauwen
12 Jul 2010, 6:51 AM
Hai,

I'm looking for a way how to change the Highcharts theme from default to a grid style like on the Highcharts home page.

Has someone an idea how to do this ?

Thanks,
Kurt

lalllall
15 Jul 2010, 7:15 AM
Hi Buz, Do you plan to upgrade adapter-extjs.js to be compatible with Highcharts 2.x? The current version does not work, since the Highcharts.Chart is rendered differently now. I already tried to fix it. The errors are gone, but I can only see the chart grid without any chart content for line and bar charts as an example. Thanks and regards.

enpasos
18 Jul 2010, 3:01 AM
I appreciate this work very much. Having the adapter ported to support Highcharts 2.x would be more than cool. What are your plans?

buz
18 Jul 2010, 3:40 AM
Yes, I will continue development. V2 should be ready very soon.

Regards,

Daniel

jmass
18 Jul 2010, 12:11 PM
Hello Buz,

im having problems when using the optional module to export highcharts, which is in the following js:
<!-- 1a) Optional: the exporting module -->
<script type="text/javascript" src="graficas/js/modules/exporting.js"></script

I experience the fllowing error message:
this.updatePosition is not a function
If I take it off verything goes ok but I need to export the image from the graphic...how should I solve the problem?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Graficas</title>
<!-- Librerias de ext -->
<link rel="stylesheet" type="text/css" href='ext-3.1.0/resources/css/ext-all.css'>
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script>
<!-- <script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>-->
<script type="text/javascript" src="ext-3.1.0/ext-all.js"></script>

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

<!-- ExtJS Plugin for Highcharts -->
<script type="text/javascript" src="ext-3.1.0/adapter/highcharts/Ext.ux.HighChart.js"></script>


<!-- 1. Add these JavaScript inclusions in the head of your page -->
<!--<script type="text/javascript" src="graficas/js/jquery.min.js"></script> -->
<script type="text/javascript" src="graficas/js/highcharts.js"></script>


<!-- 1a) Optional: the exporting module -->
<script type="text/javascript" src="graficas/js/modules/exporting.js"></script>

<script type="text/javascript">

var chart;
var store = new Ext.data.JsonStore({
fields: ['season', 'total'],
data: [{
season: 'Summer',
total: 150
},{
season: 'Fall',
total: 245
},{
season: 'Winter',
total: 117
},{
season: 'Spring',
total: 184
}]
});

Ext.onReady(function(){

chart = new Ext.ux.HighChart({
store: store,
series: [
{
type: 'pie',
name: 'Views',
categorieField: 'season',
dataField: 'total'
}
],
chartConfig: {
chart: {
margin: [50, 150, 60, 80]
},
title: {
text: 'ExtJS Torta',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Source: Prueba Johann',
style: {
margin: '0 100px 0 0' // center it
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
}
}
});


/**
*/
var graphWin = new Ext.Window({
title: 'Resizeable Graph Window',
resizeable: true,
width: 800,
height: 450,
layout: 'fit',
items: [chart]
});
graphWin.show();
/*
new Ext.Panel({
renderTo: 'chart',
width: 800,
height: 450,
layout: 'fit',
items:[chart]
});*/
});
</script>

</head>
<body >
<div id="chart"></div>


</body>
</html>

buz
18 Jul 2010, 11:06 PM
Highcharts v2 is not supported yet. And since updatePosition is not needed anymore, it needs to be removed. I'm working on that.

nego2
19 Jul 2010, 6:23 AM
Hi, buz!
Can I use Ext.ux.HighChart with Ext 2.2? A this moment I have a problem with rendering HighChart. Thanx.

sosy
24 Jul 2010, 2:33 AM
I love it! Added to my favs.. thnx!

aminaq
25 Jul 2010, 2:59 PM
Hi,

I have two graphs and I'm trying to sync the zoom between them. It works when using Highcharts only, but no luck when adding it in ExtJs. Here is what I'm trying to achieve: http://aminaq.com/eaton/chart3.php

I have two charts named myChart1 and myChart2. Here is the piece of code from myChart1:



chartConfig: {
chart: {
zoomType : 'x',
events: {
selection: function(event) {
if(event.resetSelection){
for(var x in myChart2.chart){
myChart2.chart.xAxis[x].setExtremes(null, null, false);
}
myChart2.chart.redraw();
}else{
for(var x in event.xAxis){
myChart2.chart.xAxis[x].setExtremes(event.xAxis[x].min, event.xAxis[x].max, false);
}
myChart2.chart.redraw();
}
}
},
},


Appreciate any guidance.
Thanks!

enpasos
29 Jul 2010, 6:07 AM
Hi Daniel, I do not want do bother you ... I am just very keen on using Highcharts V2 ... any news on your adapter? Thanks :-)

fabads
1 Aug 2010, 10:33 PM
Hello,

I want to add a highchart into a tabpanel but it doesn't display.
Here is my sample code.
This code displays the tabs, the toolbar but not the highchart component.
If you remove the toolbar, highchart is displayed ...

Where am I wrong ???? :((

Thx.



W3h.panels.GraphViewer = Ext.extend(Ext.Container,{
width: 700,
height: 500,

initComponent: function(){
var store = new Ext.data.JsonStore({
url: '../fcgi/w3homed.fcgi',
root: "Points",
idProperty: 't',
fields:['p', 't']
});

Ext.apply(this, {
items: new Ext.TabPanel({
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Test',
layout: 'fit',
tbar: {
items: [
{
xtype: 'datefield',
id: 'dtMonth',
fieldLabel: 'Choose month',
plugins: 'monthPickerPlugin',
format: 'M Y',
editable: false,

}
]},
items: [new Ext.ux.HighChart({
loadMask: false,
store: store,
chartConfig:{
chart: { zoomType: 'x' },
title: { text: '' },
xAxis: {
type: 'datetime',
maxZoom: 2000, // 2 secondes
title: { text: null }
},
yAxis: {
title: { text: 'Energy (Watts)' },
startOnTick: false,
showFirstLabel: false
},
tooltip: {
formatter: function() {
return '<b>'+ (this.point.name || this.series.name) +'</b><br/>'+
Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2) +' Watts';
}
},
legend: { enabled: false },
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, "#4572A7"],
[1, 'rgba(0,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: true,
states: {
hover: {
enabled: true,
radius: 3
}
}
},
shadow: false,
states: {
hover: { lineWidth: 1 }
}
}
}
},
series: [{
type: 'area',
yField: 'p',
xField: 't',
name: 'Energy',
}]
})],
},{
title: 'Another tab',
html: "Another tab"
}]
})
});
W3h.panels.GraphViewer.superclass.initComponent.call(this);
}
});

BigSeanDawg
3 Aug 2010, 12:15 PM
I didn't have any trouble using the existing adapter until I tried to destroy a chart (using the destroy method). I needed to add the removeEvent and stop functions to the adapter. Below is my solution:



removeEvent: function(el, event, fn) {
if (el.removeListener && el.purgeListeners) {
if (event && fn) {
el.removeListener(event, fn)
}
else {
el.purgeListeners();
}
}
else {
var xel = Ext.get(el);
if (xel) {
if (event && fn) {
xel.removeListener(event, fn)
}
else {
xel.purgeAllListeners();
}
}
}
},

stop: function (el) {
// no animation exists in the animate Ext adapter method, so we don't need to stop anything
},

buz
4 Aug 2010, 12:02 PM
I didn't have any trouble using the existing adapter until I tried to destroy a chart (using the destroy method). I needed to add the removeEvent and stop functions to the adapter. Below is my solution:



removeEvent: function(el, event, fn) {
if (el.removeListener && el.purgeListeners) {
if (event && fn) {
el.removeListener(event, fn)
}
else {
el.purgeListeners();
}
}
else {
var xel = Ext.get(el);
if (xel) {
if (event && fn) {
xel.removeListener(event, fn)
}
else {
xel.purgeAllListeners();
}
}
}
},

stop: function (el) {
// no animation exists in the animate Ext adapter method, so we don't need to stop anything
},


Nice work.

I've got the adapter working for the barcharts and the pie. Not for the lines yet. Somehow the setWidth function is not working. :(


HighchartsAdapter = {

each: Ext.each,

map: function(arr, fn){
var results = [];
if (arr)
for (var i = 0, len = arr.length; i < len; i++)
results[i] = fn.call(arr[i], arr[i], i, arr);
return results;
},

grep: function( elems, callback, inv ) {
var ret = [];

// Go through the array, only saving the items
// that pass the validator function
for ( var i = 0, length = elems.length; i < length; i++ )
if ( !inv != !callback( elems[ i ], i ) )
ret.push( elems[ i ] );

return ret;
},

merge: function(){
var args = arguments;
/**
* jQuery extend function
*/
var jqextend = function() {
// copy reference to target object
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}

// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !Ext.isFunction(target) )
target = {};

// extend jQuery itself if only one argument is passed
if ( length == i ) {
target = this;
--i;
}

for ( ; i < length; i++ )
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null )
// Extend the base object
for ( var name in options ) {
var src = target[ name ], copy = options[ name ];

// Prevent never-ending loop
if ( target === copy )
continue;

// Recurse if we're merging object values
if ( deep && copy && typeof copy === "object" && !copy.nodeType )
target[ name ] = jqextend( deep,
// Never move original objects, clone them
src || ( copy.length != null ? [ ] : { } )
, copy );

// Don't bring in undefined values
else if ( copy !== undefined )
target[ name ] = copy;

}

// Return the modified object
return target;
};
return jqextend(true, null, args[0], args[1], args[2], args[3]);
},

hyphenate: function (str){
return str.replace(/([A-Z])/g, function(a, b){
return '-'+ b.toLowerCase()
});
},

addEvent: function (el, event, fn) {
var xel = Ext.get(el);
if (xel) {
xel.addListener(event, fn)
} else {
if (!el.addListener){
Ext.apply(el, new Ext.util.Observable());
}
el.addListener(event, fn)
}

},

fireEvent: function(el, event, eventArguments, defaultFunction) {
var o = {
type: event,
target: el
}
Ext.apply(o, eventArguments)

// if fireEvent is not available on the object, there hasn't been added
// any events to it above
if (el.fireEvent) {
el.fireEvent(event, o);
}

// fire the default if it is passed and it is not prevented above
if (defaultFunction) defaultFunction(o);
},

removeEvent: function(el, event, fn) {
if (el.removeListener && el.purgeListeners) {
if (event && fn) {
el.removeListener(event, fn)
}
else {
el.purgeListeners();
}
}
else {
var xel = Ext.get(el);
if (xel) {
if (event && fn) {
xel.removeListener(event, fn)
}
else {
xel.purgeAllListeners();
}
}
}
},

stop: function (el) {
// no animation exists in the animate Ext adapter method, so we don't need to stop anything
},

animate: function (eli, params, options){
var el = eli;
var isSVGElement = eli.attr;

if (isSVGElement) {
// el = Ext.get(eli.element);
//
// var gsStyle = function(name, value){
// if (typeof(name)=="string"&&value!=null){
// var x = {};
// x[name]=value;
// this.attr(x);
// } else {
// this.attr(name);
// }
// }
// // add setStyle and getStyle methods for internal use in Ext

// el.attr = isSVGElement;
el = Ext.get(eli.element);
el.setStyle = el.getStyle = eli.attr;
}
if(options){
if(options.duration==undefined || options.duration==0){
options.duration=1;
}
else{
options.duration=options.duration/1000;
}
}

if (params.width!==undefined) {

el.setWidth(parseInt(params.width), {
duration:options.duration
});
}

else if (params.height!==undefined) {
el.setHeight(parseInt(params.height), {
duration:options.duration
});
}

else if (params.left!==undefined) {
el.setLeft(parseInt(params.left));
}

else if (params.opacity!==undefined) {
el.setOpacity(parseInt(params.opacity),{
duration:options.duration,
callback:options.complete
});
}

else {
el.setTop(parseInt(params.top));
}
},

getAjax: function (url, callback) {
Ext.Ajax.request({
url: url,
success: function(response){
callback(response.responseText);
}
});
}
}

fabads
5 Aug 2010, 6:09 AM
Hello,

Firebug raises an error when my highchart is displayed, in fact when the store.load is called.
When can I call the store load (which refresh the graph) ?

Here a sample of my code:


W3h.panels.GraphViewer = Ext.extend(Ext.Container, {
...
initComponent: function(){
this.storeDay = new Ext.data.JsonStore({
url: 'test.json',
root: "Points",
idProperty: 't',
fields:['p', 't']
});
this.storeDay.load();


this.hcDay = new Ext.ux.HighChart({
loadMask: false,
store: this.storeDay,
chartConfig:{
...
},
series: [{
...
}]
});

Ext.apply(this, {
...
items: [this.hcDay]

});

W3h.panels.GraphViewer.superclass.initComponent.call(this);
}
});And the error:

this.chart is undefined
var data = new Array(), seriesCount = this.chart.series.length, i;

Ext.ux...hart.js (ligne 383)


Any idea ? Pb of scope ?

Thx for support.

buz
5 Aug 2010, 12:43 PM
Hello,

Firebug raises an error when my highchart is displayed, in fact when the store.load is called.
When can I call the store load (which refresh the graph) ?

Here a sample of my code:


W3h.panels.GraphViewer = Ext.extend(Ext.Container, {
...
initComponent: function(){
this.storeDay = new Ext.data.JsonStore({
url: 'test.json',
root: "Points",
idProperty: 't',
fields:['p', 't']
});
this.storeDay.load();


this.hcDay = new Ext.ux.HighChart({
loadMask: false,
store: this.storeDay,
chartConfig:{
...
},
series: [{
...
}]
});

Ext.apply(this, {
...
items: [this.hcDay]

});

W3h.panels.GraphViewer.superclass.initComponent.call(this);
}
});And the error:

this.chart is undefined
var data = new Array(), seriesCount = this.chart.series.length, i;

Ext.ux...hart.js (ligne 383)
Any idea ? Pb of scope ?

Thx for support.

Why not just extend Ext.ux.Highchart? And i do not have this.chart at line 383? Are you using version 0.3.1?

fabads
5 Aug 2010, 9:57 PM
Hello Buz,


Why not just extend Ext.ux.Highchart?

The code above is just an extract of a component I've created (or I try to create) that not include only highchart.



And i do not have this.chart at line 383? Are you using version 0.3.1?
I'm using the 0.3.0 release. I've just upgraded to 0.3.1 and the error disappear !

Thanks a lot.

denise
12 Aug 2010, 10:27 AM
Using:
Ext 3.2.1
Highcharts 1.2.5
ExtJS Highcharts Adapter 0.3.1

I have been using an older version of the adapter for some time now (HighChartPanel) and everything has been working great! I decided I should update to the new version of the adapter and unfortunately it broke everything.

In a nutshell I used to be able to display multiple Highchart graphs on a single panel using a vertical box layout. I wrote a very simple test page and what ends up showing in the browser (FF 3.5.9 and IE8, minimum requirements) is a single chart, always shown with the contents of the second chart. If I use Firebug I can see the div for both charts but while the first one contains other markup, the second one is empty.

I can't figure out what's going on! Does anybody have any experience with a similar problem?

denise
12 Aug 2010, 1:29 PM
Fixed my own problem:
For some reason the panel el.dom was showing an updated value, but when I looked at the chartConfig.chart.renderTo property it wasn't getting updated. Weird. So I set the ID on the Ext.ux.HighChart component and then passed it as part of the chartConfig.chart.renderTo property.

buz
17 Aug 2010, 2:00 AM
Hello all,

I've updated the Highcharts adapter



Adapter - http://www.i286.org/highcharts/adapter/adapter-extjs.js
Testing - http://www.jsfiddle.net/AMx6r/

Please tell me if you see any errors =)

Regards, Daniël

gthe
17 Aug 2010, 2:39 AM
Thank you for your work.
Could you convert the example of time.html to the new version?
I tried to do it, but received an error in 75 line adapter-extjs.js [", copy);"] - "too much recursion".
The error occurs as soon as I add the line:

store: store,

thanks.

r_honey
17 Aug 2010, 11:24 AM
I've updated the Highcharts adapter

Please tell me if you see any errors =)


Hi Daniell, thanks for the superb work. I tried to use your extension and adapter (from the first post), but got a javascript error.

Then, I updated the adapter from your second-last post above, and now I get a js error in the following lines:



Ext.applyIf(this.chartConfig.chart, {
renderTo: this.el.dom,
events: {
load: function(){
this.updatePosition();
}
}
});


The error occurs at updatePosition() saying the object does not support this method.

r_honey
17 Aug 2010, 11:41 AM
Hi buz, thanks for the great work. I did not realize that your Extension is not yet compatible with HighCharts 2.x., Just a suggestion, but probably you should mention this more clearly on on the first page, and in Ext.ux.HighCharts.js (instead of just 1.2.5+). This might save many a users tremendous heart-burns.

Also, I am able to get your extension working against the latest official HighCharts release (2.0.3). Just needed to comment calls to chart.updatePosition() at 3 places. Those interested can find the update extension that works against 2.0.3 attached.

mm_202
17 Aug 2010, 6:35 PM
Using r_honey's previous post and the adapter-extjs.js code that buz posted in post #195 (http://www.sencha.com/forum/showthread.php?93669-Highcharts-adapter-and-plugin-for-ExtJS&p=502151#post502151), Extjs 3.2.1 and Highcharts 2.0.3 are working perfectly!

Thank you guys for all of your hard work and effort!

Shaguar
17 Aug 2010, 8:22 PM
Hi,
how can i populate a column chart with an ajax data.store?
All examples i found use predefined categories for at least one axis, but i just want to map both axis to values in my data.store
There is a pie chart example where i can use 2 config variables


categorieField: 'season',
dataField: 'total'

but these 2 dont work with a column chart.
All i've got so far is:


new Ext.ux.HighChart({
title:'HighChart',
height: 500,
store: store,
series: [
{
type: 'column',
name: 'Views',
categorieField: 'var1',
dataField: 'var2'
}
],
chartConfig: {
chart: {
margin: [50, 150, 60, 80]
},
title: {
text: 'ExtJS PIE',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Source: extjs.com',
style: {
margin: '0 100px 0 0' // center it
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
}
}
})

my store looks like this:

var store2 = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy({
url: 'test.php',
method: 'POST'
}),
baseParams:{task: "test"},
reader: new Ext.data.JsonReader(
{
root: 'results'
},
[
{name: 'var1'},
{name: 'var2', type: 'int'}
]
),
}
);

r_honey
17 Aug 2010, 9:09 PM
Hi,
how can i populate a column chart with an ajax data.store?
All examples i found use predefined categories for at least one axis, but i just want to map both axis to values in my data.store


Hi Shagur, use the Extension's xAxis config option to specify the Store field name to be shown along x-axis. Y-axis are controlled by series' objects. See the examples in first post of this Thread.

Shaguar
17 Aug 2010, 11:07 PM
Ok thanks, but the point is that i cant find any config option parameter whatever where i can define the store field name.
What is the term for this config option?
Can you give me an example?
Thanks.

r_honey
17 Aug 2010, 11:28 PM
Please check the following example from Daniell:
http://www.i286.org/examples/charts/multi.html

See the example's source to check how to use xAxis option.

Shaguar
20 Aug 2010, 11:38 PM
Ok thanks it works now, but i've got another small problem.
I try to rotate the xAxis labels, this is the code block :


xAxis:
{
labels: {
rotation: -45,
align: 'right',
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
}

but where do i have to put this?
If i place this inside the 'chartConfig' tab, i get this error:


this.chartConfig.xAxis[0] is undefined
chrome://firebug/content/blank.gif this.chartConfig.xAxis[0].categories = data; Ext.ux...hart.js (Zeile 291)

this.chart.series[i] is undefined
chrome://firebug/content/blank.gif this.chart.series[i].hide();



but if i put it outside the chartConfig tag, i dont get any errors but
it it doesnt have any effect on the chart

buz
21 Aug 2010, 1:33 AM
Ok thanks it works now, but i've got another small problem.
I try to rotate the xAxis labels, this is the code block :


xAxis:
{
labels: {
rotation: -45,
align: 'right',
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
}
but where do i have to put this?
If i place this inside the 'chartConfig' tab, i get this error:


this.chartConfig.xAxis[0] is undefined
chrome://firebug/content/blank.gif this.chartConfig.xAxis[0].categories = data; Ext.ux...hart.js (Zeile 291)

this.chart.series[i] is undefined
chrome://firebug/content/blank.gif this.chart.series[i].hide();


but if i put it outside the chartConfig tag, i dont get any errors but
it it doesnt have any effect on the chart

The xAxis config needs to be an Array


xAxis:
[{
labels: {
rotation: -45,
align: 'right',
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
}]

Shaguar
21 Aug 2010, 10:23 PM
Thanks again, but now i've got troubles with the tooltip, it wont show the correct values.
Instead of the correct xAxis values, it only shows continuous numbers.


tooltip:
{
formatter: function()
{
return '<b>Year '+ this.x +'</b><br/>'+
this.y + ' ';
}
}
2206922070

Shaguar
23 Aug 2010, 9:43 PM
Ok i found a solution posted earlier in this thread, just replaced this.x with this.point.data.xvalue and now it works

toma
23 Aug 2010, 10:25 PM
Hello all,

I've updated the Highcharts adapter


Adapter - http://www.i286.org/highcharts/adapter/adapter-extjs.js
Testing - http://www.jsfiddle.net/AMx6r/
Please tell me if you see any errors =)

Regards, Daniël

The pie chart can't selected?

gthe
25 Aug 2010, 10:52 PM
The pie chart can't selected?
I join issue.
Can this somehow fix it?

buz
26 Aug 2010, 12:11 AM
I join issue.
Can this somehow fix it?

try this one: http://www.jsfiddle.net/AMx6r/27/
Not tested in IE!

gthe
26 Aug 2010, 12:19 AM
try this one: http://www.jsfiddle.net/AMx6r/27/
Not tested in IE!
I see by_data_selected point [Chrome], but can`t select any other point by mouse.
I try this in ff 3.6.8

buz
26 Aug 2010, 1:36 AM
I see by_data_selected point [Chrome], but can`t select any other point by mouse.
I try this in ff 3.6.8

Is your cache cleared? Because FireFox seems to take to old one. (It works here). Close all instances and try again =)

gthe
26 Aug 2010, 6:19 AM
I cleared the cache. I rebooted computer. I tested on another comp. I tested on old fifefox (3.5.11). I tested on newest ff - 4 beta 4.
Nothing work.
It work only on Google chrome.
But with Ext.ux.HighChart.js and same chart config it not work even in chrome.

r_honey
26 Aug 2010, 11:28 AM
Hi buz, I have updated the PieSerie class to support "name" and "field" option for columns. Please find the updated PieSerie code attached.

The columns now need to be specified as:


columns: [{ field: 'grossAmount', name: 'Gross Amount' },
{ field: 'commissionAmount', name: 'Commission'}]


I found myself having to change the name everytime in tooltip formatter, because store field names are not normally what yu want to display to the end user. So, you can now specify the display name and store field name separately for the PieSerie too.

christophe67
30 Aug 2010, 2:54 AM
Hi,
I use the last version of HighCharts 2.0.3, and extension form r_honey, that's run well but I can not export. When I export I have just a blank canvas. Have any ideas thanks for your help
christophe

r_honey
30 Aug 2010, 10:49 AM
Hi,
I use the last version of HighCharts 2.0.3, and extension form r_honey, that's run well but I can not export. When I export I have just a blank canvas. Have any ideas thanks for your help
christophe

I face the same issue. Reported it at HighCharts forums too nut no help. would try to look into if I get time.

leonardb
9 Sep 2010, 1:01 PM
I'd been using the old version for quite a while in testing and decided to try and update to latest version and am running into a strange error when testing on Chrome

I'm getting the error message multiple times and for the life of me cannot track down the cause
Error: Problem parsing d=""

The error can be replicated using;
time.html example
highchart.src.js versions 2.0.1, 2.0.2, 2.0.3, 2.0.4
adapter-extjs.js file from post #195
Ext.ux.HighChart.js 0.3.1


I am able to replicate this on Safari as well, so it may be a webkit issue. Unfortunately there is nothing helpful beyond that single error message, which occurs multiple times.

Trying to use an older 1.2.5 version of highchart.src.js just results in a new error in adapter-extjs.js (line 181 'el.setWidth' is not a function

Any help/advice would be appreciated.

Thanks,
Leonard

r_honey
9 Sep 2010, 1:44 PM
Hi leonard, try using the updated adapter from #198 (http://www.sencha.com/forum/showthread.php?93669-Highcharts-adapter-and-plugin-for-ExtJS&p=502528#post502528) against the latest version of HighCharts.

It works fine for me.

buergi
10 Sep 2010, 1:23 PM
After updating the extension with #198 and Highchart 2.0.4 (or 2.0.3), it's not working well when using a JSON-store...

First, I render the chart component. Then I create a new JSON-Store and use bindStore to refresh the chart.

If I have only one serie, it doesn't display it. But if I doubleclick the label in the legend to hide/show it, it displays it.
If I have more than one series, they display, but the tooltip is stick to the bottom serie, until I hide & show it. then it's correct...

buergi
10 Sep 2010, 1:49 PM
Well, here's my fix:

I added a redraw() at the end of the method refresh. The end looks like this now:



if (this.xField){
this.updatexAxisData();
}

this.chart.redraw();
}

rebeccapeltz
10 Sep 2010, 2:59 PM
Can you run this HighCharts plugin with ExtJS-3.2.1 or does it only worth with 3.1? I'm getting a "Cannot call method 'setWidth'" error with the time.html example. I've downloaded the fixed Ext.ux.HighChart. It would be great to get this working. I can go back to ExtJS-3.1 if needed.

r_honey
10 Sep 2010, 10:19 PM
Can you run this HighCharts plugin with ExtJS-3.2.1 or does it only worth with 3.1?

I am running it successfully with ExtJs 3.3.0, so I do not see any reason to go back to 3.1. But I have not really used it with 3.1, so maybe there's something I am not aware of.

rebeccapeltz
13 Sep 2010, 7:03 AM
I got the examples working. I think I was using an older version of the adapter-extjs.js.

rebeccapeltz
13 Sep 2010, 7:10 AM
I have the need to plot results against time xValue = time, yValue = result. My points would look something like this {"8/12/2009",1.0},{"8/12/2010", 1.1}, {"8/13/2010", 2.2}. I would want the graph to show a large gap between the first point and the second point because of the larger time interval than between the 2nd and 3rd points.

I've looked at the time series example and it looks like you're calculating the time value base in min, max and fixted interval. Is is possible to plot just time against result. How would I set up the xAxis, yAxis and series for this?

r_honey
13 Sep 2010, 7:13 AM
I have the need to plot results against time xValue = time, yValue = result. My points would look something like this {"8/12/2009",1.0},{"8/12/2010", 1.1}, {"8/13/2010", 2.2}. I would want the graph to show a large gap between the first point and the second point because of the larger time interval than between the 2nd and 3rd points.


This question might have a better answer at HighCharts forums:
http://highslide.com/forum/viewforum.php?f=9

rebeccapeltz
13 Sep 2010, 7:22 AM
The reason I asked it here is because I see it more as a matter of using the extjs readers. Originally I set this chart up in Ext, but I can't use Ext charting because of its reliance on SWF. I was using an arrayreader with this data.

var labHistoryArr = [
["1","13.1", "mEq\/L","black", "","08\/12\/2009 12:04"],
["2","14.2", "mEq\/L","red", "b","08/13/2010 12:04"],
["3","15.3", "mEq\/L","green", "c","08/14/2010 12:04"],
["4","16.4", "mEq\/L","yellow", "d","08/15/2010 12:04"],
["5","17.5", "mEq\/L","black", "e","08/16/2010 12:04"]
];
var labHistoryReader = new Ext.data.ArrayReader({}, [
{name: 'series'},
{name: 'result'},
{name: 'uom'},
{name: 'normColor' },
{name: 'normIndicator' },
{name: 'resultDate', type: 'date', dateFormat: 'n/j/Y h:i'}
]);

Then I simply mapped xField to 'resultDate' and yField to result. I can't see how to do this mapping in HighCharts. Maybe it's not possible, so I'm looking for an example - I'll look back at the highchart forum as you suggest.

r_honey
13 Sep 2010, 10:24 AM
The reason I asked it here is because I see it more as a matter of using the extjs readers.

Hi, the reason I referred you to HighCharts forums was because your question related to chart displaying and not ExtJs integration. For an example of how to integrate ExtJs readers with HighCharts, view the source of the following example from Post 1 of this thread:
http://www.i286.org/examples/charts/pie.html

leonardb
14 Sep 2010, 7:56 AM
Thanks for the help Rahul, but it did not stop the error.

Not much info on google searches, but it appears to happen with some of the google visualization api stuff as well with null/empty values. It appears this error message is actually from the SVG 'engine' in Webkit.

Trial and error took me to line 1379 in highchart.src.js v2.0.4.

- attr(element, key, value);
+ if (value != '') attr(element, key, value);

Also need change on line 1367

- attr(shadows[i], key, value);
+ if (value != '') attr(shadows[i], key, value);

After this change, the error no longer appears. I'm not sure if the change will affect anything else.

Leonard

r_honey
14 Sep 2010, 8:18 AM
it appears to happen with some of the google visualization api stuff as well with null/empty values. It appears this error message is actually from the SVG 'engine' in Webkit.

Trial and error took me to line 1379 in highchart.src.js v2.0.4.
- attr(element, key, value);
+ if (value != '') attr(element, key, value);

After this change, the error no longer appears. I'm not sure if the change will affect anything else.

Leonard

It might be beneficial then to report the same at HighCharts forums to the admins there. In your benefit, they might tell you whether or not this would "affect anything else".

In the community's benefit, if this is a bug with HighCharts, they would fix it and save others many a hours of grief.

leonardb
14 Sep 2010, 8:21 AM
It might be beneficial then to report the same at HighCharts forums to the admins there. In your benefit, they might tell you whether or not this would "affect anything else".

In the community's benefit, if this is a bug with HighCharts, they would fix it and save others many a hours of grief.

Had already reported it before posting here. I should have referenced the post though http://highslide.com/forum/viewtopic.php?f=9&t=7480&p=35854#p35849

Note. the same change is needed on line 1367 if your plots are using shadows.

Leonard

Hemlock
15 Sep 2010, 7:42 AM
You should make a defensive copy of initalConfig.chartConfig in your initComponent so the initialConfig field is actually useful. If you don't all the changes to the chart end up reflected in initialConfig.

Christiand
15 Sep 2010, 10:09 AM
I can't figure out how to set yAxis min and max values with a JsonStore. If I do not set these values, the data doesn't appear.

here is stripped code from my setup (which is working when I hardcode min and max values)



var store = ({
xtype: 'jsonstore',
autoLoad: true,
url: '/S3IS01F011/getinvsumgrid/divs/'+cfgObj.divselector+'/type/all',
root: 'data',
fields: ['DIV','TYPE','VOS','COST','CORE','PR9']
});

var seriesObj = [
{
type: 'column',
name: 'COST',
yField: 'COST'
},{
type: 'column',
name: 'CORE,
yField: 'CORE'
},{
type: 'column',
name: 'List Price',
yField: 'PR9'
}
]

var panel = new Ext.Panel({

items:
{
xtype: 'highchart',
store: store,
series: seriesObj,
xField: 'VOS',
chartConfig: {

title: {
text: 'Inventory Summary'
},
xAxis: [{
title: 'Vendors'
}],
yAxis: [{
title: {
text: 'Price'
},
min: 0,
max: 100000
}]
}
}
});


is it me doing something wrong (shouldn't the API create the min and max values automatically) ?

r_honey
15 Sep 2010, 11:01 AM
Hi chris, any chart configuration outside the series and xField should go directly to the chartConfig option, with exactly the same format as the specified in HighCharts reference docs.

shinkenno
27 Sep 2010, 4:12 AM
Nice plugin !
Concerning HighCharts, I am especially interested in the exporting module. So I did some experimentations, and it seems to works, excepted that the filename (which can be modified in exporting settings of HighCharts) is always 'chart.xxx' even if I specify another name in the filename config.
Does that mean that the exporting module is not part of the adapter ? Or is it a bug ?
(I am using Ext 3.2.1, Highcharts 2.0.5 and adapter 0.31)
Thanks!

shinkenno
28 Sep 2010, 7:10 AM
Hi again,

I prepared a little example (http://iya09-ivs.obs.u-bordeaux1.fr/ivslive/js/Ext.ux.HighCharts/charts/toto.html) to illustrate my previous post.
(tested with Firefox 3.6.10)

I also just remarked that there is no 'exporting' section in the Ext.ux.HighChart file I am using (v0.31)...
Maybe it's coming from here: if the parameters are not sent by ExtJS, default values will always be used.

Erci
1 Oct 2010, 6:45 AM
I've got an issue similar to the one in post #219 and #220, but the fix in #220 does not get rid of my problem.
I am trying to render a simple column graph with hard-coded data. If I don't specify min and max values for yAxis, the columns are invisible. If I do specify min and max values, the columns are barely visible (see image). When I click on the series to hide it and then click on it again to show it, the column shows up correctly.

I am using adapter from post #198 and Highcharts 2.0.5. I also tried this with old adapter and Highcharts 1.2.5 and I get the same result.

Here's the code for the chart:


barGraph = new Ext.ux.HighChart({
series: [
{
type: 'column',
data: [35, 38, 43],
name: 'Rainfall'
},
{
type: 'column',
data: [11, 7, 1],
name: 'Snowfall'
}
],
xField: 'type',
chartConfig: {
chart: {
margin: [50, 150, 60, 80]
//backgroundColor: 'white'
},
title: {
text: 'test bar'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar']
}],
yAxis: [{
title: {
text: 'Amount in inches'
},
min: 0,
max: 50
}]
}
});

And here's the code where I render it in panel:


var barPanel = new Ext.Panel({
title: 'Bar Graph',
width: 410,
height: 230,
layout: 'fit',
collapsible: true,
titleCollapse : true,
frame: true,
items: [barGraph]
});

Here is how it looks: top image shows how it is rendered and bottom image shows how it looks after I click on each series to hide it and then show it. Any idea what's going on here?

http://img837.imageshack.us/img837/8669/chartissue1.jpg

Urkman
4 Oct 2010, 6:07 AM
Hello Erci,

I have the same problem. I made a small showcase:
http://extjstest.stefansturm.de/highcharts-test.html

Hope somebody can help on this...

Greetings,
Urkman

Erci
4 Oct 2010, 6:25 AM
Hello Erci,

I have the same problem. I made a small showcase:
http://extjstest.stefansturm.de/highcharts-test.html

Hope somebody can help on this...

Greetings,
Urkman

Have you tried setting min value of yAxis to -250? I'm curious if it'll draw the columns upside down, like it does for me.

Urkman
4 Oct 2010, 6:34 AM
Hello,


Have you tried setting min value of yAxis to -250? I'm curious if it'll draw the columns upside down, like it does for me.

yes, it is the same...

Urkman

liechtir
4 Oct 2010, 6:47 AM
hi guys,

is this working with sencha touch? if not do you plan to add support for it?

thanks

Urkman
4 Oct 2010, 6:56 AM
Hello,


Hello Erci,

I have the same problem. I made a small showcase:
http://extjstest.stefansturm.de/highcharts-test.html

Hope somebody can help on this...

Greetings,
Urkman

I changed the showcase and set the "min" value of yAxis to -250.
Now the bars appear, but they are shown a negative bars...

curious :-(

Urkman

neuralys
4 Oct 2010, 8:20 AM
Hi guys,

I tried to have latest Highcharts version working with the adapter / but I get several
error messages of type : this.chart.updatePosition is not a function.

As I see in the changelog of Highcharts this method was depreacated and removed
since v2.0.1.

Is there any chance to have the adpater fixed ?

Thanks

Erci
4 Oct 2010, 9:02 AM
Hi guys,

I tried to have latest Highcharts version working with the adapter / but I get several
error messages of type : this.chart.updatePosition is not a function.

As I see in the changelog of Highcharts this method was depreacated and removed
since v2.0.1.

Is there any chance to have the adpater fixed ?

Thanks

It was fixed some time ago. Post #198

Erci
4 Oct 2010, 9:03 AM
Hello,



I changed the showcase and set the "min" value of yAxis to -250.
Now the bars appear, but they are shown a negative bars...

curious :-(

Urkman

Yup. That is exactly what I'm experiencing.

buergi
5 Oct 2010, 12:17 AM
Anybody with a solution for my problem?

In IE 7 I draw a chart.. No problem... Then I add new series (no append)... There the IE warns about slow scripting.

Why is addSeries after the initial load f'n slow?

Erci
5 Oct 2010, 5:44 AM
I have a quick solution for the problem I posted in #236. I realized that the issue is animation. It's simply not running! It's plotting the columns below the "0" line and it would normally use animation to smoothly scroll them into view. Animation is not running through EXT adapter for column chart, as is.
So, the quickest solution for now is to simply add the following to your chartConfig



plotOptions: {
series: {
animation: false
}
}

Urkman
5 Oct 2010, 6:04 AM
I have a quick solution for the problem I posted in #236. I realized that the issue is animation. It's simply not running! It's plotting the columns below the "0" line and it would normally use animation to smoothly scroll them into view. Animation is not running through EXT adapter for column chart, as is.
So, the quickest solution for now is to simply add the following to your chartConfig



plotOptions: {
series: {
animation: false
}
}


Thanks for this :-)

Urkman

Christiand
6 Oct 2010, 7:32 AM
using lastest ux, highchart and adapter (with all the fixes mention), I had problem with the setTitle function. It wouldn't update properly. Using the update() after calling the setTitle() solved my problem.

wump
7 Oct 2010, 1:19 AM
Thanks for the great plugin, this was exactly what I was looking for.

I got it working with HighCharts 2.0.5 using the changes mentioned in posts #195 and #198.

fabads
9 Oct 2010, 3:14 AM
Hi,

Someone tried to concatenate & minify highcharts files (adapter, plugin and highchart.src.js) ?
I'm trying (with Aptana & RockStarapps (ie yui compressor)) but I have some errors on the file highchart.src.js.
Any advice appreciated !!