Time of Use vs Flat Rate Electricity – which is cheaper?

Electricity retailers sometimes give the choice of paying a flat rate for electricity, or so called Time of Use (ToU) rate. Time of use pricing usually has peak, off-peak and shoulder prices. This can also vary by time of year and also weekend or weekday.

For the consumer, Time of Use pricing may be beneficial if consumption can be shifted to off-peak hours, but this is potentially offset by more expensive rates during peak times.

Assuming a retailer gives the ability to choose – which one is cheaper?


This web calculator gives the ability to simulate costs based on historical meter data usage and configurable pricing and peak/off-peak definition:


Energy Analyser – Screenshot

Note: Beta only. Default prices may be different depending on the retailer or electricity plan, but the sliders allow adjustment to configure unit prices to match any real plan for comparison.


  • Calculate costs, potential savings and get a recommendation:
  • Fully client-side, JavaScript and HTML – no server upload required
  • Ability to drag-and-drop upload a Victorian Energy Compare formatted CSV:
  • Focus on a particular date range within the uploaded meter data:
  • Ability to configure time of use definitions (i.e. peak, off-peak and shoulder times):

Potential future improvements

The following future improvements could make the solution more useful:

  • Cope with different data formats (different States’ data)
  • Ability to compare two (or n) different plans
  • Automatic comparison of available plans from multiple retailers (pulling prices automatically)
  • Inclusion of solar feed-in tariff as a comparison point
  • Provide recommendations for changing energy usage behaviour
  • Simulate the impact of having a home battery

Visualising Solar Generation Data in a Custom Histogram using D3.js

Using the “brush” feature of the D3 Javascript library again proves handy for creating an interactive, animated histogram.  This type of visualisation helps to analyse and explore the distribution of time-series data.

For this demo, home solar PV generation data has been obtained from United Energy’s Energy Easy portal in CSV format.  For the sake of convenience in dealing with the raw data which usually comes in half-hourly intervals, this data has been loaded in to a Pentaho data warehouse instance (more details in a later post, perhaps!) and converted to day-by-day figures.

D3 - Interactive Histogram - Preparing Solar PV generation data with Saiku
Preparing Solar PV generation data with Saiku

Analysis can help explore whether solar panels are getting less efficient over time, or even determine what a “good” day of production is like in summer vs winter (by looking at the relevant frequency of each in the histogram).


  • Drag and scroll date region which affects histogram above:
    D3 - Interactive Histogram - Selectable Date Range
  • Changeable histogram buckets:
    D3 - Interactive Histogram - Adjustable Buckets
  • Snap-shotting of one selected date range for visual comparison with another (e.g. summer vs winter comparison):
    D3 - Interactive Histogram - Summer vs Winter Comparison

Key techniques – how it’s achieved:

  1. Data is embedded into the HTML page:

    <pre id=”csvdata”>


    It’s hidden visually using the CSS display:none directive…

    #csvdata {
    display: none;

    …and then read into a Javascript variable for display and computation via D3.

    var raw = d3.select(“#csvdata”).text();
    var dataset_copy = d3.csv.parse(raw);

  2. Maximum value is found in the selected region of the dataset:

    max = d3.max(dataset, function (d) {    return +d.Quantity;});

    …histogram is created based on maximum value:

    // Generate a histogram using uniformly-spaced bins.
    datasetHist = d3.layout.histogram()

    .range([0, max])
    (dataset.map(function (d) {

    return d.Quantity;

  3. An HTML form input slider is used for selection of number of buckets:

        240px; text-align: right; font-size: 10px;font-family: sans-serif;”>Number of buckets: 10


    Value of slider is passed into Javascript (to variable “buckets”) via this code:

    d3.select(“#nBuckets”).on(“input”, function () {
    buckets = +this.value;

Demo / code:

Try out the demo and check out the code here: