CT.12.4 Facet Coordinates
The FacetCoord object contains a set of inner and outer coordinates on which multidimensional data can be represented as nested charts. To create a FacetCoord object, pass a pair of RectCoord objects to the FacetCoord constructor:
var rect = new FacetCoord(outerCoord,innerCoord);
To understand facet coordinates, consider the following data set.
State |
Product |
Name |
Priority |
NJ |
P1 |
Joe |
2 |
NJ |
P2 |
Sam |
3 |
NY |
P1 |
Jane |
4 |
NJ |
P1 |
Sam |
1 |
NJ |
P2 |
Joe |
10 |
NY |
P1 |
Sam |
10 |
Because there are four different dimensions, there are several ways to look at the data. For example, you may want to plot 'Priority' vs. 'Name', and also break this down by 'Product' and 'State'. To construct a facet chart to do this, 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 and the Chart objects, and create a new IntervalElement (bar chart).
dataset = [["State", "Product", "Name", "Priority"],["NJ", "P1", "Joe", 2],["NJ", "P2", "Sam", 3],["NY", "P1", "Jane", 4],["NJ", "P1", "Sam", 1],["NJ", "P2", "Joe", 10],["NY", "P1", "Sam", 10]];
graph = new EGraph();
var elem = new IntervalElement("Name", "Priority");
2. Create a Scale for each of the dimensions. All dimensions are categorical except for 'Priority'.
var state = new CategoricalScale("State");
var name = new CategoricalScale("Name");
var product = new CategoricalScale("Product");
var priority = new LinearScale("Priority");
3. Define two sets of rectangular coordinates, one for the outer coordinates ('Product' vs. 'State') and one for the inner coordinates ('Priority' vs. 'Name').
var inner = new RectCoord(name, priority);
var outer = new RectCoord(state, product);
4. Create the facet coordinates based on the outer and inner rectangular coordinates defined above.
var coord = new FacetCoord(outer,inner);
5. Assign the coordinates and the bar elements to the chart.
graph.setCoordinate(coord);
graph.addElement(elem);

The resulting chart displays an outer grid based on the outer coordinates ('State' and 'Product'). Within each cell of the outer grid, the chart displays the corresponding inner coordinates ('Name' and 'Priority').
The complete script is provided below.
dataset = [["State", "Product", "Name", "Priority"],["NJ", "P1", "Joe", 2],["NJ", "P2", "Sam", 3],["NY", "P1", "Jane", 4],["NJ", "P1", "Sam", 1],["NJ", "P2", "Joe", 10],["NY", "P1", "Sam", 10]];
graph = new EGraph();
var elem = new IntervalElement("Name", "Priority");
var state = new CategoricalScale("State");
var name = new CategoricalScale("Name");
var product = new CategoricalScale("Product");
var priority = new LinearScale("Priority");
var inner = new RectCoord(name, priority);
var outer = new RectCoord(state, product);
var coord = new FacetCoord(outer,inner);
graph.setCoordinate(coord);
graph.addElement(elem)
| << CT.12.3 Parallel Coordinates | © 1996-2013 InetSoft Technology Corporation (v11.4) | CT.12.5 Setting a Coordinate Background >> |