InetSoft Technology: Advanced Web Charting Tools

Use InetSoft's software for making advanced web charts. Since 1996, InetSoft has been providing developers free and commercial reporting and charting tools. View a demo and try them for free.

Style Intelligence is a commercial business intelligence software package with web-based charting, reporting, and real-time access to almost any data source.

MultiShapeFrame.setScales(arr)

Specifies the scales to be used for each shape field.

Parameter

arr
 Array of Scale

Example (Report or Viewsheet)

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)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)
 
var arr = [["State", "Quantity", "m1", "m2", "m3"],
           ["NJ", 200, 50,50,5], ["NY", 300,20,30,50]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var frame = new StarShapeFrame();
var elem = new PointElement("State", "Quantity");
var yscale = new LinearScale("Quantity");
yscale.setMax(500);
frame.setFields(["m1", "m2", "m3"]);
var scale1 = new LinearScale("m1");
var scale2 = new LinearScale("m2");
var scale3 = new LinearScale("m3");
scale1.setMax(10);
scale2.setMax(10);
scale3.setMax(10);
frame.setScales([scale1, scale2, scale3]);
elem.setShapeFrame(frame);
graph.setScale("Quantity",yscale)
graph.addElement(elem);

View a 2-minute demonstration of InetSoft's easy, agile, and robust BI software.

VineShapeFrame

The VineShapeFrame object contains the shape styles for three-dimensional “vine” elements. To create a VineShapeFrame object, call the VineShapeFrame constructor.

var range = new VineShapeFrame("m1","m2","m3");

You can pass a set of field names (e.g., 'm1', 'm2', 'm3') to the constructor, or specify this later using the inherited MultiShapeFrame.setFields(arr) property. The dimensions are specified in the following order: [angle, magnitude, radius].

• Angle: The angle of the stem line

• Magnitude: The length of the stem line

• Radius: The radius of the circle

VineShapeFrame.setEndAngle(value)

The angle to which the maximum angle in the data is mapped.

(Note that the max property of any applied scale also affects the displayed angle.)

Parameter

value
 the angle in degrees

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", "m1", "m2", "m3"],
           ["NJ", 200,90,25,50],
           ["NY", 300,30,15,15]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var elem = new PointElement("State", "Quantity");
var frame = new VineShapeFrame();
var mscale = new LinearScale();
var rscale = new LinearScale();
mscale.setMin(0);
mscale.setMax(5);
rscale.setMin(0);
rscale.setMax(90);
frame.setScales([rscale, mscale, mscale]);
frame.setFields(["m1", "m2", "m3"]);
frame.setStartAngle(0);
frame.setEndAngle(90);
elem.setShapeFrame(frame);
graph.addElement(elem);

VineShapeFrame.setStartAngle(value)

The angle to which the minimum angle in the data is mapped. (Note that the min property of any applied scale also affects the displayed angle.)

Parameter

value
 the angle in degrees

Example (Report or Viewsheet)

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)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)
 
var arr = [["State", "Quantity", "m1", "m2", "m3"],
           ["NJ", 200,90,25,50],
           ["NY", 300,30,15,15]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var elem = new PointElement("State", "Quantity");
var frame = new VineShapeFrame();
var mscale = new LinearScale();
var rscale = new LinearScale();
mscale.setMin(0);
mscale.setMax(5);
rscale.setMin(0);
rscale.setMax(90);
frame.setScales([rscale, mscale, mscale]);
frame.setFields(["m1", "m2", "m3"]);
frame.setStartAngle(0);
frame.setEndAngle(90);
elem.setShapeFrame(frame);
graph.addElement(elem);

ThermoShapeFrame

The ThermoShapeFrame object contains the shape styles for two-dimensional “thermometer” elements. To create a ThermoShapeFrame object, call the ThermoShapeFrame constructor.

var range = new ThermoShapeFrame("Height", "Weight");

You can pass a pair of field names (e.g., 'Height', 'Weight') to the constructor, or specify this later using the inherited MultiShapeFrame.setFields(arr) property. The dimensions are specified in the order [level, width].

Example (Report or Viewsheet)

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)
importPackage(inetsoft.graph.element)
importPackage(inetsoft.graph.scale)
importPackage(inetsoft.graph.aesthetic)
importPackage(inetsoft.graph.data)
 
var arr = [["State", "Quantity","Height","Weight"],
           ["NJ", 200,50,1], ["NY", 300,30,4]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var frame = new ThermoShapeFrame();
var elem = new PointElement("State", "Quantity");
var hscale = new LinearScale()
var wscale = new LinearScale()
hscale.setMin(0);
hscale.setMax(100);
wscale.setMin(0);
wscale.setMax(5);
frame.setFields(["Height", "Weight"]);
frame.setScales([hscale, wscale]);
elem.setShapeFrame(frame);
graph.addElement(elem);

StarShapeFrame

The StarShapeFrame object contains the shape styles for multi-dimensional “star” (closed line) elements. To create a StarShapeFrame object, call the StarShapeFrame constructor.

var range = new StarShapeFrame("m1","m2","m3");

You can pass a set of field names (e.g., 'm1', 'm2', 'm3') to the constructor, or specify this later using the inherited MultiShapeFrame.setFields(arr) 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","m1","m2","m3"],
           ["NJ", 200,5,1,3], ["NY", 300,3,4,4]];
dataset = new DefaultDataSet(arr);
graph = new EGraph();
var frame = new StarShapeFrame();
var elem = new PointElement("State", "Quantity");
frame.setFields(["m1","m2","m3"]);
elem.setShapeFrame(frame);
graph.addElement(elem);

Read how InetSoft was rated #3 for implementation in G2 Crowd's user survey-based index.

Previous: Server-Based Web Graph Generator

Next: Chart Generator