Summary

The LiveChart is aimed to visualize real-time information in Niagara: point values, alarm count, synthesis count etc..

There are three different charts available:

  • Pie
  • SpiderWeb
  • Column
  • StackedColumn

 

    

 

 

Implementation

  • Drag & Drop one of the LiveChart from the palette.
  • Set the title of the chart. Ex: "Realtime power (kW)"
  • Set the number of LiveChartGroups to create with the action setGroupCount. Each LiveChartGroup represents a set of values (a color on the charts above). Ex: 1 for the real time power example above, 2 for the alarm distribution and for the Phase distribution.
  • Rename the LiveChartGroups. Ex: "LTD 1", "Alarm count"
  • Then set the number of inputs.  Ex: 4 for the realtime power, 3 for the phase distribution and 7 for the alarm distribution. The same number of inputs will be used for each LiveChartGroup. Connect your numerical data to the inputs
  • Fill-in the labels. There are as many labels as inputs. Please don't change the name of Labels, change only their values. Ex: "Level 1", "Phase A" or "Sunday"
  • Set the facets.

 

 Properties

  • ChartType: The chart type to display in the view:
  • Title: The title of the chart.
  • AdvancedConfig: The advanced config has two properties to set the format of the dataLabels and the tooltips in the chart. Be aware, each chart has its own  way to display data, see here. You can also enable the SFormat for these fields, but don't forget to escape chars from highcharts api (ex: [{]point.name[}]: [{]point.y[}]).
  • Facets: The facets to display in the chart. Only min, max, precision and units are managed.


Actions

  • setGroupCount: Set the number of LiveGroupCounts to create
  • setInputCount: Set the number inputs to create in the component for each LiveChartGroup. It will create as well an associated label for each input. Each label is shared across the LiveChartGroup. You can use SFormat inside a label.
  • overrideColor: By default, LiveChart uses the color from the general resources. This action allows you to override this color by adding a color property in liveChartGroups
  • removeOverrideColor: Remove the override color added by `overrideColor` action.

 

Theming

The LiveChart can be graphically personalized. There are two available themes already configured:

The background and foreground are personalized in the file: src/less/liveChart.less

Here is an example of the dark theme: