InetSoft offers both a free and a commmercial server-based Web graph generator. View a demo and try them out for free.
Style Intelligence is a commercial business intelligence software package for enterprise graphing and real-time access to almost any data source. This software is also well-suited for developers to embed into other applications, on-premise or SaaS-based.
![]() |
View a 2-minute demo of InetSoft's easy, agile, and robust BI software. |
The CategoricalShapeFrame object contains a shape style for visual chart objects, rendering a unique shape for each discrete value. To create a CategoricalShapeFrame object, call the CategoricalShapeFrame constructor.
importPackage(inetsoft.graph.aesthetic); var frame = new CategoricalShapeFrame('State');
You can pass the name of a field (e.g., 'State') 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("Employee",Chart.STRING); Graph1.bindingInfo.shapeFrame = new CategoricalShapeFrame;
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","Rep"], ["NJ",200,"John"], ["NY",300,"Sue"], ["PA",75,"Sue"], ["CT", 120,"John"]]; dataset = new DefaultDataSet(arr); graph = new EGraph(); var elem = new PointElement("State", "Quantity") var frame = new CategoricalShapeFrame("Rep"); elem.setShapeFrame(frame); graph.addElement(elem);
Assigns a shape to the specified value.
Parameter
val data value shape GShape or GShape.ImageShape 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.shapeFrame = new CategoricalShapeFrame; Graph1.bindingInfo.shapeFrame.setShape('Robert', GShape.FILLED_CIRCLE); Graph1.bindingInfo.shapeFrame.setShape('Sue', GShape.FILLED_DIAMOND);
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 PointElement("State", "Quantity"); sizeframe = new StaticSizeFrame("State"); sizeframe.setSize(10); shapeframe = new CategoricalShapeFrame("State"); shapeframe.setShape('NJ',GShape.FILLED_CIRCLE); shapeframe.setShape('NY',GShape.FILLED_DIAMOND); elem.setShapeFrame(shapeframe); elem.setSizeFrame(sizeframe); graph.addElement(elem);
The StaticShapeFrame object contains a shape frame defined by explicit shape data in the VisualFrame.setField(field) column, or by the fixed shape in StaticShapeFrame.setShape(shape). To create a StaticShapeFrame object, call the StaticShapeFrame constructor.
importPackage(inetsoft.graph.aesthetic); var frame = new StaticShapeFrame('GShape.CIRCLE');
You can pass a GShape object (e.g., 'GShape.CIRCLE') or a field name (e.g., 'Shape') to the constructor, or specify this later using the StaticShapeFrame.setShape(shape) or 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("Company",Chart.STRING); Graph1.bindingInfo.shapeFrame = new StaticShapeFrame; Graph1.bindingInfo.shapeFrame.setShape(GShape.ARROWBAR);
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","Shape"], ["NJ",200,"STAR"], ["NY",300,"CIRCLE"]]; dataset = new DefaultDataSet(arr); graph = new EGraph(); var elem = new PointElement("State", "Quantity"); var sizeframe = new StaticSizeFrame(5); var shapeframe = new StaticShapeFrame(); shapeframe.setField("Shape"); elem.setShapeFrame(shapeframe); elem.setSizeFrame(sizeframe); graph.addElement(elem);
Specifies the static shape for graphical elements. If the data in the column assigned to the inherited VisualFrame.setField(field) property are shape names, these data values are used instead of StaticShapeFrame.shape.
Parameter
shape a GShape or GShape.ImageShape 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("Company",Chart.STRING); Graph1.bindingInfo.shapeFrame = new StaticShapeFrame; Graph1.bindingInfo.shapeFrame.setShape(GShape.ARROWBAR);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 frame = new StaticShapeFrame(); var elem = new PointElement("State", "Quantity"); frame.setShape(GShape.CROSS); elem.setShapeFrame(frame); graph.addElement(elem);
Specifies the columns containing the shape specifications for the graphical elements.
Parameter/Type
arr Array of Strings
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, 6,3,4], ["NY", 300,8,2,5]]; 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 why choosing InetSoft's cloud-flexible BI provides advantages over other BI options. |
Previous: Web Based Charts and Graphs |
Next: Advanced Web Charts
|