Chart Scripting Tutorial (API)

This appendix provides a set of chart examples to illustrate some common chart scripting tasks, such as color-coding data, changing labels and axes, and positioning chart annotations.

The scripts in this appendix can be used for both Report Charts (using Report Designer) and Viewsheet Charts (using Visual Composer). However, there are some differences in how charts are configured in these different environments. See the references for further information.

#1 Ranking: Read how InetSoft was rated #1 for user adoption in G2's user survey-based index Read More

Accessing Chart Data

You can access Chart data in script by using the “dataset” object. The dataset object contains the aggregate values displayed on the chart (the same values shown by the 'Chart Data' button). The Dataset object is accessible as a two-dimensional array, where each column represents a distinct dataset (measure).

For example, consider a chart with two datasets (measures), as shown below: As is typically the case, each value plotted on the graph represents an aggregation of many detail records. The Dataset object provides access to these aggregate values.

You can use the dataset.getdata(j,i) function with row index i and column j (an integer index, or the actual column name) to access the data displayed on the chart. Use dataset.getRowCount() and dataset.getColCount() to obtain the number of rows and columns of summarized data.

why select InetSoft
“We evaluated many reporting vendors and were most impressed at the speed with which the proof of concept could be developed. We found InetSoft to be the best option to meet our business requirements and integrate with our own technology.”
- John White, Senior Director, Information Technology at Livingston International

Example: Accessing aggregate data

In this example, add a script to display data values on the chart only if the value exceeds falls below a threshold the measure.

  1. Create a new Viewsheet based on the 'Sales' > 'Sales Explore' Worksheet.
  2. Drag a Chart component onto the Viewsheet, and click the 'Edit' button on the Chart to open the Chart Editor.
  3. Bind the 'Category' field to the chart's X-axis.
  4. Bind both 'Total' and 'Quantity Purchased' fields to the chart's Y-axis. This creates a facet chart with two sets of axes.
  5. Resize the chart to show all data.
  6. Right-click on the chart, and select 'Properties' from the context menu. This opens the 'Chart Properties' dialog box. Add the following script in the 'Script' area.
importPackage(inetsoft.graph)
 importPackage(inetsoft.graph.data)
 importPackage(inetsoft.graph.guide.form)

   var threshold = 5000;

   // Step through the rows of chart data with index i for (var i = 0;
   i < dataset.getRowCount(); i++) {

   // Obtain the ith value of 'Category' and 'Quantity'
   var Xvalue = dataset.getData("Category", i);
   var Yvalue =   
   dataset.getData('Sum of Quantity Purchased', i);

   // test the value of Quantity against the threshold
   if(Yvalue < threshold) {

     // Create the label object
     var form = new LabelForm();
     // Set the label to appear only on Quantity axes
     form.setMeasure('Sum of Quantity Purchased')
     // Set the label text
     form.setLabel(Yvalue);
     // Set the label position and alignment
     form.setValues([Xvalue,Yvalue]);
     form.setAlignmentX(GraphConstants.CENTER_ALIGNMENT);
     // Add the label to the graph
     graph.addForm(form)
   }
 }

More Articles About Charts

Evaluate InetSoft's On Demand Business Intelligence Solution - Looking for an on demand business intelligence solution? InetSoft is a pioneer in self-service BI with a turnkey option in the cloud. InetSoft is highly rated by users for customer support. View a demo and try interactive examples...

How to Boost BI Dashboard Performance - The best method for boosting Dashboard performance is to create a materialized view. A materialized view is a caching strategy that pre-aggregates and stores the data required by a Dashboard so that the Dashboard can respond more quickly at runtime. When a materialized view exists for a Dashboard, the server attempts to query the cached materialized view rather than querying the database. This can significantly reduce the run time for certain queries, which increases Dashboard responsiveness...

How to Make a Dynamic Report - Step 1. Create a report template with fields and data sources To use this tool, you'll need to first create a report template. A report template is simply a set of fields and data sources that you can use to build any type of report. Once you've created a template, you can then add fields and data sources to it. Step 2. Add the fields and data sources you need The next step is to define what information you want to include in the report. You'll need to decide which fields you want to use and where you want them located. Once you've defined the fields, you'll be able to add them to the report. To add a field, click the Add Field button at the top of the page. Fields can be added to the Report Data Source section, the Chart Data Source section, or both...

Love This Particular Dashboard - So what we see here is the number of leads coming in, the number turning into qualified opportunities and so on all the way down to paperwork approval and closed won for this last quarter and quarter four. So, again this is not our data, but a great example of a funnel and of a story that has real drama about how we're climbing this mountain and how we're going to achieve this goal. So I love this particular dashboard for the natural emotion it shows and the emotion that it demonstrates and unifies. It unifies people...

Self-service Reporting for Operations - And then into that self-service reporting environment you are talking about where the operations folks can actually really see things happening more or less in real time and potentially drill down and then see bigger amounts of data alongside, and say well I see this spike over here, but you know what did that, you know, what was happening at exactly the same time a week ago or a year ago, and then we had a spike then, and they can answer the question, is this normal or this is abnormal...

Previous: JavaScript Chart Scripting Techniques
We will help you get started Contact us