Thursday, March 3, 2011

Highcharts - updating chart with data

Hi.

I have just started using Highcharts (www.highcharts.com) and JSNI and
I am having some difficulties updating my chart with data.

Below is some sample code. First I call the 'createTestChart' method
which creates the options object and then uses this options object to
create the chart. This works fine! I then call the 'updateTestChart'
method to push further data into the chart. This doesn't work.

However, if I instead in the 'getTestConfig' method after the options
object has been created write the following code, then the extra data
is added to the chart:

options.series.push({
name: 'Julie',
data: [3, 4, 2]
});

What I want is to create the chart based on a configuration and then
update the chart with data retrieved from a server.

Regards,
Thomas.


Sample code:

public class HighchartWrapper {

private JavaScriptObject options;

public void createTestChart(String containerId) {
options = getTestConfig(containerId);
createChart(options);
}

public native void updateTestChart() /*-{

this.@com.conscius.marketshare.graph.client.util.HighchartWrapper::options.series.push({
name: 'Julie',
data: [3, 4, 2]
});
}-*/;

private native void createChart(JavaScriptObject options) /*-{
var chart;
chart = new $wnd.Highcharts.Chart(options);
}-*/;

// chart configuration
private native JavaScriptObject getTestConfig(String containerId) /
*-{
var options = {
chart: {
renderTo: containerId,
defaultSeriesType: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [
{
name: 'Jane',
data: [1, 0, 4]
},
{
name: 'John',
data: [5, 7, 3]
}
]
}

return options;
}-*/;

}

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

No comments:

Post a Comment