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.4) CT.12.3 Parallel Coordinates >>