Highcharts - updating chart with data

[Thomas]

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;
}-*/;

}

[Uemit]

A couple of things:

1.) I am not sure if it is possible to access the series array of the JavaScriptObject instance "option", the way you have done it. In hosted mode it should complain that there is no field series in options because options is a generic JavaScriptObject. 

2.) You probably have to make sure the options instance you store in your wrapper is the same object as the actual one which is stored in the Highcharts "chart" instance.

[Thomas]

I think I already have found out what the problem is. What I did was
to create an options object and use this options object to create the
chart. Afterwards I pushed data into the options object and expected
this to be reflected on the chart. I don't think that is possible. I
don't think the chart recognize changes in the options object after I
has been used to create the chart.

I have now solved my problem by creating the options object, push data
into it and then uses it to create the chart.

Regards,
Thomas.

[George Agiasoglou]

Hi there,

I am interested in using Highcharts in my app, how do you use the above code?

I tried to use your code but it complains that it cannot find 'Chart'

Thanks,

G

[Rob]

Hi,

There is a gwt wrapper for HighCharts.

-> http://www.moxiegroup.com/moxieapps/gwt-highcharts/

Check out this demo that uses gwt-highcharts:

-> http://gwt-cx.com/serendipity/Serendipity.html

Click on the "Dashboards" menu item.

Cheers
Rob

http://code.google.com/p/gwt-cx/


On Nov 5, 2:53 am, George Agiasoglou <George.Agiasog...@newsint.co.uk>
wrote:

[George Agiasoglou]

Hi Rob, 

I am aware of the wrappers for a number of charting libraries for gwt, however, I would like my app to remain decoupled of them and not to integrate any libraries to it, because the charts will be provided by another mechanism.

So what I would like to be doing is via JSNI embed a div and some javascript and run it. So far I've tried IFrameElement but couldn't get it to work.

Any suggestions?

Thanks,

G. 

[Armishev, Sergey]

Use pure GWT charting http://code.google.com/p/clientsidegchart/ For the real Web apps it is an excellent library. It lacks some fancy stuff but works excellent with all other GWT including drag/drop packages so you can easily build dashboards. I did my own prototypes including real time charting and consider it an excellent library that you can easily customize for your needs

-Sergey

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

_____________________________________________________
This electronic message and any files transmitted with it contains
information from iDirect, which may be privileged, proprietary
and/or confidential. It is intended solely for the use of the individual
or entity to whom they are addressed. If you are not the original
recipient or the person responsible for delivering the email to the
intended recipient, be advised that you have received this email
in error, and that any use, dissemination, forwarding, printing, or
copying of this email is strictly prohibited. If you received this email
in error, please delete it and immediately notify the sender.
_____________________________________________________

[George Agiasoglou]

Thank you for your suggestion, but this is not what I need. 

Let me give you an example, I have data and graphs in google spreadsheets and I publish them as interactive or as images. Publishing the charts as images is simple, I just create a gwt Image and pass in a url. My problem is when publishing a chart as interactive and I get a script tag. So what I want is to be able to embed the script tag in a DivElement and get the interactive chart.

Thanks,

G 

[Armishev, Sergey]

I think you have a problem to show both image and interactive chart to have the same L&F. You should use the same charting library for that. Some people in the past used JFreeChart creating the same chart image on the server and then interactive one on the browser applet. Nowadays you can use combination of Highcharts or  GWT charts on the browser side for interactive charts  and Node.js or some headless WebKit  (PhantomJs) on the server to make chart images from the same code

 

-Sergey

 

 

From: google-we...@googlegroups.com [mailto:google-we...@googlegroups.com] On Behalf Of George Agiasoglou
Sent: Monday, November 07, 2011 9:32 AM
To: google-we...@googlegroups.com
Subject: Re: Highcharts - updating chart with data

 

Thank you for your suggestion, but this is not what I need. 

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/azV2H7zXuf0J.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[George Agiasoglou]

Yes indeed, I have a problem because the ui is agnostic of the library that is going to use to generate the chart.

For instance, this is the script tag published from a google spreadsheet:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//resourceurl","options":{"reverseCategories":false,"titleX":"Date","backgroundColor":"#FFFFFF","width":600,"logScale":false,"hAxis":{"maxAlternation":1},"hasLabelsColumn":true,"vAxes":[{"min":null,"title":"Hits","max":null}],"title":Metric Vs  OtherMetric","height":371,"legend":"right","reverseAxis":false,"isStacked":false},"state":{},"chartType":"ColumnChart","chartName":"Chart 1"} </script>

which contains the url of library and the data required. If this script tag is embedded in div and then in an html page the chart is displayed. I am trying to replicate the same effect.

Thanks, 

G

[Darren Salomons]

Hi Rob,  I see your demo on the site with highcharts but I don't see it in the code on googlecode.  Is there a different codebase that you are working on for the highcharts integration?

Thanks!  Darren

[Rob]

Hi,

I haven't checked in the changes yet.

He's the code for the HighCharts.gwt.xml:

->

<module>

<public path="public" />

<inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>

<script src="gwtcx/charts/highcharts/javascript/
jquery-1.5.2.min.js" />
<script src="gwtcx/charts/highcharts/javascript/highcharts.js" />

</module>

->

And, the Dashboards view:

->

public class SerendipityHighChartsDashboardsView extends
DashboardsView<DashboardsUiHandlers> implements
SerendipityDashboardsPresenter.MyView {

// @Inject
public SerendipityHighChartsDashboardsView() {
super();

// panel.setOverflow(Overflow.AUTO);

if (GWT.isScript()) {

HLayout northLayout = new HLayout();
northLayout.setHeight("50%");
northLayout.setBackgroundColor("white");
northLayout.setMembersMargin(8);

final Chart chart1 = createDynamicSplineChart();
chart1.setWidth100();
final Canvas chart1Container = new Canvas();
final WidgetCanvas chart1WidgetCanvas = new
WidgetCanvas(chart1);

chart1Container.addResizedHandler(new ResizedHandler() {
public void onResized(ResizedEvent event) {
chart1.setSize(chart1Container.getWidth(),
chart1Container.getHeight(), false);
}
});
chart1Container.addDrawHandler(new DrawHandler() {
public void onDraw(DrawEvent event) {
chart1.setSize(chart1Container.getWidth(),
chart1Container.getHeight(), false);
}
});

final Chart chart2 = createSplineWithPlotBandsChart();
chart2.setWidth100();
final Canvas chart2Container = new Canvas();
final WidgetCanvas chart2WidgetCanvas = new
WidgetCanvas(chart2);

chart2Container.addResizedHandler(new ResizedHandler() {
public void onResized(ResizedEvent event) {
chart2.setSize(chart2Container.getWidth(),
chart2Container.getHeight(), false);
}
});
chart2Container.addDrawHandler(new DrawHandler() {
public void onDraw(DrawEvent event) {
chart2.setSize(chart2Container.getWidth(),
chart2Container.getHeight(), false);
}
});

chart1Container.addChild(chart1WidgetCanvas);
chart2Container.addChild(chart2WidgetCanvas);
northLayout.addMember(chart1Container);
northLayout.addMember(chart2Container);

HLayout southLayout = new HLayout();
southLayout.setHeight("50%");
southLayout.setBackgroundColor("white");

final Chart chart3 = createStackedAreaChart();
chart3.setWidth100();
final Canvas chart3Container = new Canvas();
final WidgetCanvas chart3WidgetCanvas = new
WidgetCanvas(chart3);

chart3Container.addResizedHandler(new ResizedHandler() {
public void onResized(ResizedEvent event) {
chart3.setSize(chart3Container.getWidth(),
chart3Container.getHeight(), false);
}
});
chart3Container.addDrawHandler(new DrawHandler() {
public void onDraw(DrawEvent event) {
chart3.setSize(chart3Container.getWidth(),
chart3Container.getHeight(), false);
}
});

chart3Container.addChild(chart3WidgetCanvas);
southLayout.addMember(chart3Container);

panel.addMember(northLayout);
panel.addMember(southLayout);
}
}

->

Cheers
Rob

http://code.google.com/p/gwt-cx/