Live Charts

This is an additional module which can be added to any presentation layer on request. It allows you to add charts to grids. The charts are dynamically linked to the data in the grid, so if the grid allows input, the chart will react accordingly.

The idea is to make it as simple as possible for the model authors.

Optionally you can also flag to have the chart pushed to the server, and placed in a generated document.

Simplest usage

Create a model with a grid. If the grid has a data pattern which matches one of the chart types (listed below), add a metadata flag to the grid in the model: live-chart-type:[type of chart] and that’s it.

All possible metadata flags

Flags must be placed on the individual grid, not the group

// Required
live-chart-type=??? // See "Data Patterns" below to help decide which chart type is applicable.

// Optional
live-chart-upload=true // Will cause the chart to be uploaded to the server.
live-chart-filename=filename; // The name that should be given to the uploaded file. No extension.
live-chart-template='name of template' // See "Templates" below.
live-chart-colors='Predefined color array or list of colors' // See "Colors" below.
live-chart-max-width=[100% | n unit ] // See "Sizes" below.
live-chart-min-width=[100% | n unit ] // See "Sizes" below.

Data Patterns

line / bar / horizontalbar / pie

These charts all require the following data pattern:

For example:

Of course you could have a model which produces a grid that doesn’t match this data pattern. That’s no issue, just contact us directly and we can make a plan.

Templates

Templates refer to the design used to display the chart in the UI. Currently there is only the ‘basic’, ‘auto-hide’ and ‘hidden’ templates. Basic looks like this:

It displays the chart directly beneath the grid and provides a toggle to show or hide the chart.

‘auto-hide’ is the same but chart is hidden to begin with.

‘hidden’ will not render anything on screen at all, however the chart will still be available for upload.

If an author specifies a template which doesn’t exist, it will default to basic.

As with the data patterns, templates can be created as required. Contact us directly for more information.

Colors

If no flag live-chart-colors has been given, the chart will be rendered with the default color array.

You can also specify a predefined range: reds, greens, blues or vivid.

For example: live-chart-colors=vivid

Predefined Color Arrays

Alternatively, you can provide your own color array as a | separated list.

For example: live-chart-colors=rgba(255,0,0,.8)|hsla(100deg,100%,50%,.5)|#0000FF

If you use a bar, horizontalbar or pie chart with only one dataset, i.e. a single column, the colors will cycle per datapoint (row), whereas given multiple columns, the colors will cycle per dataset (column).

Sizes

MAX

Given no metadata flag live-chart-max-width the chart will be max width 600px or 100% of the containing element if it’s <= 600px.

If the flag is set to 100%, the chart will take the full width of the container.

If the flag is set to 1000px the chart will try to take 1000px width, but not exceed the width of the container.

You can also provide any other CSS unit, e.g: 10rem or 300pt If you really want to…

MIN

Given no metadata flag live-chart-min-width the chart will be min width 200px regardless of the container’s available width. In the even that the container is <=200px, the chart will overflow resulting in a horizontal scroll bar.

If the flag is set to 1000px the chart will take at least 1000px width, regardless of the container’s available width.

You can also provide any other CSS unit, e.g: 10rem or 300pt If you really want to…

Uploading

In case one or more of the charts should also appear in a report, you can add the flag live-chart-upload=true

The chart will then be uploaded to the server upon navigation away from that node. If changes are made to the data later on, the file will be overwritten.

You should also specify a filename with live-chart-filename=filename - this name should match the image placeholder’s title/name property in the template.docx of your report.

Note about live-chart-filename:

If you only have one chart in the entire model, you can leave this flag out and the file will be named ‘chart’. Filenames are never with extension - it will automatically become filname.png

To add the chart image in the document:

• In the document template, add an appropriate placeholder image.
• Open the properties of that image and make sure the ‘Title / Name’ property is set to something meaningful, e.g. ‘quarterly-sales’

• Add the image as a Actions > Pict. fragment in the same node as the document is being generated.

• In the source view of the node, replace where it says <delete picture> with filename.png e.g. quarterly-sales.png

That’s it. Providing the user has gone passed the node with the grid and arrived at the document node, the generated document will replace the placeholder image with the latest chart.

Demo

Here’s a demo model where you can see a few configurations of charts in a model.

Download the model

And here’s a link to where you can see that model in action:

See it live