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
Add to Cart
n4 charting

Overview


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.

Usage


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.

Tridium charting library


Properties


bms totals chart properties

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:

  • plus
  • cross
  • dash
  • cross-dash
  • dot
  • dot-dash
  • disc
  • ring
  • line
  • line-vertical
  • weave
  • zigzag
  • zigzag-vertical
  • diagonal
  • diagonal-right-left
  • square
  • box
  • triangle
  • triangle-inverted
  • diamond
  • diamond-box

Pattern

Pattern Demo





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",
                    "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...-->
                                    

You May Also Like





Energy Benchmark Chart

N4 View Builder™©

tridium bms system

Multiline Chart

tridium charting

back to more widgets...