The VisualScript Cookbook

1/20 Page

This guide will walk you through everything you will want to know about VisualScript, its building blocks, and how to generate diagrams automatically from data that show hierarchy and relationships such as flowcharts, org charts, timelines, gauges, and more.

The VisualScript SDK

To transform your data into a visual, you'll use the VisualScript SDK. The SDK is available in JavaScript, Java and C#. This makes it easy to visualize data as flows, trees, timelines, and other designated formats without using coordinates.

This simple JavaScript is rendered as an org chart:

var vs = new VS.Document(); //Create a new VisualScript document
          var theShape= vs.GetTheShape();
          var myConnector=theShape.AddShapeConnector(VS.ShapeConnectorTypes.OrgChart);  //add the org chart connector to the top shape
          myConnector.AddShape(); //add the first shape to the connector
          myConnector.AddShape(); //add the second shape to the connector
          var vsJSON = vs.toJSON();   //Turn the VisualScript object constructed using the API into a JSON string
          vsCompleteCallback(vsJSON); //Pass the JSON string into the callback to trigger the creation of a document
        
VisualScript org chart

Just a few lines of code create a perfectly formatted hierarchy of three shapes.

What's Unique About VisualScript

What makes VisualScript so easy is that you can take advantage of powerful intelligent formatting. To create a diagram using VisualScript, you don't have to use a coordinate system to describe the explicit placement of shapes, instead you can leverage an intelligent rule-based formatting engine to simplify the format and reduce the work. VisualScript makes it easy to create a third-party tool or template that can quickly turn data into diagrams, automatically.

The following analogy is helpful in understanding the innovation that VisualScript represents.

We are all used to software that can take a set of XY data and plot a graph. Let's take for example a line graph made in Excel. To make the graph, you simply select two columns of data and request that Excel render a line graph. You don't specify the coordinates of each point on the line. You don't individually calculate the line between each point, or draw the axes separately, or define the pixels for numbers and text labels, and so forth. It would be no small feat to draw just a simple line graph if you had to calculate everything individually. Yet, about fifty years ago, that's exactly what you would have had to do to generate a graph on a computer using code. Today, we are completely used to the idea that to draw a graph, all we need to do is specify the type of graph we want and the data to plot and the software will draw it automatically. But this has never been the case for diagrams until VisualScript.

Temperature graph

In the very first VisualScript example we shared above, we specified that we wanted three shapes arranged in a hierarchy. The intelligent formatting engine did the rest.

Types of Diagrams You Can Generate with VisualScript

Now lets look at the equivalent of the "graph types" that VisualScript offers for automatically generating diagrams.

The VisualScript Markup Language (VSON)

The VisualScript SDK ultimately generates a description of a diagram in a special form of JSON called VSON. It is VSON that is passed to VisualScript's intelligent formatting engine to render the visual.

It is possible to hand code the VSON without using the SDK, but its not recommended. For completeness the specification of VSON is included in the VisualScripot documentation.

1/20 Page
By continuing to use the website, you consent to the use of cookies.   Read More