PDA

View Full Version : Problem rendering Chart



MagicBoggo
15 Jan 2010, 5:23 AM
Hi,

While trying to render the BasicChartExample from the Ext GWT samples in my project, my Chart component is only partially rendered (see attachment screen shot). Only the legend and tooltips are rendered. I don't get any error in the log. The problem is the same on Mozilla Firefox 3.5 and Internet Explorer 8.

I use GWT 2.0.0 and GXT 2.1.0
I have Adobe Flash Player 10.0.42.34 installed

Here is the code from my BasicChartExample.java class:


package com.test.client.panel;

/*
* Ext GWT - Ext for GWT
* Copyright(c) 2007-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
import com.extjs.gxt.charts.client.Chart;
import com.extjs.gxt.charts.client.event.ChartEvent;
import com.extjs.gxt.charts.client.event.ChartListener;
import com.extjs.gxt.charts.client.model.ChartModel;
import com.extjs.gxt.charts.client.model.Legend;
import com.extjs.gxt.charts.client.model.Legend.Position;
import com.extjs.gxt.charts.client.model.charts.PieChart;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.MarginData;
import com.google.gwt.user.client.Element;


public class BasicChartExample extends LayoutContainer {


private ChartListener listener = new ChartListener() {

public void chartClick(ChartEvent ce) {
Info.display("Chart Clicked", "You selected {0}.", "" + ce.getValue());
}
};

@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
ContentPanel cp = new ContentPanel();
cp.setHeading("Pie chart");
cp.setFrame(true);
cp.setSize(400, 400);
cp.setLayout(new FitLayout());


final Chart chart = new Chart("gxt/chart/open-flash-chart.swf");
chart.setBorders(true);
chart.setChartModel(getPieChartData());

cp.add(chart);

add(cp, new MarginData(20));
}

private ChartModel getPieChartData() {
ChartModel cm = new ChartModel("Sales by Region",
"font-size: 14px; font-family: Verdana; text-align: center;");
cm.setBackgroundColour(" fffff5");
Legend lg = new Legend(Position.RIGHT, true);
lg.setPadding(10);
cm.setLegend(lg);

PieChart pie = new PieChart();
pie.setAlpha(0.5f);
pie.setNoLabels(true);
pie.setTooltip(" label $ val M<br> percent ");
pie.setColours(" ff0000", " 00aa00", " 0000ff", " ff9900", " ff00ff");
pie.addSlices(new PieChart.Slice(100, "AU","Australia"));
pie.addSlices(new PieChart.Slice(200, "US", "USA"));
pie.addSlices(new PieChart.Slice(150, "JP", "Japan"));
pie.addSlices(new PieChart.Slice(120, "DE", "Germany"));
pie.addSlices(new PieChart.Slice(60, "UK", "United Kingdom"));
pie.addChartListener(listener);

cm.addChartConfig(pie);
return cm;
}
}
The code from my project XML file:


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

And the code from my project HTML file:


<script type="text/javascript" language='javascript' src='gxt/flash/swfobject.js'></script>
The solution to this problem might be quite simple but I'm new to Ext-GWT and I'm a bit puzzled, so any help would be appreciated :)