Niagara Energy Benchmark Chart


  • Show Energy Meter Value Benchmark Comparison
  • Updates in Real-Time
  • Uses BQL Query to Collate History Data
  • Modify to Your Style
  • Works in Workbench and Modern Browser
Add to Cart
n4 charting

Overview


The Niagara energy benchmark chart retrieves energy meter histories and presents them on a comparison chart. The chart should be bound to a numeric point or numeric writable. It updates in real-time and uses bql queries to collate the data. Set the daily benchmark values in the charts configuration. 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.

Usage


1. Copy the energyBenchmarkChart-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


Properties


bms energy chart

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.

Ords:
Main Chart Binding
Set this to an absolute ord, e.g.
station:|slot:/Drivers/NiagaraNetwork/AHU5 or relativized ORD e.g.
slot:AHU5
The ord should point to a numeric point/writable that has a numeric interval extension.
OR
You can reference a history ord directly e.g.
history:/demoStation/AHU5

Daily Benchmarks:
These are the values that your site is aiming for. It is a comma delimited string with 7 values, and starts from Sunday. You can also point to a string point which contains these values. Set the dailyBenchmarksOrd property instead.

Default Period:
When the chart loads up, it will display a specified period. Options are (case-sensitive):
today
yesterday
weekToDate
lastWeek

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



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.:
C:/../station/shared/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",

                    "Handlebars": "/module/js/rc/handlebars/handlebars.min-v4.0.6",
                    "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>
        <script type="text/javascript" src="/module/js/com/tridium/js/ext/require/require.min.js"></script>
        <script>
            require(['/module/energyBenchmarkChart/rc/energyBenchmarkChartWidget.run.js'], function (app) {

                app.initialiseEnergyBenchmarkChart({
                    actualBarColor: 'rgb(0, 158, 251)',
                    backgroundColor: '#263238',
                    benchmarkBarColor: 'rgb(85, 206, 99)',
                    borderColor: '#3e4e56',
                    chartType: 'bar', // bar, horizontalBar, pie, doughnut
                    defaultPeriod: 'weekToDate',
                    dailyBenchmarks: '20,160,140,120,100,80,40', // Starts from sunday
                    dataLoadDelay: 1000, // in milliseconds
                    divId: '#widget1',
                    fontFamily: 'Poppins, sans-serif', // Web fonts, e.g. arial, sans-serif
                    labels: 'Actual,Benchmark',
                    labelFontSize: 12,
                    labelFontColor: '#56595b',
                    ord: 'station:|slot:/Drivers/NiagaraNetwork/Boardroom',  // only absolute ord allowed
                    precision: 2,
                    refreshInterval: 60000, // in milliseconds
                    selectBorderColor: '#d9d9d9',
                    showChartBackgroudStyle: 'true',
                    showDemoData: 'false',
                    titleFontColor: '#ffffff',
                    titleFontSize: '18px',
                    titleFontWeight: '400',
                    title: 'Chart 1',
                    weekdays: 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday',
                    yAxisLabel: 'Kwh',
                    dailyBenchmarksOrd: '', // set this to string ord. should be comma deliminated string e.g. 20,160,140,120,100,80,40
                });
            });
        </script>
        </head>
        <!--html to go here-->
        <div id="widget1" style="width:300px;height:300px;"></div>
        <!--Rest of your html below...-->
                                    

You May Also Like





Totals Chart

N4 View Builder™©

tridium bms system

Multiline Chart

tridium charting

back to more widgets...