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 >> |