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.

Color By:
Start On:
Month Separation:
Cell Gap:
Minimum Cell Size:
Preferred Cell Size:

Edit Color


Ordinal day of the year:

Ordinal day of the year:

Days to Include in Selection


Minimum data value:

Maximum data value:


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.






This application allows you to display analysis or weather data across the year grouped by day, week and month. The aim is to facilitate the visual identification of trends based on where they fit within the standard working week and seasonally across the year, which may not be as immediately obvious using other chart types. This format is also particularly well suited to the represention of annual scheduling information.

Starting on a Monday

According to ISO 8601, the international standard week starts on a Monday and finishes on a Sunday. Whilst there are cultural variations, ISO 8601 is an agreed standard that provides an unambiguous and well-defined method of representing dates and times across all countries, even those with completely different representational conventions.

In relation to building performance analysis, using this standard corresponds well with the typical international working week, in which there are likely to be differences in activity levels on weekdays (Mon to Fri) and weekends (Sat, Sun). In terms of the chart itself, it means that weekdays and weekends are naturally grouped together for purposes of both interactive selection and direct visual comparison, instead of weekends being split apart at either end of the chart.

Interesting Features

I needed to develop this type of chart as part of my annual hourly schedule editor. This app is a by-product that lets me stress test its different parameters and make sure it is flexible and robust enough to handle different types of daily data.

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

  • It can handle hourly, daily and even monthly data sets,
  • It is highly customisable, allowing the manipulation of most parameters, and
  • You can save charts locally as vector SVG files.

© 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.


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)

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)

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