Best way to embed a div in a SmartGWT container?

[mishamo]

I am currently working with the HighCharts Javascript library and trying to embed some charts in a SmartGWT-based application.

HighCharts works by taking in a div element and rendering to that element; this makes it fairly simple to create a class that extends GWT's Widget, simply creating a class that extends widget and doing the following:

element = DOM.createDiv();
element.setId(id);
setElement(element);

Also overriding onAttach() allows any post-creation methods to be called.

I was wondering if a similar approach could be used to make this class extend Canvas (or some other SmartGWT widget) as currently I am having serious problems with resizing when this Widget is included in my layout. Every time I've tried to create a custom Canvas widget in the past it generally didn't show up at all..

Thanks.

[Calais]

Hello,

I'm with the same problem. Did you find any solution?

Thanks,

[tnuic]

Same problem here. Any progress?

I have 2 problems integrating with smartGWT:

1) When I close a background tab that has a highchart, SmartGWT tries to set innerHTML to a null object. Analysing the SmartGWT developer console, it seems that I should be removing the widget from some cleaning stack that is used for closing the tab, but I dont know how to do it.

2) When i set the widget to 100% width and 100% height it goes beyond the boundaries of the enclosing SmartGWT canvas. Analysing the way widgets in SmartGWT resize, it seems that I should be resizing it to something less than the real container and then, resizing it back to fill the enclosing container. But I dont know how to do that in a safe way in SmartGWT.

Any thoughts?

Thanks.

PS.: I'm using this http://vaadin.com/directory#addon/invient-charts as a base code for the wrapper os Highcharts to SmartGWT.

[moxiesquinn]

FYI - We recently released the "GWT Highcharts" project as open source, which provides a complete (pure Java) GWT wrapper for Highcharts (and works within a SmartGWT container as well):

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

Off of that page you'll find a link to the "Showcase" application which is actually a SmartGWT application.

[mishamo]

They look like they work but have a similar problem to mine in that resizing the window frequently breaks the chart size. This is most apparent on the first page of the showcase with the stockchart.

[moxiesquinn]

The stock chart shown on the first page of the showcase application actually uses the "Highstock" library from the same guys who wrote "Highcharts". Highstock is only in beta release right now though, so there are still some bugs that they're working through. All of the regular (non stock) charts though you should notice scale correctly though.

[mishamo]

After testing a few other charts, it seems that they do, in fact work rather well. The pie charts don't quite scale properly but the rest of the resizing works better than my current implementation which is basically a raw javascript one writing to a div embedded in a Widget.

[sjivan]

FYI - We recently released the "GWT Highcharts" project as open source, which provides a complete (pure Java) GWT wrapper for Highcharts (and works within a SmartGWT container as well):

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

Off of that page you'll find a link to the "Showcase" application which is actually a SmartGWT application.

Looks good moxiesquinn. You might want to exclude the Calendar, RichTextArea and ListGrid JS from the showcase since you don't appear to be using these.

Sanjiv

[tnuic]

Thanks for the reply and implementation moxiesquinn! Seems to be working fine. Have you had time to implement the event part?

[moxiesquinn]

Thanks for the reply and implementation moxiesquinn! Seems to be working fine. Have you had time to implement the event part?

Support for core events are almost complete and will be coming in the next release. Targeting as early as next week!

[Calais]

Support for core events are almost complete and will be coming in the next release. Targeting as early as next week!

Great job moxiesquinn!

[moxiesquinn]

Thanks for the reply and implementation moxiesquinn! Seems to be working fine. Have you had time to implement the event part?

For those that are interested: we did release version 1.1.0 of GWT Highcharts today, which includes supports for (among other things) the various event types that Highcharts includes. You can see some details about how the event handlers work in the user guide here:

http://www.moxiegroup.com/moxieapps/...ide.jsp#events

As well as a couple of code examples in the showcase application, specifically:

http://www.moxiegroup.com/moxieapps/...-manage-points
http://www.moxiegroup.com/moxieapps/...iple-clickable

We hope you find those enhancements useful! Just let us know if you run into any trouble.

[moxiesquinn]

Looks good moxiesquinn. You might want to exclude the Calendar, RichTextArea and ListGrid JS from the showcase since you don't appear to be using these.

Sanjiv

Thanks for giving it a look and the tip Sanjiv! We deployed a new version of the showcase application today, which excludes the Calendar and RichTextArea. It looks like we do still need the Grid JS in order for the tree control on the left to function, but if you see any other ways we can tighten this up - please let me know.

[weaxler]

Following the steps in your quick guide:
http://www.moxiegroup.com/moxieapps/gwt-highcharts/quickstart.jsp

I get this error when trying to setup a very sample chart:

$wnd.Highcharts is undefined

I am using version 1.1.0 of highcharts and smartgwt 2.5
Any pointers to what i might be missing?

[weaxler]

Never mind fixed the issue.