CT.12.5 Setting a Coordinate Background

You can assign a background color or background image to the coordinate area (plot area) of a chart by defining a PlotSpec object. The following example illustrates how to set a blue background for a chart:

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

graph = new EGraph();

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

var sscale = new CategoricalScale("State");

var qscale = new LinearScale("Quantity");

var coord = new RectCoord(sscale,qscale);

var spec = new PlotSpec();

spec.setBackground(java.awt.Color(0xEEEEFF));

coord.setPlotSpec(spec);

graph.setCoordinate(coord);

graph.addElement(elem);

 

Use the setBackgroundImage() function to display an image as the plot background. The following example uses a static Google map image as a background by aligning the map coordinates with the chart coordinates.

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.

// Define latitude and longitude values for landmarks:

dataset = [["Latitude","Longitude","PlaceName"],[40.8516051126306,-73.95223617553711,' GW Bridge '],[40.76292614285948,-74.00982856750488,' Lincoln Tunnel '],[40.72755146730012,-74.02107238769531,' Holland Tunnel ']];

graph = new EGraph();

 

// Define chart elements and basic point appearance:

var elem = new PointElement("Longitude","Latitude");

var tframe = new DefaultTextFrame("PlaceName");

var sframe = new StaticShapeFrame();

var cframe = new StaticColorFrame();

cframe.setColor(java.awt.Color(0x0000000));

sframe.setShape(GShape.FILLED_CIRCLE);

 

// Define appearance of text labels:

var tspec = new TextSpec();

tspec.setBackground(java.awt.Color(0x0000000))

tspec.setFont(java.awt.Font('Trebuchet',java.awt.Font.BOLD, 11));

tspec.setColor(java.awt.Color(0xffff00));

 

// Configure a background image using PlotSpec:

var pspec = new PlotSpec();

pspec.setLockAspect(true);

var logo = getImage("http://maps.google.com/maps/api/staticmap?center=40.7857,-73.9819&zoom=11&size=400x400&sensor=false");

pspec.setBackgroundImage(logo);

pspec.setYMax(40.8902)   // YMax = high latitude

pspec.setYMin(40.6822)   // YMin = low latitude

pspec.setXMax(-73.84529) // XMax = high longitude

pspec.setXMin(-74.1206)  // XMin = low longitude

 

// Set chart scales to match image coordinates:

var latscale = new LinearScale("Latitude");

var lonscale = new LinearScale("Longitude");

var aspec = new AxisSpec();

aspec.setLabelVisible(false);

latscale.setAxisSpec(aspec);

lonscale.setAxisSpec(aspec);

latscale.setScaleOption(0);

lonscale.setScaleOption(0);

latscale.setMax(pspec.getYMax());  // match YMax

latscale.setMin(pspec.getYMin());  // match YMin

lonscale.setMax(pspec.getXMax());  // match XMax

lonscale.setMin(pspec.getXMin());  // match XMin

var coord = new RectCoord(lonscale,latscale);

coord.setPlotSpec(pspec);

 

// Assign visual frames to chart elements:

elem.setTextFrame(tframe);

elem.setTextSpec(tspec);

elem.setShapeFrame(sframe);

elem.setColorFrame(cframe);

elem.setHint(GraphElement.HINT_ALPHA,1);

 

// Assign coordinates. Generate chart with appropriate size:

graph.setCoordinate(coord);

graph.addElement(elem);

 

// For a report, set the chart element size as desired:

//Chart1.size = [5.6,5.6];

 

Note that the limits of the chart scales (latscale.setMax, latscale.setMin, lonscale.setMax, lonscale.setMin) have been set to match the geographical boundaries of the map image. This allows the image to align correctly with the chart axes.

See Also

Appendix CR.4.9  , PlotSpec, for reference information.

background, in Report Scripting, to set a background for the report element.

Chart Properties, in Report Design, to set a background for the report element.

Color Tab, in Dashboard Design, to set a background for the Viewsheet element.

<< CT.12.4 Facet Coordinates © 1996-2013 InetSoft Technology Corporation (v11.5) CT.13 Representing Data with Shape, Color, Size >>