Draw Graph

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:

1. Define the data and the Chart objects, and create a new IntervalElement (bar chart).

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.coord)
importPackage(inetsoft.graph.data)
 
var arr = [["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]];
dataset = new DefaultDataSet(arr);
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').