Plotly Widgets for Niagara Framework

A picture is worth a thousand words, and, certainly when it comes to data, metrics and KPIs, nothing could be more apt. Without visual tools such as charts and graphs we would soon get lost in a sea of numbers being presented to us. With data collection and use continuing to increase exponentially, the need to visualize these data is becoming more important. Engineers seek to consolidate thousands of database records into beautiful charts and dashboards that humans can quickly and intuitively interpret.

Plotly JavaScript, also called plotly.js, is a high-level interactive plotting library that covers a wide range of statistical, financial, geographic, scientific, and 3-dimensional charts. Built on top of d3.js and, Plotly is widely used in business analytics and data science industries to create beautiful data visualizations. Every chart type has hundreds of customization options and almost every aspect of data visualizations can be modified. Plotly offers advanced charting capabilities which are used by leading data science and statistical companies. It allows engineers to put complex data analytics in the hands of business decision makers and operators. Plotly JavaScript is used as a foundation for Plotly libraries in Python, R and Julia – computer languages of choice for data analysts and scientists. It is also an integral part of Plotly Dash, a very popular framework for machine learning and artificial intelligence applications, which is used in research in computer vision, autonomous driving, natural language processing, advanced analytics and many other fields.

Tridium Niagara is a great platform to collect the data from heterogeneous sources and protocols. It includes a few chart types that are sufficient to do a basic visualization. However, when it comes to large amounts of data and more complex data presentation along with sophisticated dashboards, Plotly is superior by far. Now all Plotly charts are available for Niagara framework to present real-time and historical data gathered from HVAC controllers, energy meters, EV chargers and smart sensors.

There are more than 40 unique chart types, starting from well-knows pie and bar charts to less common ones, like heatmap, Sankey and sunburst.

Plotly chart types

Every Plotly chart is designed to look beautiful out of the box and can be configured using just two or three attributes. However, one size does not fit all and it could be important to follow client’s design guidelines or establish company unique look & feel. So every aspect of a chart can by customized. For example, scatter plot has 220 unique attributes defining how it looks. And that is not counting more than 1000 (yes, thousand) attributes controlling general chart aspects, like margins, fonts, colors, menu buttons, element orientation and positioning, hovertips, data formating etc. Almost all these attributes are accessible using native Niagara editors, for example ‘colorscale’ can be set using Niagara gradient point & click editor.

Given the sheer volume of options to tailor, it is very important to understand what they are for, without looking at help file. That is why we display attribute description in PX Editor, so an engineer can easily navigate them, quickly find needed attributes and specify their values. Plotly field editor

Plotly charts are fed the data from Niagara station using bindings. Value binding allows to retrieve real-time data from Niagara components and properties, like numeric control points. History binding retrieves data from Niagara histories. Engineer can specify any time range (today, yesterday, last week, 01-06-2021 to 15-06-2021 etc.) and apply data rollup to calculate minumum, maximum, average, first or last values for time period. All these data series can then be shown on appropriate Plotly charts.

Plotly charts are interactive. Users can use mouse and a toolbar buttons to zoom, pan and rotate charts, select time series range, export image and even send chart configuration to Plotly Chart Studio, which is a free online tool for configuration and experiments with Plotly charts. It is also a huge library of charts prepared by Plotly community – a good place to start looking for inspiration.

Please take a look at some of widget examples you can create on your Niagara systems using Plotly widgets.

Additional information