Figure 1 - A screenshot of the Data View 2D app running within a web browser.
Launch web app in new tab...

This application is a simple 2D chart that displays detailed hourly weather and/or analysis data across the year. Use the selector bar along the bottom to choose a particular date range, which controls the main chart above to show one or more data lines or area values over that range. This chart type is particularly useful for comparing the temporal behaviour of multiple metrics.

You can load in any EnergyPlus weather data file (EPW) as well as hourly, daily or monthly output files (CSV). Whilst the available metrics in each file are shown in a panel on the left-hand side of the main window, you can also select them from a sortable tabulated list by clicking the Select Display Metrics… button at the top of the panel.

CSV File Format

In addition to EnergyPlus data, you can also load a CSV file with your own data. The format is relatively simple, requiring a single header row with titles for each data column and then either 8760 (or 8784) rows for hourly data, 365 (or 366) rows for daily data or 12 rows for monthly data.

The first column is always assumed to be the date/time value for that row. This value is not actually read or processed in any way as there are so many different ways to represent dates and times, so each row is assumed to contain data for each incremental hour, day or month. The only limitation on its format is that it cannot contain any commas as that would be misinterpreted as multiple columns.

All subsequent columns must contain the numeric values for each of the metrics defined in the header row. To specify the units for each metric, format its title with the name first then the units enclosed by square brackets, as shown below:

Time,Temperature[°C],Humidity[%],WindSpeed[m/s]
00:00 01-01-2018,18.5,64.2,0.23
01/01/2018 01:00,18.7,65.3,0.75
Mon 1st Jan 2018,18.6,65.6,0.16
...

Comparing Data

You can display different metrics either all overlaid on top of each other or stacked vertically to directly compare their temporal behaviour. When stacked vertically, you can choose to display each metric in its own chart or to group metrics by their units type. To change the stacking, use the three icons or the Data Layout menu in the top toolbar.

Multiple metrics displayed separately.
Figure 2: Multiple metrics can be grouped by units or displayed separately.

Also, weather data files typically contain around 26 different metrics whilst EnergyPlus output files can sometimes contain more than a hundred. In order to more easily sort though and select the metrics you want to see, you can use the Select Display Metrics… button to show a sortable list of all the available data lines in the current file, as shown in Figure 3.

Listing the available metrics in a file.
Figure 3: The transition between daily summary and hourly values as the date range reduces.

You can click on any table header to sort the metrics by that field in either ascending or descending order. This is useful to group by units or for EnergyPlus output files that prefix metrics by zone name and type.

Zooming the Date Range

A year of hourly data contains at least 8760 values for each metric, so generating and rendering multiple metrics over the whole year can be a bit slow. Thus, by default, displayed data lines automatically transition between detailed hourly values and daily averages with min/max values depending on the current date range. This transition occurs when the date range is between 60 and 120 days, and can be set for each visible data line using the Fade to Daily Range toggle.

The displayed date range can be changed interactively using the selector at the very bottom of all the charts. This always shows the entire year with the currently selected range highlighted and bounded by two draggable handles. You can toggle the horizontal drag action in the metric charts between panning and zooming using the two icons or Data Layout menu in the top toolbar. Obviously panning only works when you are zoomed in, which you can do at any time using the scroll wheel or a pinch gesture.

Hourly values are shown for small date ranges.
Figure 4: The transition between daily summary and hourly values as the date range reduces.

When the drag action is set to zoom, a selection region is displayed as you drag to visually indicate the new date range. Dragging to the right will zoom in and is indicated by a blue selection region, as shown in Figure 5a. Dragging to the left will zoom out and is indicated by a red selection region.

Screenshot of interactive drag selection.
Figure 5a: Interactively selecting the date range.
Screenshot of the Date Range popup.
Figure 5b: Using the Select Date Range popup.

When you use either the scroll wheel or a pinch gesture to zoom in and out of the main chart, the new date range will be centered on the current pointer location. This way you can locate the pointer on the specific part of chart you wish to zoom and that area should stay roughly in the same position in the chart. This may not appear to be the case when you are zoomed in a lot as the chart always snaps to the nearest whole day range, however the scrolling calculation is fully linear so should survive the apparent jumpiness that may result.

Chart Settings

You can also edit the axis scales and displayed units for each metrics in the chart. This is done in the CHART VERTICAL AXIS popup where you can also adjust the vertical ticks and scaling.

Adjusting the vertical axis for each metric.
Figure 6a: The popup to use to set units and scales.
Adjusting padding at the edges of the chart.
Figure 6b: The popup to use to set edge padding.

List of Metrics

You can re-order items in the list of metrics down the left-hand side of the application window by simply clicking or tapping on one and then holding down for a short period until it turns light red. Then simply drag it into its new position. The order of metrics in this list determines the draw order of lines in the chart.

To identify or isolate a metric, click on any line in the chart or legend indicator down the right-hand side and it will highlight the specific data line. Click another line or in an empty area of the chart to remove the highlight. There is also a small button for this just to the right of Show in Chart toggle for each visible item in the metric list on the left-hand side.


Change Log

0.0.1 2018-06-08

  • Initial release.

Click here to comment on this page.