How to Make a Web Chart with an API

Do you want to learn how to make a web chart with an API? InetSoft provides easy to use web chart graphing API for developers to render charts programmatically. View a demo and get a personalized demo.

StaticColorFrame

The StaticColorFrame object contains a color frame defined by explicit color data in the VisualFrame.setField(field) column, or by the fixed color in StaticColorFrame.setColor(value), StaticColorFrame.color. To create a StaticColorFrame object, call the StaticColorFrame constructor.

 importPackage(inetsoft.graph.aesthetic);
 var frame = new StaticColorFrame();

You can pass a color value directly to the constructor, e.g.,

var frame = new StaticColorFrame(java.awt.Color(0xFF00FF)); 

or specify it later using the in StaticColorFrame.setColor(value), StaticColorFrame.color property.

Example (Report or Viewsheet)

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)

var arr = [["State","Quantity","Color"],
           ["NJ",200,0xff0000], ["NY",300,0xff00ff]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var elem = new IntervalElement("State", "Quantity");
var frame = new StaticColorFrame();
frame.setField("Color");
elem.setColorFrame(frame);
graph.addElement(elem);

StaticColorFrame.setColor(value), StaticColorFrame.color

Specifies the static color to be used for positive field values. The static color can also be passed as an input to the constructor. If the data column specified by the inherited VisualFrame.setField(field) property contains (positive) numbers or colors, these data values are used instead of StaticColorFrame.setColor().

Type (Report Script)

java.awt.Color          e.g., java.awt.Color.BLUE
number (hex)            e.g., 0xFF0000
string (color name)     e.g., 'red'
array [r,g,b]           e.g., [255,0,0]
JSON {r:#,g:#,b:#}      e.g., {r:255,g:0,b:0}

Parameter (Element Script)

 value a java.awt.Color object

Example (Report)

Bind a bar-type chart to the sample 'All Sales' query, with 'Company' (top 5) on the X-axis, and Sum(Total) on the Y-axis. Add the following script in the onLoad Handler.

importPackage(inetsoft.graph.aesthetic);
Graph1.bindingInfo.setColorField("Company",Chart.STRING);
Graph1.bindingInfo.colorFrame = new StaticColorFrame;
Graph1.bindingInfo.colorFrame.color = 0xFF00FF;

Example (Report or Viewsheet)

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)

var arr = [["State", "Quantity"], ["NJ",200], ["NY",300]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var elem = new IntervalElement("State", "Quantity");
var frame = new StaticColorFrame();
frame.setColor(java.awt.Color(0x00ff00));
elem.setColorFrame(frame);
graph.addElement(elem);

StaticColorFrame.setNegativeColor(value), StaticColorFrame.negativeColor

Specifies the static color to be used for negative field values. If a value is specified for StaticColorFrame.setNegativeColor(), then StaticColorFrame.setColor() defines the color of positive values, and StaticColorFrame.setNegativeColor() defines the color of negative values. In this case, the inherited VisualFrame.setField(field) property is not used.

Type (Report Script)

java.awt.Color          e.g., java.awt.Color.BLUE
number (hex)            e.g., 0xFF0000
string (color name)     e.g., 'red'
array [r,g,b]           e.g., [255,0,0]
JSON {r:#,g:#,b:#}      e.g., {r:255,g:0,b:0}

Parameter (Element Script)

 value a java.awt.Color object

Example (Report)

Bind a bar-type chart to the sample 'Monitoring' Worksheet. Create a formula column called 'Differential' of type Double that computes field['Total']-field['Quota']. Place 'First Name' on the X-axis, and Sum(Differential) on the Y-axis. Add the following script in the onLoad Handler.

importPackage(inetsoft.graph.aesthetic);
Graph1.bindingInfo.setColorField("Differential",
  Chart.NUMBER);
Graph1.bindingInfo.colorFrame = new StaticColorFrame;
Graph1.bindingInfo.colorFrame.color = 0x00FF00;
Graph1.bindingInfo.colorFrame.negativeColor = 0xFF0000;

Example (Viewsheet or Report)

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)

var arr = [["State", "Quantity"], ["NJ",200], ["NY",-300]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var elem = new IntervalElement("State", "Quantity");
var frame = new StaticColorFrame();
frame.setField("Quantity");
frame.setColor(java.awt.Color(0x00ff00));
frame.setNegativeColor(java.awt.Color(0xff0000));
elem.setColorFrame(frame);
graph.addElement(elem);

CircularColorFrame

The CircularColorFrame object contains a continuous color frame that returns gradations from the full spectrum. To create a CircularColorFrame object, call the CircularColorFrame constructor.

importPackage(inetsoft.graph.aesthetic);
var frame = new CircularColorFrame('Quantity');

You can pass the name of a field (e.g., 'Quantity') to the constructor, or specify this later using the inherited VisualFrame.setField(field) property.

Example (Report)

Bind a bar-type chart to the sample 'All Sales' query, with 'Company' (top 5) on the X-axis, and Sum(Total) on the Y-axis. Add the following script in the onLoad Handler.

importPackage(inetsoft.graph.aesthetic);
Graph1.bindingInfo.setColorField("Total",Chart.NUMBER);
Graph1.bindingInfo.colorFrame = new CircularColorFrame;

Example (Viewsheet or Report)

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)

var arr = [["State", "Quantity"],
           ["NJ",200],["NY",300],["PA",50],["CT",100]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var elem = new IntervalElement("State", "Quantity");
var frame = new CircularColorFrame();
frame.setField("Quantity");
elem.setColorFrame(frame);
graph.addElement(elem);

GradientColorFrame

The GradientColorFrame object contains a continuous color frame that returns gradations between two colors. To create a GradientColorFrame object, call the GradientColorFrame constructor.

 importPackage(inetsoft.graph.aesthetic);
 var frame = new GradientColorFrame();

You can pass the name of a field (e.g., 'Quantity') to the constructor, or specify this later using the inherited VisualFrame.setField(field) property.

Example (Report)

Bind a bar-type chart to the sample 'All Sales' query, with 'Company' (top 5) on the X-axis, and Sum(Total) on the Y-axis. Add the following script in the onLoad Handler.

importPackage(inetsoft.graph.aesthetic);
Graph1.bindingInfo.setColorField("Total",Chart.NUMBER);
Graph1.bindingInfo.colorFrame = new GradientColorFrame;
Graph1.bindingInfo.colorFrame.fromColor = 0x0000FF;
Graph1.bindingInfo.colorFrame.toColor = 0xFF00FF;

Example (Report or Viewsheet)

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)

var arr = [["State", "Quantity"],
          ["NJ",200],["NY",300],
          ["PA",50],["CT",100]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var elem = new IntervalElement("State"
           , "Quantity");
var frame = new GradientColorFrame();
frame.setField("Quantity");
elem.setColorFrame(frame);
graph.addElement(elem);

12 InetSoft Articles About Web Charting

  1. Explore The RESTful API For Web-Based Reporting

    This article describes InetSoft’s web reporting architecture, highlighting a RESTful API for administration and asset access. It explains how clients can authenticate via `/api/public/login` and use tokens in headers for subsequent calls. The API supports operations like opening, executing, and querying reports in a fully web environment. It emphasizes how this enables embedding InetSoft’s reporting into existing web apps and portals. There’s a focus on deployment in Java servlet containers without forcing a dedicated client.

  2. Manage Servlet-Based Replet Interactions In Web Contexts

    This page explains how to access servlet-level request and response objects from InetSoft replets when running inside a web container. It shows how to retrieve `HttpServletRequest` and `HttpServletResponse` within report code via the replet API. Developers can use this to pull in session information or servlet configuration for advanced reporting logic. There’s also discussion about customizing presentation, like header/footer, depending on web-client context. It describes how replets that rely on servlet context cannot be used in non-web environments.

  3. Integrate Dashboards Into Web Apps With REST Calls

    This article shows how InetSoft’s REST API can be used to embed dashboards into third-party web applications. It describes how developers can invoke the API to control filters, refresh data, and drive dashboard interactivity. The REST interface supports session management, parameter passing, and embedding contexts. It also presents a use case of embedding dashboards in a SaaS environment so that customers never leave the host app. The discussion notes benefits for OEMs and ISVs who want full control over look and behavior.

  4. Script Web Visualizations Using InetSoft’s HTML-Friendly API

    This documentation details how to manipulate visual elements (charts, frames, axes) programmatically through an API suited for web-based dashboards. It describes an object model that lets developers control frames, color, scales, and more via scripted code. The API is designed to work in HTML5 or browser-based environments, exposing granular control over visual constructs. There are examples illustrating how to define a StaticColorFrame or gradient frames through script. The page is targeted at developers embedding highly customized visualizations in web UI.

  5. Use The Chart API To Build Charts In Your Web App

    This piece describes how InetSoft’s charting API can be used within a web application to dynamically generate charts. It covers both free (open-source) and commercial options in Style Intelligence, aimed at developers building web-native visual analytics. The example code shows how to set up color frames, data binding, and chart elements via JavaScript-like scripting. It details how to embed charts via servlet or REST API into web UIs. The article highlights gradient, categorical, and rainbow color frames to style charts programmatically.

  6. Customize Error Pages And Presentation In Web Report Servlets

    This section of the Web Report Interface API article explains how you can override default error handling in web report servlets. Developers can supply a custom `repletError.html` to present user-friendly error messages. It also covers how to adjust DHTML presentation properties in the web UI via servlet configuration. The article shows how to integrate header and footer text programmatically into report repository windows. It’s focused on providing a better branding and user experience in embedded web report views.

  7. Generate PDFs From Web-Requests Through a Servlet API

    This article explains how the `PDFService` servlet supports web-based PDF (and HTML/Excel) generation via HTTP. When a browser calls this servlet, it can pass a report template and parameters, triggering asynchronous report execution in the background. The servlet returns a status page while the report is generated, and once completed, provides a downloadable PDF or HTML result. The mechanism uses threads to avoid timing out long-running reports even on large templates. This enables embedding high-fidelity report export functionality in web applications without manual intervention.

  8. Embed Report Repository In Web Apps Using Custom Protocols

    This guide covers how to use a custom domain-specific protocol to embed report repository content into a web client. It describes using a custom servlet or JSP to host the repository UI within another web application. Developers can tune context roots, resource URIs, and servlet mappings to make the InetSoft repository part of their own portal. The page includes configuration steps for web.xml and portal context. It helps embed a fully functional report navigation UI without forcing users to leave their host web application.

  9. Use JSP Tags To Render Reports In Web Pages

    This documentation details a JSP tag library that wraps InetSoft’s reporting API to simplify embedding in Java-based web applications. There are tags such as `` to generate reports and `` to pass context parameters. The tag library also supports `

    `, ``, ``, and `
  10. Architect Web-Scale BI Applications With InetSoft’s Zero-Client Platform

    This overview explains how InetSoft’s StyleBI enables fully web-based BI applications accessible via any browser or mobile device. It highlights the zero-client deployment model, where no desktop install is required, only a web browser. The article emphasizes real-time data mashup, mobile compatibility, and low footprint in server environments. It discusses embedding BI functionality into web apps and portals for self-service analytics and reporting. There’s also a strong focus on integration readiness, role-based access, and embedding in enterprise web architectures.

  11. Access Servlet Repository And Session From Replet Code

    This section revisits the Web Report Interface API to illustrate how to access and manipulate servlet repository instances in report-generation code. It shows how replets (report units) can call `ServletRepository.getServlet()` to retrieve the servlet and then access its config or servlet context. Developers can read or modify configuration parameters at runtime for dynamic report behavior. This allows replets to adapt based on servlet parameters, session state, or web-environment metadata. The result is highly flexible, server-aware report scripting that’s aware of its web container.

  12. Deliver Reports To Web Browsers Through Server-Side API

    This article describes how the server report API allows InetSoft to host report components as server-side services accessible by any browser. All user interactions—filtering, paging, parameter inputs—are managed on the server, insulating clients from implementation complexity. The design abstracts away differences between environments like RMI, CORBA, or servlet containers. Developers can integrate reporting logic without needing to support UI state in each client. The architecture supports scalability and centralized management via enterprise components.

  13. Embed InetSoft Reporting In ASP.NET Web Applications

    This article explains how InetSoft’s entirely web-based reporting tools can be embedded within ASP.NET applications. It shows how the StyleBI platform can be integrated into .NET web projects using iframes and URL parameters for credentials or theme control. Developers can pass user IDs and passwords via hidden form fields to establish seamless single sign-on. Reports authored in InetSoft can run directly within ASP.NET portals without forcing a desktop client. The article also highlights the performance and agility benefits of using a Java-based web BI engine within a .NET web stack.

We will help you get started Contact us