Loading - please wait...

This page requires a reasonably modern HTML5 browser
with both Javascript and SVG support.

If this message is not soon replaced by an interactive chart/graph,
then it is likely that your browser does not support this web app.
Check your JavaScript Console for specific error messages.

DISPLAY DATA
Name:
Region:
Country:
WMO:
Geographic Location
Latitude:
Longitude:
Timezone:
Elevation:

Range: to
Display
Data Color
Line Opacity:
Fill Opacity:

Edit Color

SELECT DATE RANGE


Ordinal day of the year:

Ordinal day of the year:

CHART VERTICAL AXIS

Metric Scale to Edit


Units Prefix/Modifier

Use a modifier to make axis values easier to read by reducing the size of very large numbers. Many EnergyPlus results are given in straight Joules or Watts, so some scale ranges can be more than 20 digits long. Applying a modifier does not change the resolution or raw data in any way, it simply applies additional numeric scaling factor.

CHART PADDING

INFORMATION

Overview

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 EnergyPlus 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/8784 rows for hourly data, 365/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 will 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
...

Interesting Features

The following are some of this app's more interesting features:

  • You can re-order items in the list of metrics down the left-hand side 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 the list determines the draw order of lines in the chart.
  • You can display data lines either all overlaid on top of each other or stacked vertically to directly compare their temporal behaviour. To change the stacking, use the three icons or Data Layout menu in the top toolbar.
  • As each year contains at least 8760 data points, generating and rendering multiple metrics over the whole year can be a bit slow. Thus, by default, data lines automatically transition between detailed hourly values and daily min/max range 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.
  • 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.
  • You can toggle the horizontal drag action in the main chart 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, or by dragging the selector bar along the bottom.
  • 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. Dragging to the left will zoom out and is indicated by a red selection region.
  • 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.

© Dr. Andrew J. Marsh, 2018.

Keyboard Modifiers

The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements.

Shift Key:
Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times.
Ctrl or Meta Key:
Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times.

NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.

Credits

This page uses the following frameworks/components:

Bootstrap  v3.3.2
Copyright © 2011-2015 Twitter, Inc. - github.com/twbs,
http://getbootstrap.com/   (LICENSE)

Bootstrap-popover-x  v1.4.0
Copyright © 2014, Kartik Visweswaran, Krajee.com,
https://github.com/kartik-v/bootstrap-popover-x   (LICENSE)

jQuery  v1.11.2
Copyright © jQuery Foundation and other contributors,
https://jquery.com/   (LICENSE)

JSON Editor
Copyright © 2015 Jos de Jong - github.com/josdejong
https://github.com/josdejong/jsoneditor/   (LICENSE)

JSURL
Copyright © 2011 Bruno Jouhier - github.com/Sage
https://github.com/Sage/jsurl/   (LICENSE)

KnockoutJS  v3.2.0
Copyright © Steven Sanderson and the Knockout.js team,
http://knockoutjs.com/   (LICENSE)

Knockstrap  v1.2.0
Copyright © 2013 Artem Stepanyuk - github.com/faulknercs,
http://faulknercs.github.io/Knockstrap/   (LICENSE)

SnackbarJS
Copyright © 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/   (LICENSE)