Example: Pie Chart
You can think of a pie chart as a stacked bar chart with just one bar, displayed in polar coordinates. To see this, consider the script below, which creates a simple bar chart.
Note: Script that modifies 'graph' should be placed at the element level. See Adding Element-Level Script in Report Scripting and Adding Component Script in Dashboard Scripting for more information.
dataset = [["State", "Revenue"], ["CA", 200],["NY",300],["PA",150]];
graph = new EGraph();
var elem = new IntervalElement("State","Revenue");
var xscale = new CategoricalScale("State")
var yscale = new LinearScale("Revenue");
var rect = new RectCoord(xscale, yscale);
graph.setCoordinate(rect);
graph.addElement(elem);

To create a pie chart from this data, just convert the chart to a stacked bar, and then convert to polar coordinates. Follow the steps below:
1. Instead of using different X-axis positions to distinguish the 'State' data, distinguish the states using a ColorFrame object.
dataset = [["State", "Revenue"], ["CA", 200],["NY",300],["PA",150]];
graph = new EGraph();
var elem = new IntervalElement(null,"Revenue");
var xscale = new CategoricalScale("State")
var yscale = new LinearScale("Revenue");
var rect = new RectCoord(null, yscale);
var cframe = new CategoricalColorFrame("State");
elem.setColorFrame(cframe);
graph.setCoordinate(rect);
graph.addElement(elem);

Note that a 'null' value is assigned for the (unused) X-dimension when creating the IntervalElement and RectCoord objects.
2. Convert the chart into a stacked bar chart with just one bar by using the GraphElement's collisionModifier property. Create a StackRange object to make sure there is enough room for the stacked elements.
elem.setCollisionModifier(GraphElement.STACK_SYMMETRIC);
yscale.setScaleRange(new StackRange());

3. Create polar coordinates from the existing rectangular coordinates. By default, this maps the non-null coordinate (Y-axis) to the polar coordinate's magnitude dimension. Specify that it should be mapped to the angle dimension instead.
var polar = new PolarCoord(rect);
polar.setType(PolarCoord.THETA);
4. Use the Chart's setCoordinate() method to apply the new polar coordinates.
graph.setCoordinate(polar);

5. Remove the axis lines and labels. To do this, create an AxisSpec object, and assign it to the Scale.
var yspec = new AxisSpec();
yspec.setLabelVisible(false);
yspec.setLineVisible(false);
yspec.setTickVisible(false);
yscale.setAxisSpec(yspec);

6. Add the state names to the individual slices and hide the legend. To do this, create a new TextFrame object based on the “State” field, and assign it to the GraphElement. To hide the legend, create a new LegendSpec object, and assign it to the ColorFrame.
var tframe = new DefaultTextFrame("State");
elem.setTextFrame(tframe);
var legend = new LegendSpec();
legend.setVisible(false);
cframe.setLegendSpec(legend);
7. Explode the slices for better appearance.
elem.setHint(GraphElement.HINT_EXPLODED,'true');

The final script for the pie chart is shown below.
dataset = [["State", "Revenue"], ["CA", 200],["NY",300],["PA",150]];
graph = new EGraph();
var elem = new IntervalElement(null,"Revenue");
var xscale = new CategoricalScale("State")
var yscale = new LinearScale("Revenue");
var rect = new RectCoord(null, yscale);
var cframe = new CategoricalColorFrame("State");
elem.setColorFrame(cframe);
elem.setCollisionModifier(GraphElement.STACK_SYMMETRIC);
yscale.setScaleRange(new StackRange());
var polar = new PolarCoord(rect);
polar.setType(PolarCoord.THETA);
var yspec = new AxisSpec();
yspec.setLabelVisible(false);
yspec.setLineVisible(false);
yspec.setTickVisible(false);
yscale.setAxisSpec(yspec);
var tframe = new DefaultTextFrame("State");
elem.setTextFrame(tframe);
var legend = new LegendSpec();
legend.setVisible(false);
cframe.setLegendSpec(legend);
elem.setHint(GraphElement.HINT_EXPLODED,'true');
graph.setCoordinate(polar);
graph.addElement(elem);
| << Tailoring a Coordinate Mapping | © 1996-2013 InetSoft Technology Corporation (v11.5) | CT.12.3 Parallel Coordinates >> |