Niagara Comparison Charts
- Compares up to 8 Different Values
- Choose from 7 Chart Types
- Add pattern
- Drag n' Drop
- Real-Time Updates
- Works in Workbench and Modern Browser
The comparison chart allows you to compare up to 8 values. Each comparison 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. You can also add add a pattern option. Before you start, copy the comparisonChart-ux.jar module file to your modules directory. Restart station and Workbench. Also check out View Builder.
Are you looking for a cost effective way to manage and visualize data for all your customers? Why not have a look at View Builder?
Before you start. Download the modules from our portal (see your order confirmation, which also explains licensing). Copy the modules file to your modules directory. Restart BOTH station and Workbench.
1. Copy the comparisonChart-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.
The chart has a number of configurable properties that can be used to modify look, feel, and functionality. Change the properties as required:
Ords:
Each ord reference should be unique;
Main Chart Binding - set this to an absolute ord, e.g. station:|slot:/Drivers/NiagaraNetwork/AHU5 or relativized ORD e.g. slot:AHU5
Comparison Ords 1-7 - set this to an absolute ord, e.g. station:|slot:/Drivers/NiagaraNetwork/AHU5. Only absolute ords accepted here. A relativized ORD will not resolve for these fields.
Label Override
Optional: a comma delimited label array. e.g. Comp1, Comp2, Comp3, Comp4, Comp 5, Comp6. Number of elements should equal number of ords set.
Chart Type
Change the chart type:
bar
horizontalBar
polarArea
radar
doughnut
line
pie
Patterns:
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",
"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>
<script type="text/javascript"
src="/module/js/com/tridium/js/ext/require/require.min.js"></script>
<script>
require(['/module/comparisonChart/rc/comparisonChartWidget.run.js'], function (app) {
app.initialiseComparisonChart({
backgroundColor: '#3D3D3D',
barColors: 'rgba(255, 99, 132, 0.2)|rgba(54, 162, 235, 0.2)|rgba(255, 206, 86, 0.2)|rgba(75, 192, 192, 0.2)|rgba(153, 102, 255, 0.2)|rgba(255, 159, 64, 0.2)',
barBorderColors: 'rgba(255, 99, 132, 1)|rgba(54, 162, 235, 1)|rgba(255, 206, 86, 1)|rgba(75, 192, 192, 1)|rgba(153, 102, 255, 1)|rgba(255, 159, 64, 1)',
borderColor: '#727272',
barBorderSize: 1,
charType: 'horizontalBar',
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
comparisonOrd7: '', // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU5
comparisonOrd8: '', // only absolute ords accepted. e.g. station:|slot:/Drivers/NiagaraNetwork/AHU6
divId: 'widget1',
labelFontSize: 14,
labelFontColor: '#CCCCCC',
labelOverride: '', // a comma delimited label array. e.g. Comp1, Comp2, Comp3, Comp4, Comp 5, Comp6. Number of elements should equal number of ords set.
borderThickness: 3,
padding: '50,100,50,100',
divId: '#widget1',
showTooltips: 'true',
showValueOnChart: 'false',
titleFontColor: '#CCCCCC',
titleFontFamily: 'Arial',
titleFontSize: '16px',
titleFontWeight: 'normal',
titleXOffset: 20,
titleYOffset: 20,
title: 'Chart 1',
valueFontColor: '#ffffff',
valueFontSize: 16,
valueOnChartAlignment: 'center', // possible values: center, start, or end
xTickStepSize: null,
yTickStepSize: null,
xBeginZero: true,
yBeginZero: true
});
});
</script>
</head>
<!--html to go here-->
<div id="widget1" style="width:300px;height:300px;"></div>
<!--Rest of your html below...-->
Build Your Own dashboards and win Projects by showing data that increase value and reduces expenditure.
