Niagara Totals Chart

  • Totals 6 Different Values
  • Easy-To-Configure
  • Drag n' Drop
  • Real-Time Updates
  • Works in Workbench and Modern Browser
Add to Cart
n4 charting


The totals chart allows you to add up values from up to 6 different objects. Each ord binds to a numeric point or numeric writable. 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 totalsChart-ux.jar 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.

Tridium charting library


bms totals chart properties

Each ord reference should be unique;

Main Chart Binding - set this to an absolute ord, e.g. station:|slot:/Drivers/NiagaraNetwork/AHU5 or relativised ORD e.g. slot:AHU5

Comparison Ords 1-5 - set this to an absolute ord, e.g. station:|slot:/Drivers/NiagaraNetwork/AHU5. Only absolute ords accepted here. A relativised ORD will not resolve for these fields.

Using in your HTML Page

You can now use the widget in your custom html page as long as the html file is in a appropriate station directory. E.g.:

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.min", // use jquery-3.2.0.min for versions higher than N4.4
                    "Promise": "/module/js/rc/bluebird/bluebird",

                    // these are runtime dependencies
                    "hbs": "/module/js/rc/require-handlebars-plugin/hbs",
                    "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/totalsChart/rc/'], function (app) {

                    backgroundColor: null,
                    barColors: '#8360b2, #9fc757, #4386d4, #b53937, #dcab10, #36b736',
                    barBorderColors: '#6d4b9b, #93bf40, #2a6ebb, #9c3230, #947538, #2f9d2f',
                    comparisonOrd1: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU1
                    comparisonOrd2: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU2
                    comparisonOrd3: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU3
                    comparisonOrd4: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU4
                    comparisonOrd5: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU5
                    comparisonOrd6: '',  // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU6
                    divId: '#widget1',
                    fontFamily: 'Arial',
                    innerCircleRadius: 56,
                    innerCircleColor: '#262626',
                    padding: '25,50,25,50',
                    symbol: 'Kw',
                    symbolFontSize: 16,
                    symbolFontColor: '#fff',
                    titleFontColor: '#fff',
                    titleFontSize: '16px',
                    title: 'Total',
                    valueFontSize: 34,
                    valueFontColor: '#fff',
        <!--html to go here-->
        <div id="widget1" style="width:300px;height:300px;"></div>
        <!--Rest of your html below...-->

You May Also Like

Energy Benchmark Chart

N4 View Builder™©

tridium bms system

Multiline Chart

tridium charting

back to more widgets...