CT.3 Modifying a Chart Element using API Functions

The Chart API provides access to charting engine commands using Java object syntax. You can use these commands to directly modify the graphical elements displayed by a Chart.

Walkthrough

In this example, you will first bind a chart to a data source, and then make further modifications to the chart display by using Chart API commands. Follow the steps below:

1. Create a new report or Viewsheet. (For a Viewsheet, select the 'All Sales' query as the data source.)

2. Add a new Chart element to the report or Viewsheet.

3. For a report, click on the Chart to open the Chart Editor. For a Viewsheet, press the 'Edit' button at the top-right of the Chart.

4. For a report, in the Data panel, expand the 'Orders' data source and the 'All Sales' query. For a Viewsheet, in the Data Source panel, expand the 'All Sales' data block.

5. Drag the 'Employee' field to the 'X' region.

6. Follow the steps below to bind the 'Total' field so that it provides three different measures (maximum, minimum, and average) on the chart:

a. From the 'All Sales' source, drag the 'Total' field to the 'Y' region.

b. Click the 'Edit Measure' button next to the 'Total' field. Set the 'Aggregate' to 'Max', and click the green 'Apply' button.

 

c. From the 'All Sales' source, drag the 'Total' field (a second time) to the 'Y' region.

d. Click the 'Edit Measure' button next to the second 'Total' field. Set the 'Aggregate' to 'Min', and click the green 'Apply' button.

e. From the 'All Sales' source, drag the 'Total' field (a third time) to the 'Shape' region of the 'Visual' area.

f. Click the 'Edit Measure' button next to the third 'Total' field. Set the 'Aggregate' to 'Average', and click the green 'Apply' button.

7. Click the 'Select Chart Style' button. Double-click to select the Point Style chart.

 

The Chart Editor should now appear as shown below:

 

8. Click the 'Preview' button the toolbar to preview the report or Viewsheet.

 

The chart shows maximum and minimum totals for each employee, and the chart shape-coding (interior fill) displays the average totals.

Note that the interior fill, 'Average(Total)', is the same for both datasets, so it is not needed in both locations. In the next steps, you will change the 'Min(Total)' markers to a solid red arrow-shape. You will also increase the size of the 'Max(Total)' markers so that the fill level is more visible. To make these changes, you will use Chart API functions.

Note: Chart API script which operates on the Chart's 'Egraph' property should be placed in element-level script.

9. Open the Script Editor as follows:

a. In a report, right-click on the chart and select 'Script' from the context menu.

b. In a Viewsheet, right-click the chart and select 'Properties' from the context menu. Then select the Script tab.

10. Use script commands to create the required StaticShapeFrame, StaticColorFrame, and StaticSizeFrame objects.

// Create arrow-shaped markers:

var shpframe = new StaticShapeFrame(GShape.ARROWBAR);

 

// Create static red color:

var colframe = new StaticColorFrame(java.awt.Color(0xFF0000));

 

// Create static size of 10 pixels:

var sizframe = new StaticSizeFrame(10);

11. Obtain a handle to each of the two datasets (element sets) by using the EGraph.getElement(index) method.

var elem0 = graph.getElement(0); // Max point element

var elem1 = graph.getElement(1); // Min point element

12. Assign the visual frames to the appropriate data elements using the element's GraphElement.setShapeFrame(frame), GraphElement.setColorFrame(frame), and GraphElement.setSizeFrame(frame) properties.

elem1.shapeFrame = shpframe; // Min point element

elem1.colorFrame = colframe; // Min point element

elem0.sizeFrame = sizframe; // Max point element

13. Close the Script Editor, and preview the report or Viewsheet.

The complete script is shown below, along with the resulting graph.

var shpframe = new StaticShapeFrame(GShape.ARROWBAR);

var colframe = new StaticColorFrame(java.awt.Color(0xFF0000));

var sizframe = new StaticSizeFrame(10);

var elem0 = graph.getElement(0); // Max point element

var elem1 = graph.getElement(1); // Min point element

elem1.shapeFrame = shpframe;

elem1.colorFrame = colframe;

elem0.sizeFrame = sizframe;

 

See Also

Creating a Chart Using API Functions, to create a chart from the ground-up using script.

Modifying a Chart Data Binding, to modify data binding information.

Appendix CT:Chart Script Tutorial, for examples of modifying chart elements.

Appendix CR:Chart Script Reference, for information on objects and attributes.

API Documentation for the inetsoft.graph.* packages.

<< CT.2 Modifying a Chart Data Binding © 1996-2013 InetSoft Technology Corporation (v11.5) CT.4 Creating a Chart Using API Functions >>