Adding Interactive Charts to Your Web Application

Learn about adding interactive charts to your Web application using InetSoft. Since 1996, InetSoft has been providing developers reporting and visualization tools. Some of the documentation for the charting API follows below.

View 2-min Dashboard Demo
Register for Pricing
#1 Ranking: Read how InetSoft was rated #1 for user adoption in G2's user survey-based index Read More

CategoricalTextureFrame.setTexture(val,texture)

Assigns a texture to the specified value.

Parameter

val
 a data value

shape
 a GTexture object

Example (Report)

Bind a point-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.setShapeField("Employee",Chart.STRING);
Graph1.bindingInfo.textureFrame =
   new CategoricalTextureFrame;
Graph1.bindingInfo.textureFrame.setTexture('Robert',
   GTexture.PATTERN_1);
Graph1.bindingInfo.textureFrame.setTexture('Eric',
   GTexture.PATTERN_1);
Graph1.bindingInfo.textureFrame.setTexture('Sue',
   GTexture.PATTERN_5);
Graph1.bindingInfo.textureFrame.setTexture('Annie',
   GTexture.PATTERN_5);

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");
textureframe = new CategoricalTextureFrame("State");
textureframe.setTexture('NJ',GTexture.PATTERN_18);
textureframe.setTexture('NY',GTexture.PATTERN_14);
elem.setTextureFrame(textureframe);
graph.addElement(elem);
view demo icon
View a 2-minute demonstration of InetSoft's easy, agile, and robust BI software.

ShapeFrame

A ShapeFrame object contains the shape style for visual chart objects. You can use a ShapeFrame object to represent data dimensions with shape (shape coding), or to apply a fixed (static) shape style.

Example (Report)

Bind a point-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.setShapeField("Total",Chart.NUMBER);
Graph1.bindingInfo.shapeFrame = new FillShapeFrame;

Example (Viewsheet or Report)

Bind a point-type chart to the sample 'All Sales' query, with 'Company' (top 5) on the X-axis, and Sum(Total) on the Y-axis.

importPackage(inetsoft.graph)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)
 
var frame = new StaticShapeFrame();
frame.setShape(GShape.ARROWBAR);
var elem = graph.getElement(0); // point elements
elem.setShapeFrame(frame);
Read the top 10 reasons for selecting InetSoft as your BI partner.

OvalShapeFrame

The OvalShapeFrame object contains the shape styles for oval elements of varying aspect ratio. To create a OvalShapeFrame object, call the OvalShapeFrame constructor.

importPackage(inetsoft.graph.aesthetic);
var frame = new OvalShapeFrame('Total');

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

Example (Report)

Bind a point-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.setShapeField("Total",Chart.NUMBER);
Graph1.bindingInfo.shapeFrame = new OvalShapeFrame();

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","Total"], ["NJ",200,30],
          ["NY",300,15],["PA",150,5]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var elem = new IntervalElement("State", "Quantity");
var frame = new OvalShapeFrame("Total");
elem.setShapeFrame(frame);
graph.addElement(elem);
view gallery
View live interactive examples in InetSoft's dashboard and visualization gallery.

Previous: Using InetSoft to Build Your Real-time Chart