While the previous section has you building an SVG file from code, in some cases you'd like to take an existing SVG document and make it 'live' - creating diagrams that respond to data.

We provide the Live SVG library to help with these scenarios.

Create an SVG file called report.svg and place it in your infographic folder, along with svgmarkup.js.

In your SVG file, find any object you would like to modify in response to live data. For example, a text object you'd like to show the current machine temperature.

In the XML of the text object, add an attribute named 'ardi' followed by the name of the value you want to change. In this case, we want to change the 'text' of the element, so we use 'arditext'. You could also use 'ardifill', 'ardistroke', 'ardiopacity', 'arditransform' etc.

The attributes value should be the value you'd like to write to the base attribute (ie. the text, transform, opacity). You can add an ARDI property name in curly braces, and the value of the ARDI property will be substituted.

For example…

<text x="10" y="10" fill="black" arditext="{Machine.Temperature} Deg C">Temperature</text>

Note that this is assumed to be a string substitution. This allows you to do the same thing with transforms, such as…

<rect x="0" y="0" width="50" height="50" arditransform="translate({Machine.Temperature} 0)"/>

If you'd like to add computation, use square brackets around the whole expression. If the temperature was 20.5 degrees C, A value {Machine Temperature} * 2 will result in a string value of '20.5 * 2'. A value [{Machine Temperature} * 2] will result in a value of 41.

<rect x="0" y="0" width="50" height="[{Machine.Temperature} * 50]" arditransform="translate({Machine.Temperature} 0)"/>

You can also add modifiers to attributes to tweak them.

Modifiers are added with the '|' symbol. A simple number after the bar will round the resulting value to that many decimal places. {Machine.Temperature|2} will limit it to two decimal places.

The '@colour' modifier will get the appropriate ARDI colour for the value.

<rect x="10" y="10" width="200" height="50" fill="white" ardifill="{Machine.Running|@colour}"/>

The '@text' modifier will get the appropriate ARDI text for a discrete value (such as a machine or valve status.

<rect x="10" y="10" width="200" height="50" fill="white" ardifill="{Machine.Running|@colour}"/>
<text x="10" y="10" width="200" height="50" fill="white" arditext="{Machine.Running|@text}"/>

See the section of modifiers for more details.

.See how to set up your marked-up display.