Getting Started with GXT (Ext GWT) Chart : Crate a Simple Horizontal Bar Chart

Ext GWT is providing us a very handy Chart library based on Open Flash Chart. Here you will find a step by step detail description about creating a simple horizontal bar chart using the GXT chart library.

Create a new project named GXTBascicChart and add GXT library in the project. Go to the GXTBascicChart.gwt.xml file and add this line

<inherits name='com.extjs.gxt.charts.Chart'/>

Now go to the directory where you have extracted the GXT library. In the resource folder you will find all the resources for using GXT. Copy the chart and flash folders in the war folder of you application.

Go to the onModuleLoad method of GXTBascicChart class and remove all the auto generated code of this method. Create a Content Panel to place the chart
ContentPanel cp = new ContentPanel();  
cp.setHeading("Horizontal Bar chart");  
cp.setFrame(true);  
cp.setSize(550, 400);  
cp.setLayout(new FitLayout());

Now create a Chart component by providing the location of the open flash chart Shockwave file which resides in the chart folder.
String url = "chart/open-flash-chart.swf";  
final Chart chart = new Chart(url);



Set a Chart Model for the chart object and add this to the Content Panel
chart.setBorders(true);  
chart.setChartModel(getHorizontalBarChartModel());  
cp.add(chart);      
RootPanel.get().add(cp);

The Chart Model is responsible for the chart title, axes, legends, labels, and draw-able elements in your chart. Here is the getHorizontalBarChartModel method
public ChartModel getHorizontalBarChartModel() 
{ 
  //Create a ChartModel with the Chart Title and some style attributes
  ChartModel cm = new ChartModel("Students by Department", "font-size: 14px; font-family:      Verdana; text-align: center;");
 
  XAxis xa = new XAxis();
  //set the maximum, minimum and the step value for the X axis
  xa.setRange(0, 200, 50);  
  cm.setXAxis(xa);
  
  YAxis ya = new YAxis();
  //Add the labels to the Y axis  
  ya.addLabels("CSE", "EEE", "CE", "ME","CHE");  
  ya.setOffset(true);  
  cm.setYAxis(ya);

  //create a Horizontal Bar Chart object and add bars to the object  
  HorizontalBarChart bchart = new HorizontalBarChart();  
  bchart.setTooltip("#val#Students");  
  bchart.addBars(new HorizontalBarChart.Bar(60, "#ffff00")); 
  //different color for different bars 
  bchart.addBars(new HorizontalBarChart.Bar(180, "#0000ff"));  
  bchart.addBars(new HorizontalBarChart.Bar(180, "#00ff00"));  
  bchart.addBars(new HorizontalBarChart.Bar(120, "#ff0000"));
  bchart.addBars(new HorizontalBarChart.Bar(120, "#333ccc"));

  //add the bchart as the Chart Config of the ChartModel
  cm.addChartConfig(bchart);       
  cm.setTooltipStyle(new ToolTip(MouseStyle.FOLLOW));  
  return cm;  
}

And here is the last step before running your application.
Go to the GXTBascicChart.html file and add the following line in the head section
<script language='javascript' src='flash/swfobject.js'></script>
That's all. Run the application and the output will be like this

28 comments:

Anonymous May 25, 2010 at 7:28 AM  

I've been trying out the ExtGWT framework and have been finding it easy to use, especially since I have no web development experience, but know Swing inside out; the transition has been relatively easy.

My only beef with ExtGWT has been their lack of documentation.

The last thing that I was having trouble with was charts, and you have provided the one missing element, the inclusion of the flash/swfobject.js in the HTML for the project. Now I can chart my brains out ;-)

Thanks very much!

Unknown May 25, 2010 at 10:02 PM  

I always try share the solutions of the problems I faced. And that was one of the thing which you mentioned.. you are mostly welcome..

Luis Sergio June 3, 2010 at 10:37 PM  

Hello friend, let me congratulate you, your example is a lot more clear than the GXT example :)

Can I ask you something?
In case u find the chance, could u post or tell me how can I update the chart bars or data, so they move as their information source updates

Thanks a lot, and again, congratulations

Unknown June 3, 2010 at 11:50 PM  

@Luis Sergio: Thanks a lot for your inspiring comment. Do you want to update the chart bars from remote data source or do you want something like this http://www.extjs.com/examples/#advancedcharts ? Please let me informed about your requirement. I will try to help you :-)

Unknown June 5, 2010 at 7:53 PM  

Hey, thanks for your answer I'm looking something like the advanced example, where I change some data and the graphic updates to reflect that data

Hey, Thanks a lot for offering your help :)

Unknown June 5, 2010 at 10:12 PM  

@Luis: I will write your demanded one as soon as possible.

Anonymous June 25, 2010 at 5:46 AM  

Hi,

I have to say very good example!
My question is related in the part of the space between bars, is there a way to make the space fix..or to make no space(zero space) between the bars?! This is done dynamically by the chart, but I like to make no space in between!

Anonymous June 25, 2010 at 5:46 AM  

Hi,

I have to say very good example!
My question is related in the part of the space between bars, is there a way to make the space fix..or to make no space(zero space) between the bars?! This is done dynamically by the chart, but I like to make no space in between!

Anonymous August 10, 2010 at 1:26 PM  

Yes, the key is adding the swfobject.js to the hosting HTML page. Thanks!

Cooray August 23, 2010 at 8:15 AM  

"Yes, the key is adding the swfobject.js to the hosting HTML page. Thanks!"

Totally, agree with that. This post saved me a lot of time, thanks so much for putting it up.

Unknown August 23, 2010 at 7:16 PM  

welcome

Anonymous December 7, 2010 at 2:45 AM  

I would like to show multiple charts in the same page. I tried following but page gets empty
String url = "ExtGWT/chart/open-flash-chart.swf";
final Chart chart1 = new Chart(url);
final Chart chart2 = new Chart(url);

FlexTable chartsTable = new FlexTable();
chartsTable.setBorderWidth(1);
chartsTable.setWidget(0, 0, chart1);
chartsTable.setWidget(0, 1, chart2);

dashboardPanel.add(chartsTable);

chart1.setChartModel(getChartModel(Random.nextInt(10)));
chart2.setChartModel(getChartModel(Random.nextInt(10)));


Kindly let me know how can i add multiple charts within a page?

Thanks
Krishan Babbar

Anonymous December 9, 2010 at 8:57 PM  

hi... i was also workn on dis barchart and i could create a simple one. now i have to add y value for random xaxis values.. can ny1 pls suggest me a solution??? thanks in advance...

åµµ¨ December 9, 2010 at 9:10 PM  

@ Krishan Babbar...

i thnk dere is no need 2 create another chart... u jst put it in a loop in which u specify the no: of charts u needed. since u are addin y axis values randomly u can have multiple charts with diff values...

Anonymous April 6, 2011 at 3:53 AM  

Hi,

I have been trying to work with GXT but it is not working. I followed all the steps that are being shared in this tutorial but it is not working still.

It says, unexpected error while processing XML - exception: NoClassDefFoundError, failure while parsing XML, Shell failed in doStartup method.

I am even not able to see design view where it says that "GXT requires not just gxt.jar, but also set of resources, such as CSS files, images, etc. GWT Designer was not able to find "gxt-.css" file. "

Kindly help me with this... i am new to the development field.

Waiting for some help

Unknown April 10, 2011 at 10:09 PM  

if you look into the gxt download folder you will find a folder named resources. Copy & paste this folder in web folder of your project.

Unknown May 10, 2011 at 9:38 AM  

Hi Zawoad,

I've tried using your example but I'vi this exception:

com.google.gwt.core.client.JavaScriptException: (TypeError): Cannot call method 'embedSWF' of undefined

Any clue?

Thanks a lot

Unknown May 10, 2011 at 7:36 PM  

@Luca: Make sure you have include the 'swfobject.js' and the location of 'open-flash-chart.swf' is correct.

Stefano June 1, 2011 at 8:57 AM  

I receive an error on method removeSWF, anyone can help me, thanks?

Anonymous August 16, 2011 at 11:08 AM  

Itried to use samples at the start. But later i found ur post interesting. So deleted them and is trying to follow urs. however the following error is annonying me. Can you please help me..
Loading modules
com.extjs.gxt.samples.Examples
[ERROR] Unable to find 'com/extjs/gxt/samples/Examples.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?
[ERROR] shell failed in doStartup method

PS: I dont have any references for Examples.gwt.xml. I clean/build project all and search for examples gave zero results.

Unknown August 16, 2011 at 7:16 PM  

I think you are using some class of com.extjs.gxt.samples.Examples package. Make sure you are not using any third party class.

Anonymous October 4, 2011 at 4:16 AM  

Hi Ratul,

I have a requirement of dynamically adding an to an already created AreaChart of Gxt on certail condition, i am new to GXt and not much comfortable in this so can u please suggest how can this be done.
Will be of great help..

Regards
Anivesh...

Anonymous December 15, 2011 at 10:51 PM  

If i add a class to anyother folder than client. the source not found exception is occur.Any idea!

Anonymous March 15, 2012 at 8:45 PM  

Very good example, helped a lot.

Anonymous March 20, 2012 at 3:23 AM  

thank you very match , your example is clear,simple and work fine. your example help me a lot

Unknown February 17, 2013 at 11:47 PM  

very clear example, but...
I repeated all your recomendations and nothing works. it opens just a clear sheet. I guess this all because of .swf. nevertheless i have it in classpath it doesn't work. may such thing happen because I need to change the stirng I add to .html file if I have another path to .swf file? thank you

Unknown February 19, 2013 at 1:28 AM  

Oh! I've found the problem. There wasn't Adobe flash plugin for browser))) thank you, excellent example.

Andelko Spevec March 27, 2015 at 12:16 AM  

This is a good example.

But we had a problem with charts not showing when we deployed them on server. Problem was when we commited our work using CVS in Eclipse, open-flash-chart.swf was commited as ASCII file and not as binary. Just a little heads up if you find yourself in a same situation :)

Total Pageviews

Tags

Twitter Updates
    follow me on Twitter

    Followers