CT.13 Representing Data with Shape, Color, Size

You can create a basic two-dimensional representation of data with just a GraphElement object. To represent additional dimensions by using other visual attributes of elements, create a VisualFrame.

To understand how to use a VisualFrame, consider the script below:

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","Total"],["NJ",200,2500],["NY",300,1500]];

graph = new EGraph();

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

graph.addElement(elem);

 

This creates a basic point (scatter) chart displaying the dimensions 'State' and 'Quantity'. If you want to additionally represent the dimension 'Total' with the element size, use a VisualFrame such as the LinearSizeFrame. Follow these steps:

1. Create a new LinearSizeFrame object, and specify the field containing the data that will determine the element sizes.

var frame = new LinearSizeFrame();

frame.setField("Total");

A VisualFrame object such as LinearSize­Frame contains a mapping between data values and physical attributes. Therefore, you need a Scale to specify the mapping's scaling.

2. Create a new LinearScale object, and assign the scale properties. (See Appendix CT.7, Changing Chart Scaling, for more information.)

var scale = new LinearScale();

scale.setFields("Total");

scale.setMax(3000);

scale.setMin(1000);

3. Assign the new Scale to the VisualFrame object:

frame.setScale(scale);

4. Assign the VisualFrame object to the GraphElement object:

elem.setSizeFrame(frame);

The point sizes now represent the data values contained in the 'Total' field. The complete script is shown below.

dataset = [["State","Quantity","Total"],["NJ",200,2500],["NY",300,1500]];

graph = new EGraph();

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

var frame = new LinearSizeFrame();

frame.setField("Total");

var scale = new LinearScale();

scale.setFields("Total");

scale.setMax(3000);

scale.setMin(1000);

frame.setScale(scale);

elem.setSizeFrame(frame);

graph.addElement(elem);

 

See Also

Representing Multiple Measures, for information on adding multiple elements.

Changing the Appearance of Chart Elements, to use static VisualFrame objects.

<< CT.12.5 Setting a Coordinate Background © 1996-2013 InetSoft Technology Corporation (v11.4) CT.14 Representing Multiple Measures >>