InetSoft Product Information: Chart Design

The example below illustrates how a developer can use InetSoft's API to control design elements of a chart design in a programmatic way. This degree of control makes InetSoft chart generator a good option for embedding into a service providers own solution.

Request a Demo
Register for Pricing
KPI Dashboard Example
#1 Ranking: Read how InetSoft was rated #1 for user adoption in G2's user survey-based index Read More

To draw decorative elements (lines, shapes, text, etc.) on the chart, use a GraphForm object. Consider the following example (Note: Report script that modifies 'graph' should be placed at the element level. See Adding Element-Level Script):

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.coord)
importPackage(inetsoft.graph.data)
 
var arr = [["State", "Quantity"], ["NJ", 200],
      ["NY", 300], ["PA", 370], ["CT", 75]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var elem = new IntervalElement("State", "Quantity");
graph.addElement(elem);

This generates a basic bar chart with quantities for four different states. To add a small note indicating that the lowest value was due to an inventory problem, follow the steps below:

  1. Create a new LineForm object, and specify location values to point at the 'CT' bar.
 var lineform = new LineForm();
 lineform.addValues([['CT', 150],['CT', 100]]);
  1. Set the line color to red, and draw an arrow at the end.
 lineform.setColor(java.awt.Color(0xff0000));
 lineform.setEndArrow(true);
  1. Create a new LabelForm object, and specify location values to position it above the 'CT' bar.
 var labelform = new LabelForm();
 labelform.setValues(['CT', 150]);
  1. Set the label contents, set the text color to red, and center-align. To set the text color, create a new TextSpec object and assign it to the LabelForm.
 var labelSpec = new TextSpec();
 labelSpec.setColor(java.awt.Color(0xff0000));
 labelform.setTextSpec(labelSpec);
 labelform.setLabel("Note: Low\nInventory");
 labelform.setAlignmentX(GraphConstants.CENTER_ALIGNMENT);
  1. Assign the LineForm and LabelForm objects to the Chart object.
 graph.addForm(lineform);
 graph.addForm(labelform);

The final script is shown below.

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

 var arr = [["State", "Quantity"], ["NJ", 200],
 ["NY", 300], ["PA", 370], ["CT", 75]];
 dataset = new DefaultDataSet(arr);
 graph = new EGraph();
 var elem = new IntervalElement("State", "Quantity");
 var lineform = new LineForm();
 lineform.addValues([['CT', 150],['CT', 100]]);
 lineform.setColor(java.awt.Color(0xff0000));
 lineform.setEndArrow(true);
 var labelform = new LabelForm();
 labelform.setValues(['CT', 150]);
 var labelSpec = new TextSpec();
 labelSpec.setColor(java.awt.Color(0xff0000));
 labelform.setTextSpec(labelSpec);
 labelform.setLabel("Note: Low\nInventory");
 labelform.setAlignmentX(GraphConstants.CENTER_ALIGNMENT);
 graph.addForm(lineform);
 graph.addForm(labelform);
 graph.addElement(elem);

More Articles About Chart Design

Evaluate InetSoft's Reporting Tool for Zendesk - Are you looking for an alternative reporting tool for Zendesk? Go beyond Zendesk Explore with greater self-service and personalized reporting, advanced chart types, and the ability to create data mashups with other organizational data outside of Zendesk. InetSoft's pioneering dashboard reporting application produces great-looking web-based dashboards with an easy-to-use drag-and-drop designer. View a demo and try interactive examples...

How Does Data Mashup Eliminate the Need for ETL Processes? - Data mashup is a technique used to integrate data from multiple sources or formats into a single dataset for analysis or visualization purposes. While data mashup can offer benefits in terms of agility and flexibility, it does not necessarily eliminate the need for Extract, Transform, Load (ETL) processes entirely. Instead, it complements traditional ETL processes and can be used in conjunction with them to streamline data integration workflows. Here's how data mashup and ETL processes compare and how they can work together...

ML in Jet Fuel Production - Machine learning (ML) can be instrumental in optimizing various aspects of jet fuel production, enhancing efficiency, safety, and sustainability. Here's how ML can be applied in the context of jet fuel production: Process Optimization: ML algorithms can analyze vast amounts of data collected from sensors, production logs, and historical records to optimize the jet fuel production process. By identifying patterns and correlations in data, ML models can suggest adjustments to operating parameters such as temperature, pressure, and flow rates to maximize yield and minimize energy consumption...

Ride Completion Rates - The percentage of rides completed is one of the main KPIs tracked on dashboards for shared rider systems. The proportion of started rides that are successfully finished is assessed by this measure. Reliability of the transportation network, smooth user experiences, and operational efficiency are all indicated by a high completion rate. On the other hand, a falling completion rate might indicate problems with the app, driver availability, or route optimization, which would need quick fixes...

Time on Platform/User Session Duration - Knowing how much time people spend using a platform like InfinitePay's services is essential. The length of a user session or time on platform indicates how long users typically spend engaging with InfinitePay. This KPI measures user engagement and may inform user interface, feature, and service changes to boost stickiness and satisfaction...

Previous: Scorecard Measures