Chart

Overview

The Chart element is designed to provide a modernized and customizable graph-based display to allow for easy visual evaluation of readings captured by the eGauge meter. The Chart element is optimized for mobile browsers and small screens, with a minimal amount of visual clutter compared to the original graph view. All screenshots in this guide are from mobile browsers.

Make sure to read the main NG interface page before continuing.

Contents:

Navigation

Configuration

Saving and Loading Chart Setups

Downloading Chart Data

 

Navigation

All displayed values are updated once per second. However, a slow or high-latency connection may result in slower updates.

image-1603727759849.png

The Chart element is composed of two parts:

Chart

The chart displays a graphical representation of recorded values, plotted over time. The time period to display can be selected using the "Time period..." dropdown menu in the top right corner of the page.

image-1603729903215.png

Chart Item List

The chart item list contains all chart items available for display in the chart.

image-1603730280426.png

To toggle a chart item on or off within the graph, click or tap the box to the left of the chart item name.

image-1603730015018.png

Chart item on

 

image-1603730032741.png

Chart item off

The chart item list also contains a summary value for that chart item. This value can be toggled between the following using the buttons at the bottom of the screen:

Average - Average value (eg, kW) of the chart item over the period selected in the graph.

Accrued - Cumulative value (eg, kWh) of the chart item over the period selected in the graph.

Now - Current value (eg, kW) of the chart item at the current time.

 

To view a graph of a specific chart item, tap or click on the chart item name. This will load a new graph containing only those values, along with some summary information at the bottom of the page.

image-1603730374465.png

To return to the main chart view, click the "View All" button in the top left of the page.

To compare the currently selected data against another set of data (eg, this week's data against the previous month), use the "Compare to..." dropdown menu in the top right corner of the page.

 

Configuration

By default, the Chart view will contain chart items displaying values obtained from the "Usage" and "Generation" virtual registers configured under Settings -> Installation (assuming these virtual registers are configured). However, most users will want to add additional chart items. 

Charts created in the Chart view cannot be opened in the Dashboard view (and vice versa).

Tap or click the "Add" button above the register list to add a new chart item.

image-1603730764687.png

Newly added chart items may take a few seconds to start displaying values. This is normal.

To edit an existing chart item, long press on that chart item in the chart item list.

This will open a window where a new chart item can be configured. There are three potential chart items which can be displayed:

Curve

Shaded Area

Ratio

 
Curve

A curve is simply a line generated from the values contained within a register in the eGauge's database. This is the most commonly used chart item. In this example, we'll graph the value of the Usage register (which records total site usage).

image-1603733277616.png

Name of item - name to display on the chart and chart item list. Completely arbitrary, but should make sense to the user.

Value to graph - register used to populate the chart item with data. In essence, the actual value used to generate the line.

Show accrued value - graphs a cumulative value instead of an average value. In essence, this displays a graph of the total value for a register. For most registers, this would be an ever increasing or decreasing line. When this option is selected, a new dropdown "Accrue since" will appear to select the start of recording for this register (eg, since start of hour, since start of day, and so on). Useful for measurements like pulse counts.

Flip sign of graphed value - unlike the original eGauge UI, the chart will graph negative values below the x-axis and positive values above the x-axis. To maintain the desired layout, it may be necessary to flip the polarity of one or more registers so they all graph above or below the x-axis.

Line style - allows the user to define a line color and/or line style (solid, dashed, dot-dash) for the chart item. The "Customize color" option can be selected to choose a specific color or enter a HEX code for the desired color.

image-1603731439996.png

 
Shaded area

A shaded area can be used to add emphasis to the chart. There are many uses here, but in this example we'll replicate the shading present in the "Usage" line on the original eGauge UI.

image-1603732634797.png

Name of item - name to display on the chart and register list. Completely arbitrary, but should make sense to the user.

Lower bound of area - the "bottom" of the shaded area. In this example we're using "zero", a function which returns 0.

Upper bound of area - the "top" of the shaded area. In this example we're using the value of the "Usage" register

Lower and upper bound can be used to highlight the range between two chart items. This relationship cannot be inverted (eg, shading will display if upper > lower but not if lower > upper). A second shaded area item is needed for this.

Reported register value - The value reported for the chart item in the chart item list below the chart. Can be left blank, or associated with a register value. In this case, we're using "Usage" since the value of the shaded area and the value of Usage are the same.

Line style - allows the user to define a line color and/or line style (solid, dashed, dot-dash) for the chart item. The "Customize color" option can be selected to choose a specific color or enter a HEX code for the desired color.

 

This is the result - note the red line for Usage, and the lighter red shaded area associated with that line.

image-1603732711155.png

 

Ratio

As its name suggests, the ratio chart item can be used to display the ratio between two values. These values can be obtained from registers, fixed numerical values, or a combination of the two. Unlike the other chart items, a ratio item will only appear in the list of chart items at the bottom of the page (nothing is displayed in the chart itself). In this example, we'll look at the ratio between total usage and electric heat usage.

image-1603733708295.png

Name of item - name to display on the chart and register list. Completely arbitrary, but should make sense to the user.

Numerator - "top" of the ratio equation. A ratio is simply A/B - this would be value A.

Denominator - "bottom" of the ratio equation. A ratio is simply A/B - this would be value B.

Flip sign of reported value - can be used to flip the sign/polarity of the resulting value if desired.

Ratio chart items always return a percentage. In the case of this example, we can say "the electric heating accounts for approximately 54% of the total electrical usage".

image-1603733898256.png

 

Saving and Loading Chart Setups

The layout of a chart (chart items, colors, line styles, data to display, etc) is referred to collectively as a "chart setup". Chart setups can be saved to the meter. This is beneficial, as it allows multiple layouts to be preserved and allows multiple users to select the layout they're interested in. For example, a building manager might want to see a general overview of the site, while a tenant might only be interested in their specific usage profile.

image-1603734159439.png

These functions are accessed using the menu in the top left corner of the page. Tap or click the menu, then tap or click "Chart" and select the desired function.

Save as device default - saves the current chart setup as the default chart setup to load when the page is accessed by any user. 

Restore device default - loads the default chart setup. Use caution here if your current chart setup hasn't been saved!

Name this setup - names and saves the current setup. Once at least one chart setup is saved, the "Manage setups" option will be available, and the different setups can be changed from the chart view itself.

Create empty setup - creates a new chart setup with no chart items. Use caution here if your current chart setup hasn't been saved!

Manage setups - Opens a new window where the user can rename or delete saved chart setups. Click "OK" to save changes, or cancel to discard changes.

image-1603734391656.png

 

Downloading Chart Data

Chart data can be downloaded for use in external processing or to create a backup or report. To do this, click or tap the menu icon in the top left corner of the graph, select "Chart", then select "Download chart data."

The resulting export will only contain values for Curve-type chart items. These values are paired with both a unix timestamp and standard date and time value for ease of processing. The values themselves are instantaneous values, and are automatically presented in the highest granularity available.

For more control over export data, it may be desirable to use the XML API

Chart data is not the same as a backup file. It cannot be restored to the eGauge meter in the event of data loss. For information on creating a backup file, see this article.