InetSoft Product How-To: Controlling Dashboard Features

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:

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)
 
var arr = [["State","Quantity"], ["NJ",200], ["NY",3000]];
dataset = new DefaultDataSet(arr);
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(GraphConstants.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:

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)
 
var arr = [["State","Quantity"], ["NJ",200], ["NY",3000]];
dataset = new DefaultDataSet(arr);
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(GraphConstants.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);

Previous: Changing the Appearance of a Dashboard Chart

Next: Dashboarding API