ARDI Documentation - display_list

3D Interactive Infographics

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

3D Interactive Infographics Although most examples are 2D visualisations, you can also create 3D interactive data displays as well. Using three.js, you can create three-dimensional visualisations such as 3D surfaces, Ribbon graphs and 3D bar charts.

Adding an Infographic

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Adding an Infographic You add an Infographic to the list by following the steps below... Create a new Folder in the Display List directory In your infographics directory, you can create a folder for every infographic you have. Note that while it's not required, we suggest avoiding spaces in your folder names.

Infographics Addon

anonymous@undisclosed.example.com (Anonymous) — Wed, 02 Sep 2026 22:41:18 +0000

Infographics Addon The Infographics addon allows you to add custom web displays to your ARDI system, using your combined ARDI data to create your own visualisations. These are made available on your ARDI website, and provide interactive, up-to-date and dynamic visualisations built from your data.

Articulation Points

anonymous@undisclosed.example.com (Anonymous) — Thu, 03 Sep 2026 00:08:35 +0000

Articulation Points SVG files aren't always very suited to building animated, articulated objects, because the 'transform' system used by SVGs - although powerful - isn't designed in a way that works well with rotating complex parts and joints. The SVGMarkup library - used when making

Creating Templates

anonymous@undisclosed.example.com (Anonymous) — Thu, 03 Sep 2026 06:17:45 +0000

Creating Templates Templates are defined in Javascript, through the templates dictionary. This can be defined in it's own JSON file along-side your other display files. The dictionary key is the unique code for the template (such as 'vbarchart' for a vertical bar-chart), followed by a string that contains the SVG text that will replace the parent object.

Display Page

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Display Page The Display Page shows you the content of the Infographic. The content of an infographic can vary wildly, but will usually have two consistent elements. [400] Heading The heading appears in the top-left corner of the page, showing you the name of the display you're looking at.

Embedding Infographics

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Embedding Infographics You can embed infographics into any web page, as long as the user has access to the ARDI server. Simply add &embed to the end of the pages URL, and it will adjust its behaviour to work well in an iframe element. You can copy the exact code you need to embed a Infographic with the

Infographic Folders

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Infographic Folders You usually don't want all of your Infogrphics appearing in one large list - it's confusing to the user and makes it hard for people to find the information they are looking for. The Infographics addon allows you to organise your graphics into

The Infographics Directory

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

The Infographics Directory The Infographics directory lives in your site folder. This will be in a different location depending on your platform. If you are trying to use the default site, your path will be... PlatformFolderWindowsc:\Program Files (x86)\Optrix\ardi\web\sites\default\displays

Marking Up SVGs

anonymous@undisclosed.example.com (Anonymous) — Thu, 03 Sep 2026 02:14:06 +0000

Marking Up SVGs 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.

Markup Examples

anonymous@undisclosed.example.com (Anonymous) — Thu, 03 Sep 2026 02:24:29 +0000

Markup Examples Below are some examples of SVG markup. Simple Text Indicator A simple piece of text that shows the current value of Machine Temperature. Coloured Text Indicator

Modifiers

anonymous@undisclosed.example.com (Anonymous) — Thu, 03 Sep 2026 02:13:17 +0000

Modifiers When creating marked-up SVGs, you can add modifiers to anywhere where you substitute the value of an ARDI property. This allows you to transform the value as its injected into your live display. Each modifier is added with the vertical bar '|' symbol and is applied in order from left-to-right.

Setting Up a Marked-Up Display

anonymous@undisclosed.example.com (Anonymous) — Thu, 03 Sep 2026 05:58:33 +0000

Setting Up a Marked-Up Display If you're making an SVG-based Infographic, your generate.js file will look like the one below. class ActiveReport extends MarkupReport { } If you'd like to add some code to handle data updates yourself (ie. performing analytics or manipulating data to make it more human-readable), you can add an

Templates

anonymous@undisclosed.example.com (Anonymous) — Thu, 03 Sep 2026 06:06:51 +0000

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

Doing More

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Doing More Position It's not just about process measurements - Infographics also allow you to show position in new ways, such as with 2D maps and site layout drawings. These are particularly useful when dealing with mobile equipment, or sensors spread out over large geographic areas.

Time Travel in Infographics

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Time Travel in Infographics Any infographic designed to display live data is also capable of time travel. You can use the controls provided in the top-right corner of the infographic to take the visualisation back to previous points in time. You can also playback events, fast-forward or view changes in slow motion.

Using Infographics

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Using Infographics The Infographics addon gives you access to a range of interactive, data-driven displays from your ARDI system. These displays can use live and historical data to analyse and visualise data in a way that is accessible from a huge range of devices and easy for people to understand.

Infographics Addon

anonymous@undisclosed.example.com (Anonymous) — Thu, 03 Sep 2026 05:57:41 +0000

Infographics Addon The Infographics addon gives users easy access to fully customisable web-powered, interactive, data-driven visualisations. These aren't limited to history - these can display, respond to and analyse live data as-it-happens, and show results in a wide variety of different ways.

Writing the Script - The Report Class

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Writing the Script - The Report Class From the previous page, we've seen that most of the work will be in filling-in the draw function. The function is passed an array of data, but we don't really know what any of it is and what we're supposed to do with it. Luckily, the

Writing the Script

anonymous@undisclosed.example.com (Anonymous) — Fri, 19 Dec 2025 00:01:27 +0000

Writing the Script Infographics are written in Javascript (or ECMAScript, for the pedantic among you). This is the language shared between all web-browsers, and when combined with the massive number of helpful libraries available online, it can be used to power a huge variety of data visualisations.

Writing the Script - Part 2

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Writing the Script - Part 2 Let's look at a bare-bones version of an Infographic. class ActiveReport extends SVGReport { initialise() { super.initialise(); }; create() { this.liveReport("'Temperature - Air' PROPERTY ALLPOINTS"); } update() { this.draw(report.livedata); } draw(data) { } }

Writing the Script - Part 4

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Writing the Script - Part 4 To get started with our draw function, we're going to need to... 1) Prepare our data 2) Create the axes for our graph, 3) Draw our bars ---------- Preparing Our Data First, we'll make our data simple. Currently, the data

Writing the Script - Part 5

anonymous@undisclosed.example.com (Anonymous) — Thu, 18 Dec 2025 22:50:17 +0000

Writing the Script - Part 5 That's enough to get a basic Infographic working. But with live data, there's an issue - we keep adding more content to the page every time we call draw. The simplest way to avoid this is by re-drawing the image every time. We could do this with the line