Niagara Multiline Chart

Niagara Multiline Chart Click above for Demo...


The multiline chart plots up to 3 lines and 2 static lines on a chart for analysis. Ords should be bound to histories with similar time frames for advanced comparison. The 2 static lines are set values you can use for comparison, e.g. Hi and Lo. In total, 5 lines can be plotted. It updates in real-time and uses bql queries to collate the data. The chart has a number of configurable properties that can be used to modify look, feel, and functionality. Also check out the Energy View Template.


1. Copy the multiLineChart-ux file to your modules directory.
2. Open the module from your palette file.
3. Drag and drop the widget from the palette onto your px view.

Niagara Multiline Chart

Widget Properties


The widget has a number of configurable properties that can be used to modify look, feel, and functionality.

Changing Widget Properties - most properties are self-explanatory but some require some explaining.

Date Format


  • dddd h:mmtt d MMM yyyy = Friday 9:49am 19 Jan 2018
  • M/d/y = 1/19/2018
  • HH:mm:ss = 09:49:29
  • hh:mm:ss TT = 09:49:39 AM
  • yy/M/d = 18/1/19
  • ddd MMM d \a\t h:mm TT = Fri Jan 19 at 9:49 AM

Label to show for each line. If the degrees symbol needs to be used, use:


Widget Ords:
Set upto 3 ord values. Each collection should have the same time frame. E.g. history taken every 15 minutes. Set this to an absolute ord, e.g.
station:|slot:/Drivers/NiagaraNetwork/AHU5 or relativized ORD e.g.
The ord should point to a numeric point/writable that has a numeric interval extension or numeric change of value history extension.
You can reference a history ord directly e.g.

BQL 1,2,3:

Example 1: |bql:select timestamp,value as 'Kw' order by timestamp DESC
Example 2: ?period=weekToDate|bql:select timestamp, value order by timestamp DESC

Point Radius:
Set this to 0 if you don't want points shown on the chart.

Refresh Interval:
How often the chart data should refresh. In milliseconds.

Show Ord on Right Axis:
Set values to true or false so the values show on the right axis of the chart.

Line Tension:
Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used. Possible values from 0-1.

Cubic Interpolation Mode:
Algorithm used to interpolate a smooth curve from the discrete data points. Possible values are 'default' or 'monotone'.

Maximum number of records to plot.

Max Ticks Limit:
Maximum number of ticks and gridlines to show. Use in conjunction limit property.

Maintain Aspect Ration:
Set to true or false so the chart maintains aspect ratio. Use in conjuction with Chart Padding property.

Chart Padding:
Default is '5,5,5,5', // top, right, bottom, left. Use in conjuction with maintainAspectRatio property.

Static Lines:
Add up to 2 static lines. Change the following properties as required:
staticLineColor1, staticLineColor2
staticDataValue1: numeric value
staticDataValue2: numeric value
staticDataLabel1: Label to show on chart
staticDataLabel1: Label to show on chart

Using in your HTML Page

You can use the widget in your custom html page as long as the html file is in a appropriate station directory.
E.g. C:/../stationName/shared/webfiles/demo1.html

1. Create an html page and place in your station files directory.
2. Create a div element and give it an id so you can inject the widget into this area. E.g.: widget1.
3. Add the following scripts before the closing head tag or the closing body tag. E.g.:

<script type="text/javascript">

    var require = {
        paths: {
            "nmodule": "/module",
            "baja": "/module/bajaScript/rc/plugin/baja",
            "bajaScript": "/module/bajaScript/rc",
            "bajaux": "/module/bajaux/rc",
            "lex": "/module/js/rc/lex/lexplugin",
            "css": "/module/js/com/tridium/js/ext/require/css",

            "jquery": "/module/js/rc/jquery/jquery-2.1.1",  // For N4.4 or higher use /module/js/rc/jquery/jquery-3.2.0.min
            "Promise": "/module/js/rc/bluebird/bluebird",

            // these are runtime dependencies
            "hbs": "/module/js/rc/require-handlebars-plugin/hbs", // For N4.4 or higher use /module/js/rc/handlebars/handlebars.min-v4.0.6
            "i18nprecompile": "/module/js/rc/require-handlebars-plugin/hbs/i18nprecompile",
            "json2": "/module/js/rc/require-handlebars-plugin/hbs/json2",
            "underscore": "/module/js/rc/underscore/underscore",

        hbs: {
            disableI18n: true
<script type="text/javascript"
require(['/module/multiLineChart/rc/'], function (app) {

        backgroundColor: '#263238',
        borderColor: '#3e4e56',
        chartPadding: '5,5,5,5', //  top, right, bottom, left
        color1: '#7460ee',
        color2: '#f3f5f6',
        color3: '#009efb',
        cubicInterpolationMode: 'default', // default or monotone
        dataDirection: 'left', // right or left
        dataLoadDelay: 1000, // in milliseconds
        dateFormat: 'd/M/yy H:mm', // see help for more examples
        divId: '#widget1',
        fontFamily: 'Poppins, sans-serif', // Web fonts, e.g. arial, sans-serif
        labels: 'Kw,Kwh,&#176;C', //&#176; is the degrees symbol
        labelFontSize: 12,
        labelFontColor: '#56595b',
        lineTension: 0.4,
        maintainAspectRatio: 'true',
        maxTicksLimit: 11, // maximum number of ticks and gridlines to show
        ord1: 'history:/demoStation/AHU1?period=weekToDate|bql:select timestamp, value order by timestamp DESC', // use absolute ord for html
        ord2: 'history:/demoStation/Boardroom?period=weekToDate|bql:select timestamp, value order by timestamp ASC',
        ord3: 'history:/demoStation/Temp?period=weekToDate|bql:select timestamp, value order by timestamp DESC',
        pointRadius: 4, // set to 0 to hide points
        precision: 2,
        refreshInterval: 60000, // in milliseconds
        selectBorderColor: '#d9d9d9',
        showChartBackgroudStyle: 'true',
        showGridLines: 'false',
        showOrd1OnRightAxis: 'false',
        showOrd2OnRightAxis: 'false',
        showOrd3OnRightAxis: 'true',
        staticLineColor1: '#28a745',
        staticLineColor2: '#007bff',
        staticDataValue1: '', // numeric value
        staticDataValue2: '', // numeric value
        staticDataLabel1: '', // label to show on chart
        staticDataLabel2: '', // label to show on chart
        titleFontColor: '#ffffff',
        titleFontSize: '18px',
        titleFontWeight: '400',
        title: 'Chart 1',
        xAxisLabel: 'Time'
         <div id="widget1" style="width:500px;height:400px;"></div>
                        <!--Rest of your html below-->


Widgets and drivers must be licensed with us. Licenses are bound to the stations host Id. You will be provided access to the Software and Licensing Portal where you can manage your own licenses. Here you can add, update, or delete licenses as needed.

There are few ways to get a license file:

1. Add our licensing module to your station services. This module automatically retrieves the license from our servers and saves it to your stations shared folder directory.

2. Alternatively, Login to the Software and Licensing Portal (link provided in Order Confirmation) and add your host id's as needed. Copy the license file to the stations shared directory.

Finally, make sure the station user has access to WLicenseService in the user management and category service section.

Niagara Licensing

Niagara Dashboard

Niagara IOT technologies and modern toolsets allow you to build a powerful Niagara dashboard which is real time, data-driven, and cost effective. Our widgets are purpose-built by providing information with faster communication through real-time, data-driven, dashboards for web, desktop and mobile devices. You can now create a cutting-edge display of conventional HVAC system graphics, Dashboards, Alarms & Scheduling, Historical Data, and Analytics.

You May Also Like

Energy Benchmark Chart

Totals Chart

Comparison Charts

back to more widgets...