Is there any chart library for GWT?

[Sarah kho]

Hi
how we can resolve charting requirement when we use GWT, is there any
sample code for it?

Thanks

[Fred Sauer]

A different approach, but try this:
   http://code.google.com/apis/chart/

--
Fred Sauer
fr...@allen-sauer.com

[Sarah kho]

Thank you for reply.
Is there some other library available? perhaps with more complete set
of features?
Can we use JFree Chart or other java based chart framework with GWT?

Thanks

On Jan 8, 1:02 am, "Fred Sauer" <f...@allen-sauer.com> wrote:
> A different approach, but try this:
>    http://code.google.com/apis/chart/
>

> On Jan 7, 2008 2:44 PM, Sarah kho <sarah....@gmail.com> wrote:
>
>
>
> > Hi
> > how we can resolve charting requirement when we use GWT, is there any
> > sample code for it?
>
> > Thanks
>
> --
> Fred Sauer

> f...@allen-sauer.com

[Al Hadsell]

You could run JFreeChart on the server side, producing graphics for
the client to display. Would that suit your needs, or do you need
something that runs on the client side?

[Sarah kho]

That is fine for me, I can do all my work with JFreeChart, but I can
not understand how I can integrate it with GWT, usually I use
cewolf.sourceforge.net/ to create charts.

Thanks.

[Justin Stanczak]

I would think you could just construct a url string that tells your chart servlet to return an image. Then just put this url in when you create an Image object.

On Jan 7, 2008 7:35 PM, Sarah kho < sara...@gmail.com> wrote:

That is fine for me, I can do all my work with JFreeChart, but I can
not understand how I can integrate it with GWT, usually I use
cewolf.sourceforge.net/  to create charts.

Thanks.

[brent...@gmail.com]

I have an example that uses JFreeChart and GWT and Grails.

http://www.brentryan.com/client

Login with user/password of admin/admin

--Brent

> > something that runs on the client side?- Hide quoted text -
>
> - Show quoted text -

[Henrik Adolfsson]

Hi,
Has anyone used an interactive chart/graph module that does work for
IE? I have seen a few that works in FF, but as my customers only use
IE that's not an option for me. :-(

Today I use JFreeChart to generate images but my users want to scroll
and zoom by interactive means so I'm looking for something to enchance
their usage.

Thanks
/Henrik

On Jan 8, 4:15 am, "brent.r...@gmail.com" <brent.r...@gmail.com>
wrote:

> > - Show quoted text -- Hide quoted text -

[Brent Ryan]

I've done a lot of research trying to find some way of providing this as well, but unfortunately it's not possible unless you use Flash charting or Java applets because the browsers haven't agreed on any standards for SVG vs. Canvas, etc...

I even discovered bugs with using flash charting or java applets with DHTML menus, dialogs in firefox so I can't even use those technologies. 

There are a few javascript libraries that allow for charting in the browser, but they're very simple charts like line charts or bar charts with limited interactivity.

Anyways, let me know if you find something that works.

--Brent

On Jan 8, 2008 8:08 AM, Henrik Adolfsson <hen.ad...@gmail.com > wrote:

Hi,
Has anyone used an interactive chart/graph module that does work for
IE? I have seen a few that works in FF, but as my customers only use
IE that's not an option for me. :-(

Today I use JFreeChart to generate images but my users want to scroll
and zoom by interactive means so I'm looking for something to enchance
their usage.

Thanks
/Henrik

On Jan 8, 4:15am, "brent.r...@gmail.com" <brent.r...@gmail.com>

wrote:
> I have an example that uses JFreeChart and GWT and Grails.
>
> http://www.brentryan.com/client
>
> Login with user/password of admin/admin
>
> --Brent
>

> On Jan 7, 5:35pm, Sarah kho <sarah....@gmail.com> wrote:
>
>
>
> > That is fine for me, I can do all my work with JFreeChart, but I can
> > not understand how I can integrate it with GWT, usually I use
> > cewolf.sourceforge.net/ to create charts.
>
> > Thanks.
>

> > On Jan 8, 3:29am, Al Hadsell <ahads...@gmail.com> wrote:
>
> > > You could run JFreeChart on the server side, producing graphics for
> > > the client to display. Would that suit your needs, or do you need
> > > something that runs on the client side?- Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -

--
Brent Ryan

[Yegor]

Your best option is probably to use Flash for charting, but it may
take some effort to come up with good looking dynamic client-side
Flash charts. I'm not aware of any 3rd party Flash chart libraries,
but there should be. I've seen some excellent examples, like
http://finance.google.com/finance?q=NYSE:RHT and analytics.google.com,
and some horrible ones.

Please post the results of your research here. I am also interested in
this topic.

Yegor

[Sarah kho]

On Jan 8, 6:08 pm, Henrik Adolfsson <hen.adolfs...@gmail.com> wrote:
> Hi,
> Has anyone used an interactive chart/graph module that does work for
> IE? I have seen a few that works in FF, but as my customers only use
> IE that's not an option for me. :-(
>

Can you please let me know which interactive chart library you know
that works fine with GWT and FireFox?

Thanks.

[Chris Moustakas]

For a third-party flash-based library you should check out
FusionCharts (http://www.fusioncharts.com/). I haven't used it but the
demo is very impressive and it looks easy to use (just pass in your
data as XML), and you can set up onclick events on chart elements if
you want to support drill-downs. It's not cheap but it's very pretty
(insert joke here).

One bad thing about a flash-based chart is that you need a browser
plug-in to export it to PDF, but there must be tools that let you do
that on the fly server-side.

-cm

[Brent Ryan]

I haven't tried this yet, but I have tried flash charting and I know that there are bugs in firefox where DHTML dialogs and menus get rendered behind your flash content.  There seems to be several z-index issues with embedded objects in firefox.

So this library is fine for an all flash site or a site that doesn't contain any DHTML floating elements.

--Brent

[rusty]

I have built a GWT charting library that does horizontal and vertical
bar graphs, that is fairly configurable, and allows you to attach
listeners to each of the items as well (to make it clickable). This
was fairly easy to do, and works on all the major browsers. If you
really want I can send you the code, but it is in no way generic or
really ready for prime time use, but it works great for me.

Pie and line charts are a lot trickier though, and for that I use
JFreeChart on the back end, and then just display the image it
generates in GWT. JFreeChart has a built in servlet that lets you do
this pretty easily.

Rusty

On Jan 9, 7:25 am, "Brent Ryan" <brent.r...@gmail.com> wrote:
> I haven't tried this yet, but I have tried flash charting and I know that
> there are bugs in firefox where DHTML dialogs and menus get rendered behind
> your flash content. There seems to be several z-index issues with embedded
> objects in firefox.
>
> So this library is fine for an all flash site or a site that doesn't contain
> any DHTML floating elements.
>
> --Brent
>

> On Jan 8, 2008 1:17 PM, Chris Moustakas <chris.mousta...@gmail.com> wrote:
>
>
>
>
>
> > For a third-party flash-based library you should check out
> > FusionCharts (http://www.fusioncharts.com/). I haven't used it but the
> > demo is very impressive and it looks easy to use (just pass in your
> > data as XML), and you can set up onclick events on chart elements if
> > you want to support drill-downs. It's not cheap but it's very pretty
> > (insert joke here).
>
> > One bad thing about a flash-based chart is that you need a browser
> > plug-in to export it to PDF, but there must be tools that let you do
> > that on the fly server-side.
>
> > -cm
>

> --
> Brent Ryan

[Ahmad Zawawi]

You can use client-side technologies like jMaki charting (https://
jmaki-charting.dev.java.net/) which currently has plotkit + dojo +
(yahoo flash yui charts + google api in subversion but will be
released soon). You can control them by publishing jMaki actions
(e.g. /clear, /addMarker, addDataset, /removeDataset). There is some
Java code for integrating it with GWT that you can use.

Hope this helps,
/ahmad

[Junyang]

You might also consider Open Flash Chart (http://teethgrinder.co.uk/
open-flash-chart/).

[Henrik Adolfsson]

This is the best I have found: Chronoscope. I havn't tried using it
yet, but it's pretty impressive.
http://timepedia.org/chronoscope/demo/
The team behind chronoscope even says that there is an IE version
coming soon.

/Henrik

[Hugo Forte]

I've also been doing fairly extensive research of this over the last
two weeks.

I wrote a wrapper of a small subset of emprise charts (http://
www.ejschart.com/) and it works beautifully. It's well documented and
heavily developed, they support a ton of different charts and the
charts are interactive (you can configure events etc).

The only problem I've found is that you can't print them, which is why
I'm now looking for a server side image generation library for print
support.

/Hugo

[John Gunther]

Also consider GChart

http://gchart.googlecode.com

It comes packaged as a GWT jar and is very easy to use from a GWT
application.

John Gunther, GChart author

On Jan 14, 5:37 pm, Hugo Forte <h...@hugoforte.com> wrote:
> I've also been doing fairly extensive research of this over the last
> two weeks.
>

> I wrote a wrapper of a small subset of emprise charts (http://www.ejschart.com/) and it works beautifully. It's well documented and

[dm82m]

Hey Hugo,

as discussed by mail - I have the following problem:
I am trying to write a small example wrapper for EJSChart.

This is my EJSChartImpl.java:

package com.mycompany.project.client.jswrap.ejschart;

public class EJSChartImpl {
public native EJSChart create() /*-{
var myChart = new $wnd.EJSC.Chart("myChart");
var myChartSeries = new $wnd.EJSC.BarSeries(new
$wnd.EJSC.ArrayDataHandler([["Month 1",1],["Month 2",2]]));
myChart.addSeries(myChartSeries);
return myChart;
}-*/;
}

The problem is, that the EJSC class is looking for the DOM id
"myChart" to add the chart. I don't know how to create such
a placeholder in GWT for this chart object.

This is my EJSChart.java:

package com.mycompany.project.client.jswrap.ejschart;

import com.google.gwt.core.client.JavaScriptObject;

public class EJSChart extends JavaScriptObject {
private static EJSChartImpl impl = new EJSChartImpl();

public static EJSChart create() {
return impl.create();
}
}


This is my EJSCWidget.java:

package com.mycompany.project.client.jswrap.ejschart;

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;

public class EJSCWidget extends Composite {
VerticalPanel theArea = new VerticalPanel();
Label myChart = new Label("Loading Chart...");

static EJSChart ejschart = null;

public EJSChart getEJSChart() {
if (ejschart == null) {
ejschart = EJSChart.create();
}
return ejschart;
}

public EJSCWidget() {
theArea.add(myChart);
initWidget(theArea);
getEJSChart();
}

}

And this is the way I am trying to get the chart be displayed:

public static EJSCWidget chart = null;
final Button chartButton = new Button();

rootPanel.add(chartButton, 89, 143);
chartButton.setSize("146px", "24px");


chartButton.addClickListener(new ClickListener() {
public void onClick(final Widget sender) {
chart = new EJSCWidget();
}
});

if (chart != null) {
rootPanel.add(chart, 89, 225);
}

chartButton.setText("Chart");

final HTML html = new HTML("<div id=\"myChart\"></div>");
rootPanel.add(html, 89, 172);
html.setSize("305px", "256px");

Maybe there are better ways to to this - I hope you can just show me a
good way...

Thanks in advance

Regards,
Dirk

On 14 Jan., 23:37, Hugo Forte <h...@hugoforte.com> wrote:
> I've also been doing fairly extensive research of this over the last
> two weeks.
>

> I wrote a wrapper of a small subset of emprise charts (http://www.ejschart.com/) and it works beautifully. It's well documented and

[Hugo Forte]

Dirk,

This is what I did.
In my constructor I call

HTML myChartDiv = new HTML();
myChartDiv.setHTML("<div id=\"myChart\" class=\"chart\" style=
\"width: 100%; height: 100%;\">Loading...</div>");

I then have a modular variable that can be accessed in the native
javascript:

private m_myChartElement = DOM.getElementById("myChart");

My create chart function looks like this:
/**
* JSNI method. creates a new graph object,
*
* @param usePeers -
* if true, draws the peers graph, otherwise the
packets
* graph
* @return the created graph object
*/
private native JavaScriptObject createChart(boolean usePeers) /*-{
var graphDiv;
graphDiv =
this.@com.neokast.client.statistics.WebFXLineGraph::myChartElement ;
c = new $wnd.Chart(graphDiv);
var c = new $wnd.Chart(graphDiv);

return c;
}-*/;

/Hugo

[dm82m]

Thanks Hugo,

but I cannot get your code running...

This is my full example:

package com.mycompany.project.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class ImageViewer implements EntryPoint {
private Element myChartElement;
private Button clickMeButton;

public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get();

HTML myChartDiv = new HTML();

myChartDiv.setHTML("<div id=\"myChart\">Loading...</div>");

rootPanel.add(myChartDiv, 5, 34);
myChartDiv.setSize("495px", "341px");

myChartElement = DOM.getElementById("myChart");

clickMeButton = new Button();
clickMeButton.setText("Click me!");
clickMeButton.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
createChart();
}
});

rootPanel.add(clickMeButton, 5, 5);
}

private native JavaScriptObject createChart() /*-{
var myChart = new
$wnd.EJSC.Chart(this.@com.mycompany.project.client.ImageViewer::myChartElement);

var myChartSeries = new $wnd.EJSC.BarSeries(new
$wnd.EJSC.ArrayDataHandler([["Month 1",1],["Month 2",2]]));
myChart.addSeries(myChartSeries);
return myChart;
}-*/;
}

:(

Regards,
Dirk

On 5 Mrz., 12:32, Hugo Forte <h...@hugoforte.com> wrote:
> Dirk,
>
> This is what I did.
> In my constructor I call
>
> HTML myChartDiv = new HTML();
> myChartDiv.setHTML("<div id=\"myChart\" class=\"chart\" style=
> \"width: 100%; height: 100%;\">Loading...</div>");
>
> I then have a modular variable that can be accessed in the native
> javascript:
>
> private m_myChartElement = DOM.getElementById("myChart");
>
> My create chart function looks like this:
> /**
> * JSNI method. creates a new graph object,
> *
> * @param usePeers -
> * if true, draws the peers graph, otherwise the
> packets
> * graph
> * @return the created graph object
> */
> private native JavaScriptObject createChart(boolean usePeers) /*-{
> var graphDiv;
> graphDiv =

> th...@com.neokast.client.statistics.WebFXLineGraph::myChartElement ;

> c = new $wnd.Chart(graphDiv);
> var c = new $wnd.Chart(graphDiv);
>
> return c;
> }-*/;
>
> /Hugo
>
> On Mar 4, 7:43 am, dm82m <dmauc...@gmail.com> wrote:
>
> > Hey Hugo,
>
> > as discussed by mail - I have the following problem:
> > I am trying to write a small example wrapper forEJSChart.
>
> > This is my EJSChartImpl.java:
>
> > package com.mycompany.project.client.jswrap.ejschart;
>
> > public class EJSChartImpl {

> > public nativeEJSChartcreate() /*-{

> > var myChart = new $wnd.EJSC.Chart("myChart");
> > var myChartSeries = new $wnd.EJSC.BarSeries(new
> > $wnd.EJSC.ArrayDataHandler([["Month 1",1],["Month 2",2]]));
> > myChart.addSeries(myChartSeries);
> > return myChart;
> > }-*/;
>
> > }
>
> > The problem is, that the EJSC class is looking for the DOM id
> > "myChart" to add the chart. I don't know how to create such
> > a placeholder in GWT for this chart object.
>
> > This is myEJSChart.java:
>
> > package com.mycompany.project.client.jswrap.ejschart;
>
> > import com.google.gwt.core.client.JavaScriptObject;
>

> > public classEJSChartextends JavaScriptObject {

[Hugo Forte]

Aloha,

You might want to read up a bit on how the native java functionality
works to understand it line by line instead of trial and error.

Your problems is that you are trying to access the function variable
myChartElement declared in your constructor within another function,
it is out of scope. Define it as a modular variable instead

You might also have a problem in that the "myChart" div is not created
yet when you are trying to pull it from the dom

myChartElement = DOM.getElementById("myChart");

/H

> $wnd.EJSC.Chart(th...@com.mycompany.project.client.ImageViewer::myChartElement);

[dm82m]

Hi Hugo,

in the example above there is no default constructor. - or am I wrong?
I think the variable myChartElement is also defined as modular.

Through the eclipse debugger I have checked that myChart div is
created if I try to pull it from the DOM.

Maybe it is possible for you to just post a working example.

I have read the JSNI documentation from GWT. It just basic
information but not in detail...

On the other side I am reading the book GWT in action - but there
is also just a example with a JSNI framework that don't need a
already created DOM object...

Thanks and regards
Dirk

[sss0220]

would you post

EJSChart Library

to take a look?

---

2008年500强企业最新高薪职位，赶快了解一下

[dm82m]

you can download a trial version of that library from here: http://ejschart.com/

On 6 Mrz., 02:57, sss0220 <sss0...@163.com> wrote:
> would you post
>
> EJSChart Library
>
> to take a look?
>

[Hucmuc]

Hugo's example was misleading. Also what he said below was wrong.

Anyhow, I got your example working. You are not suppose to pass in the
div element. You suppose to pass the id of the element.

import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

import com.google.gwt.user.client.ui.Button;
public class Chart {

public void createSimpleChartButton () {
RootPanel rootPanel = RootPanel.get ();
HTML myChartDiv = new HTML ();
myChartDiv.setHTML ("<div id=\"myChart\" class=\"chart\" style=

\"width: 100%; height: 100%;\">Loading...</div>");

myChartDiv.setSize ("495px", "341px");


Button clickMeButton = new Button ();
clickMeButton.setText ("Click me!");
clickMeButton.addClickListener (new ClickListener() {
public void onClick (Widget sender) {
try {
createChart ();
}
catch (Exception e) {
e.printStackTrace ();
}
}
});

rootPanel.add (myChartDiv);
rootPanel.add (clickMeButton);
}

private native void createChart()
/*-{

var myChart = new $wnd.EJSC.Chart("myChart");
var myChartSeries = new $wnd.EJSC.BarSeries(new
$wnd.EJSC.ArrayDataHandler([["Month 1",1],["Month 2",
2]]));
myChart.addSeries(myChartSeries);

}-*/;

[dhoffer]

You might checkout the GXT project/library, it has extensive charting functionality.

-Dave

[Luis O.]

Check out GFlot (wrapper around Flot). It's a very nice client-side library.

Flot: http://code.google.com/p/flot
GFlot: http://code.google.com/p/gflot
Examples: http://gflot2.appspot.com

-Luis

> --
> 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/-/EZf9b7b_5S4J.
>
> 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.

[Harald Pehl]

In my current project (https://code.google.com/p/tire-d8/) I'm using GWT Highcharts (http://www.moxiegroup.com/moxieapps/gwt-highcharts/) 

It's easy to use and very flexible in its configuration: https://code.google.com/p/tire-d8/source/browse/trunk/src/main/java/name/pehl/tire/client/activity/view/QuickChartWidget.java 

- Harald

[Rob]

Hi,

+1 for gwt-highcharts

Ext GWT (GXT) demo:

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

Smart GWT demo:

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

Cheers

Rob

Kiahu.com

[Saurabh Tripathi]

Hi,
GWT-RCharts( http://code.google.com/p/gwt-rcharts ) and google visualization API could be a option for interactive charts on client side.

[Ivan Ooi]

Try this,

Interactive, GWT compatible, touch screen ready, full animation.

trust me, nothing better than this 

https://www.sencha.com/

[Shawn Brown]

Hi,

> Interactive, GWT compatible, touch screen ready, full animation.
>
> trust me, nothing better than this
>
> https://www.sencha.com/

Well GWT Highcharts is better if you need the client to see the same
thing in a pdf as they do on the screen. GXT doesn't have that
functionality and it'd be tough to make it work or so the threads on
their mailing list suggest.

Shawn

[Ivan Ooi]

Wow, this is another great charts for GWT! Thanks! 

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

[Mirza B]

U can also look at this
http://www.moxiegroup.com/moxieapps/gwt-highcharts/



On Thursday, 13 September 2012 21:58:28 UTC+1, Rui Afonso wrote:

You can also check GWT Charts: http://code.google.com/p/gwt-charts 

It's a GWT library based on Google Chart Tools: https://developers.google.com/chart

[Aryan]

Check out GWT-RCharts hosted on http://code.google.com/p/gwt-rcharts/ and demo at http://gwt-rcharts.appspot.com/