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);