CT.12.3 Parallel Coordinates

Parallel coordinates display multiple dimensions as parallel axes, rather than orthogonal axes, as for rectangular coordinates. Parallel coordinates are defined by the ParallelCoord object, which accepts a set of Scale objects as input.

To understand parallel coordinates, consider the following data set, which contains scores for three students over three consecutive tests.

Test 1

Test 2

Test 3

Name

200

175

50

Joe

800

1000

300

Jane

10

15

20

Fred

By plotting this data on three parallel coordinates ('Test 1', 'Test 2', 'Test 3'), you can visualize trends across the different tests. To create this chart, follow the steps 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.

1. Define the data set and chart objects.

dataset = [["Test1","Test2","Test3","Name"],[100,80,20,'Joe'],[75,50,40,'Jane'],[50,30,80,'Fred']];

graph = new EGraph();

2. Create a new LineElement object to define a line-style chart, and assign its dimensions.

var elem = new LineElement();

elem.addDim("Test1");

elem.addDim("Test2");

elem.addDim("Test3");

3. Define the scales used for the three axes. (In this case the scales are the same for all three.)

var scale1 = new LinearScale("Test1");

var scale2 = new LinearScale("Test2");

var scale3 = new LinearScale("Test3");

scale1.setMax(100);

scale2.setMax(100);

scale3.setMax(100);

scale1.setMin(0);

scale2.setMin(0);

scale3.setMin(0);

4. Create the new ParallelCoord object using the defined scales.

var coord = new ParallelCoord(scale1,scale2,scale3);

5. Use a CategoricalColorFrame to distinguish the three students. Assign the frame to the line element.

var frame = new CategoricalColorFrame("Name");

elem.setColorFrame(frame);

6. Assign the parallel coordinate system to the chart.

graph.addElement(elem);

graph.setCoordinate(coord);

The complete script is shown below:

dataset = [["Test1","Test2","Test3","Name"],[100,80,20,'Joe'],[75,50,40,'Jane'],[50,30,80,'Fred']];

graph = new EGraph();

var elem = new LineElement();

elem.addDim("Test1");

elem.addDim("Test2");

elem.addDim("Test3");

var scale1 = new LinearScale("Test1");

var scale2 = new LinearScale("Test2");

var scale3 = new LinearScale("Test3");

scale1.setMax(100);

scale2.setMax(100);

scale3.setMax(100);

scale1.setMin(0);

scale2.setMin(0);

scale3.setMin(0);

var coord = new ParallelCoord(scale1,scale2,scale3);

var frame = new CategoricalColorFrame("Name");

elem.setColorFrame(frame);

graph.addElement(elem);

graph.setCoordinate(coord);

 

<< Example: Pie Chart © 1996-2013 InetSoft Technology Corporation (v11.5) CT.12.4 Facet Coordinates >>