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.
In this example, you will first create a chart by using the 'Data Binding' dialog box. You will then make further modifications to the display by using Chart API commands. Follow the steps below:
1. Add a new Chart element to the report.
2. Right-click the chart, and select 'Bind Data' from the context menu. This opens the 'Data Binding' dialog box.
3. Under the Data tab, select the 'All Sales' query.
4. Click the Chart tab. From the 'Available Columns' panel, drag the 'Employee' field to the 'X' region of the 'Data' panel.
View more examples in the InetSoft visualization gallery
5. Bind the 'Total' field so as to provide three different measures on the chart. Follow the steps below:
a. From the 'Available Columns' panel, drag the 'Total' field to the 'Y' region of the 'Data' panel.
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 'Available Columns' panel, drag the 'Total' field (again) to the 'Y' region of the 'Data' panel.
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 'Available Columns' panel, drag the 'Total' field (again) to the 'Shape' region of the 'Visual' panel.
f. Click the 'Edit Measure' button next to the third 'Total' field. Set the 'Aggregate' to 'Average', and click the green 'Apply' button.
6. Click the 'Select Chart Style' button. Double-click to select the Point Style chart.
7. The 'Data Binding' dialog box should now appear as below:
8. Click 'Finish' to close the 'Data Binding' dialog box. Preview the report.
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 the Chart API functions.
Note: Chart API script (which operates on the Chart's 'Egraph' property) should be placed in element scope. See Adding Element-Level Script for more information.
9. Create the required StaticShapeFrame, StaticColorFrame, and StaticSizeFrame objects.
// Import required Java packages: importPackage(inetsoft.graph.aesthetic); // 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);
10. 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
11. 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
12. Close the Script Editor, and preview the report. The complete script is shown below, along with the resulting graph.
importPackage(inetsoft.graph.aesthetic); 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;
Copyright © 2024, InetSoft Technology Corp.
