CT.9 Changing Axis Properties

To alter the appearance of chart axes, use the Chart's setScale() method to assign a new Scale object. For example, you can replace a linear scale with a logarithmic scale, show or hide tick marks, display axis labels at top or right, change the label font and color, etc.

Consider the following example:

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","Quantity"], ["NJ",200], ["NY",3000]];

graph = new EGraph();

var elem = new IntervalElement("State", "Quantity");

graph.addElement(elem);

 

This creates a basic bar chart displaying the dimensions 'State' and 'Quantity'. Follow the steps below to experiment with modifying the chart's axes:

1. Create a new logarithmic scale using the LogScale object, specifying 'Quantity' as the field on which the scale is based.

var logscale = new LogScale('Quantity');

2. Set the color of the Y-axis lines and gridline to blue, and make the gridlines dotted. To do this, create a new AxisSpec object, and assign it to the Scale.

var yspec = new AxisSpec();

yspec.setLineColor(java.awt.Color(0x0000ff));

yspec.setGridColor(java.awt.Color(0x0000ff));

yspec.setGridStyle(Chart.DOT_LINE);

logscale.setAxisSpec(yspec);

3. Create a new CategoricalScale for the X-axis, specifying 'State' as the field on which the scale is based.

var cscale = new CategoricalScale('State');

4. Remove the X-axis lines and tick marks. To do this, create a new AxisSpec object, and assign it to the Scale.

var xspec = new AxisSpec();

xspec.setLineVisible(false);

xspec.setTickVisible(false);

cscale.setAxisSpec(xspec);

5. Move the X-axis labels above the chart area, and increase their size. To do this, create a new TextSpec object, and assign it to the AxisSpec.

var tspec = new TextSpec();

tspec.setFont(java.awt.Font('Dialog',

              java.awt.Font.BOLD, 14));

xspec.setTextSpec(tspec);

xspec.setAxisStyle(AxisSpec.AXIS_SINGLE2);

6. Create a new TextFrame, and specify new axis labels to replace the default labels ('NJ', 'NY') with the full state names. Assign the new TextFrame to the AxisSpec object.

var tframe = new DefaultTextFrame();

tframe.setText('NJ','New Jersey');

tframe.setText('NY','New York');

xspec.setTextFrame(tframe);

7. Assign the two Scale objects to the appropriate axes of the graph object.

graph.setScale('Quantity',logscale);

graph.setScale('State',cscale);

 

The complete script is shown below.

dataset = [["State","Quantity"], ["NJ",200], ["NY",3000]];

graph = new EGraph();

var elem = new IntervalElement("State", "Quantity");

var logscale = new LogScale('Quantity');

var yspec = new AxisSpec();

yspec.setLineColor(java.awt.Color(0x0000ff));

yspec.setGridColor(java.awt.Color(0x0000ff));

yspec.setGridStyle(Chart.DOT_LINE);

logscale.setAxisSpec(yspec);

var cscale = new CategoricalScale('State');

var xspec = new AxisSpec();

xspec.setLineVisible(false);

xspec.setTickVisible(false);

cscale.setAxisSpec(xspec);

var tspec = new TextSpec();

tspec.setFont(java.awt.Font('Dialog',java.awt.Font.BOLD, 14));

xspec.setTextSpec(tspec);

xspec.setAxisStyle(AxisSpec.AXIS_SINGLE2);

var tframe = new DefaultTextFrame();

tframe.setText('NJ','New Jersey');

tframe.setText('NY','New York');

xspec.setTextFrame(tframe);

graph.setScale('Quantity',logscale);

graph.setScale('State',cscale);

graph.addElement(elem);

<< CT.8 Changing the Appearance of Chart Elements © 1996-2013 InetSoft Technology Corporation (v11.5) CT.10 Changing Legend Properties >>