A Simple Chart for a GWT Application on GAE/J
I am trying charting solutions for a GWT project and gchart seems a nice one. After some digging I create a sample project which is hosted on Google App Engine (GAE) demo. Source code is at Google project
The chart will show the remaining number of months in the current year.
- First download the jar from the project home page http://code.google.com/p/gchart/
- Put it under war/WEB-INF/lib and add the gchart.jar to your classpath
- Create a Web Application project called it GChart-samples (I assume you have Google Eclipse Plugin and follow the basic steps from here)
- This step is for make-up, find GChart_samples.html under war/WEB-INF and clear the part between <body> tags.
- Open GChart_samples.gwt.xml and add the following line
<inherits name='com.googlecode.gchart.GChart'/>
- Create a class in client folder called FirstChart and change it as the following
package com.dogan.kaya.client; import com.googlecode.gchart.client.GChart; public class FirstChart extends GChart { public FirstChart() { setChartSize(350, 350); addCurve(); int[] data = { 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 }; for (int i = 0; i < data.length; i++) { getCurve().addPoint(i + 1, data[i]); } //curve customization getCurve().getSymbol().setHeight(10); getCurve().getSymbol().setWidth(10); getCurve().getSymbol().setBorderColor("black"); getCurve().getSymbol().setBorderWidth(3); getCurve().getSymbol().setSymbolType(SymbolType.LINE); getCurve().getSymbol().setFillThickness(2); getCurve().getSymbol().setFillSpacing(0); //chart customization getXAxis().setAxisMin(1); getXAxis().setAxisMax(12); getXAxis().setTickCount(12); getXAxis().setHasGridlines(false); getXAxis().setTickLocation(TickLocation.CENTERED); getXAxis().setTickLabelFontSize(10); getYAxis().setAxisMin(0); getYAxis().setAxisMax(12); //to get inteter values on y axis, be careful //about the number of intervals it can be tricky getYAxis().setTickCount(13); getYAxis().setTicksPerLabel(2); getYAxis().setHasGridlines(false); getYAxis().setTickLabelFontSize(10); // update(); } } - Open GChart_samples class and change it like the following
package com.dogan.kaya.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; public class GChart_samples implements EntryPoint { public void onModuleLoad() { RootPanel.get().add(new FirstChart()); } } - My output is sth like that
ps:
some nice links about gchart are as follows:
- gchart homepage
- A simple tutorial at http://whatwouldnickdo.com/wordpress/264/simple-charts-in-gwt-with-gchart/
No comments yet
