Templates

Templates allow you to create complex, repeatable SVG elements in your Infographics.

For instance, we offer a vbarchart template that creates a bar-chart for a single point.

To use templates, create a basic SVG shape - such as a rect or circle - and add the class template plus the name of the template you'd like to use.

For example….

<rect x="10" y="10" width="50" height="300" class="template vbarchart"/>

The above SVG will replace the rectangle with an interactive, animated bar-chart component.

However, this isn't 100% complete, as parameters are missing.

Each template has optional parameters that control it. Some of these parameters are taken from the original element (ie. rect or circle), such as the x/y/width/height/cx/cy or radius.

Some are extra parameters specific to the template, such as paramprop which is the name of an ARDI property.

<rect x="10" y="10" width="50" height="300" class="template vbarchart" paramrop="Machine.Temperature" units="Deg C" label="Temperature" min="0" max="250"/>

See here for information about creating new templates.