InetSoft Product How-To: Creating a Chart Using API Functions

Previous sections explained how to modify the data binding and element properties of an existing chart. This section explains how to create a new chart from the ground-up using Chart API commands.

In this example, you will create a new chart, define the chart data, and display the data on the chart. Follow the steps below.

  1. Add a new Chart to the Report. (Do not open the 'Data Binding' dialog box for the chart.)
    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.

  2. Click the Chart to select it. Right-click and select 'Script' from the context menu. This opens the Script Editor, where you can enter the chart script.

  3. (Optional) Enter the following lines to import the packages required by the script. You only need to import packages that the script actually uses.
importPackage(inetsoft.graph)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.coord)
importPackage(inetsoft.graph.data)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.guide.form)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.schema)
visual analysis chart example

When you import a package, you can refer to its classes by their sim­ple class names, e.g., HeatColorFrame(). If you do not import the package, then you need to use the fully-qualified class names, for example, inetsoft.graph.aesthetic.HeatColorFrame().

Tip: To reference chart data, use the DataSet object.

chart art americas
  1. Define the data: Define the dataset for the chart using the Chart's Data property. 

    2. data = runQuery("sales by state");

    In most cases, you will obtain the data from a query or data model by using runQuery(). You can also define your own dataset by passing a JavaScript array to the DefaultDataSet() method. EGraph is the global chart object, including all axes, legends, visual elements, etc.

  2. Create the Chart object. Create a new graph using the EGraph constructor. Assign it to the Chart's graph property. 

    3. graph = new EGraph();
  3. Create the chart data elements. Pass the field names (column headers) to a GraphElement constructor. This creates the representational elements for the chart. var elem = new IntervalElement("State", "Sales"); The IntervalElement is a particular type of GraphElement that creates “bars” or “intervals” as the representational elements. Other Graph­Elements, such as PointElement and LineElement, generate other kinds of chart types, such as scatter plots and line plots, respectively.

  4. Add the elements to the Chart object. Pass the GraphElement object to the Chart's EGraph.addElement(elem) method. This adds the “bar” elements to the existing Chart object. 

    5. graph.addElement(elem);
  5. Close the Script Editor and preview the report.

These are the basic operations required to create a chart from the ground-up using the Chart API. The complete script is shown below, along with the resulting chart.

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.coord)
importPackage(inetsoft.graph.data)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.guide.form)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.schema)


data = runQuery("sales by state");
graph = new EGraph();
var elem = new IntervalElement("State", "Sales");
graph.addElement(elem);
chart art pies

 

Previous: Modifying a Chart Element using API Functions