Skip to main content

jMaki & GWT

16 replies [Last post]
maerch
Offline
Joined: 2008-07-23

Hello,

i am using GWT and want to integrate charts with the jMaki-charting (i have no experience in JavaScript). I sneaked around all the pages i found about this topic including the architecture site.

The example with the pie chart works quite well for me. But then i tried to make a BarChart. After several ways, which weren't successful, i have no idea and unfortunately there is no helping documentation or a example how to make this. I am feeling dumb.

I also looked in the source code and saw that there is a String in the constructor called service and in the comments stays something like that:

"...and the datasets are provided by an external service..."

But how i find out how this service have to look like?

Can anyone help me explaining how? The best way would be an example for a BarChart and even a LineChart.

Thank you so much!

Maerch

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
techer
Offline
Joined: 2009-03-01

Hi,

Can you please tell me where to download jmaki-charting-gwt-0.9.5.jar ?

gmurray71
Offline
Joined: 2003-07-31
techer
Offline
Joined: 2009-03-01

Hi Murray,

Thank you for your response.

I was able to download the war(zip) from the location you mentioned and deployed it locally and got the pages.

But actually I want to do something mentioned in the link https://ajax.dev.java.net/gwt-charting.html

So in my gwt project, I want to import jmaki modules and use them ( like import jmaki.charting.client.PieChart;, final PieChart pc = new PieChart(400, 400, axes, PieChart.RED); )

For this I think I need a jmaki jar file, which I can include in the classpath or place in lib directory of WEB-INF.

Can you guide me where to download this jar file? Or I'm confused and talking all wrong?

maerch
Offline
Joined: 2008-07-23

Actually there is a firebug error messages. I don't know why it appears only now.

out of memory
[Break on this error] eval(function(p,a,c,k,e,r){e=function(c)...|lavenderblush|e6e6fa'.split('|'),0,{}))

PlotKit_Packed.js (Linie 17)

"Out of memory" sounds a little bit strange. My GWT application gets enough and the chart is actually the only widget in the app.

Message was edited by: maerch

gmurray71
Offline
Joined: 2003-07-31

Hi,

Sorry not to have more documents on this. The JSON model for the charts if you use the service is the same for that used in JSP / JSF / PHP so it might be the issue is whether the service data is being picked up correctly.

Do you have firebug installed? this is a great way to see if the URL that contains the data was correctly fetched.

Also: How are you defining the charts? Could you give a code fragment of what you used?

Which chart do you want to use?

Maybe we can use this experience to create some better docs.

Sorry to catch you on a bad day,

-G

maerch
Offline
Joined: 2008-07-23

Hey, thank you for your answer. Actually your docs aren't bad, if there would be additional examples for the other charts. A few good examples are often more useful than tons of text (for me as a non-expert it is the best way to learn how things work).

I my special case i think the service data is picked up correctly (In case you mean with picked up that the application found the file), because it draws the title of the y-axis correctly (and i haven't set the title anywhere else ... furthermore GWT would grumble about missing resources otherwise). It's just that the data don't appear.

The simplest approach i tries was just instantiate the BarChart with the correct URL of the json (from the downloaded example) in the public folder like this:

final BarChart chart = new BarChart("chart.json", 400, 400, BarChart.GREEN);
RootPanel.get().add(chart);

With the approach like in the doc/demo code, and the hope that one axis would be enough and the y-axis will be draw automatically, the screen was blank and firebugs and GWT return no failure messages to me. Intuitively i would say that it "could" work so:

String[] labels = {"May", "June", "July", "August"};
Axes axes = new Axes(new Axis(labels));

final BarChart chart = new BarChart(400, 500, axes, BarChart.GREEN);

double[] points = {250, 35, 435, 15};
DataSet ds = new DataSet("prices", "Some prices", points);
chart.setDataSet(ds);

RootPanel.get().add(chart);

My try to use 2 axis was also not successful, although i could see some labes from the y-axis. Particularly it was strange that i couldn't set up values to the labels on the y-axis like in the JSON.

Last: I would appreciate if i could use Line- or AreaCharts and the BarChart directly with GWT without the roundabout route with JSON.

Apropos: Your examples on http://jmaki.com/charting/ don't work with FF3. I don't know if you already noticed that. (Unable to create an instance of jmaki.widgets.jmaki.charting.dojo.line.Widget. Enable logging for more details.)

Message was edited by: maerch

Message was edited by: maerch

carlavmott
Offline
Joined: 2005-02-10

Hi,

Let's make sure that the data format is correct. Please put the following in your chart.json file.
{
xAxis : {
title : 'Months',
labels : [{ label : 'January'},
{ label : 'February'},
{ label : 'March'},
{ label : 'April'},
{ label : 'May'},
{ label : 'June'},
{ label : 'July'},
{ label : 'August'},
{ label : 'September'},
{ label : 'October'},
{ label : 'November'},
{ label : 'December'}
]
},
yAxis : {
title : 'Temperature',
labels : [{ label : '0', value : 0},
{ label : '10s', value : 10},
{ label : '20s', value : 20},
{ label : '30s', value : 30},
{ label : '40s', value : 40},
{ label : '50s', value : 50}
]
},
data : [
{label : 'Gray Series', values : [25, 45, 25, 45, 50, 25, 35, 25, 25, 20, 35, 45] },
{label : 'Pink Series', values : [20, 40, 30, 35, 45, 20, 25, 15, 20, 25, 30, 40] },
{label : 'Blue Series', values : [15, 35, 15, 40, 30, 15, 20, 10, 15, 20, 30, 35] },
{label : 'Red Series', values : [10, 25, 10, 5, 20, 5, 15, 5, 10, 15, 25, 30] }

]
}

I looked and we don't have the JSON schema validator for the charts (something for me to add) nor do we have the wiki pages which describe the model data. I thought we had that. Let me know if the data above works.

Thanks,
Carla

maerch
Offline
Joined: 2008-07-23

Hello Carla,

the data format is correct. I have tried it out.

To also make sure that i didn't forget anything here my step-by-step list how i approached to use these charts.

1.) Downloaded 'jmaki-charting-gwt-0.9.5.jar', copied it into the project-folder and added it to the projects-classpath.

2) Included this module to the *.gwt.xml
( Apropos: Your line of code in your architecture document is wrong. 'jmaki.charting.Widgets' doesn't works in GWT 1.5 at least. You have to use '' instead. )

3) I am quite unsure about this step because i don't know whether this is necessary or not. As far as i understand your architecture (and your downloaded GWT-app) i need it, but there is no word about this in the architecture document. Nevertheless it makes no difference. So i copied the resources folder with 'jmaki-min.js' and so on in it and added following lines to the *.gwt.xml.

Than i implemented the charts as in my previous postings.

Now after i wrote about the wrong inherits-syntax, i wonder if this could be a GWT 1.5 issue? Have you tested it with 1.5 yet?

Thank you all for your help,
Maerch

carlavmott
Offline
Joined: 2005-02-10

Hi Marech,

I have not tried GWT 1.5 but I know that Greg has. Try looking at a blog I wrote just after JavaOne incase that clears up some questions. http://weblogs.java.net/blog/carlavmott/archive/2008/05/adding_jmaki_wr....

To summarize, you are saying that you are able to get the Pie charts to work with GWT 1.5. In addtion, the data is formated correctly for the bar charts but the charts are not displaying correctly.

Carla

maerch
Offline
Joined: 2008-07-23

Hey,

your summarization is correct. And indeed your blog entry clarifies some questions about the architecture, but i still don't understand what i am doing wrong.

I would appreciate it if you post a sample code of a creating and displaying a BarChart. I think this would be a great help for me.

Regards Maerch

gmurray71
Offline
Joined: 2003-07-31

All the charts examples can be seen here:

https://jmaki-charting.dev.java.net/source/browse/*checkout*/jmaki-chart...

The chart.json is the same for all chart types. It can be seen here:

https://jmaki-charting.dev.java.net/source/browse/*checkout*/jmaki-chart...

Does this help a little more?

-Greg

gmurray71
Offline
Joined: 2003-07-31

Did you look at the GWT charting sample application. It has examples of Line, Bar, and Pie Charts and how to modify the data.

I believe these samples use the service to get data in:

Here is the downloads area:

https://jmaki-charting.dev.java.net/servlets/ProjectDocumentList?folderI...

The one you are looking for is :

jmaki-charting-app-gwt-0.9.5.zip

Unless there is something even better.

Let me know if this doesn't help.

-Greg

maerch
Offline
Joined: 2008-07-23

Thank you for your answer.

I already downloaded these files and unfortunately these are only the compiled files. I can launch the example, but i cannot look how they were implemented in Java/GWT. Or have i anything overlooked?

maerch
Offline
Joined: 2008-07-23

I surveyed the files from the GWT-app and found a JSON file. I copied this file and and tried the URL as the 'service'. Now i see the axes and the name of the chart, an improvement at least.
But still i don't see the chart, am frustrated about missing manuals/docs and think: Why is this so fu***** inconvenient to integrate good-looking non-Flash charts in GWT? After i saw the JMaki demo code i thought: Yeah, finally i found something. But, no ... and in addition of all charts the pie-chart is the chart i don't need! ;-)

bakarirum
Offline
Joined: 2005-07-07

Might I suggest you curse some more? That should encourage more people to help you out.

maerch
Offline
Joined: 2008-07-23

Hehe, sorry, it was not my intention to sound offensive or something like that. Next time i will try not to sound so harsh and make more smilies! ;-)

Actually i have just a bad day, too! Sorry for that.