hal/resource/web/pc_overview.tmpl

<h1 class="page-header">Overview</h1>

<div class="row placeholders">
    <H1>Last 24 hours (kWh/5min)</H1>
    <div id="minute-power-chart" style="height:450px;"></div>
</div>
<div class="row placeholders">
    <H1>Last Week (kWh/h)</H1>
    <div id="hour-power-chart" style="height:450px;"></div>
</div>
<div class="row placeholders">
    <H1>All History (kWh/day)</H1>
    <div id="day-power-chart" style="height:450px;"></div>
</div>
<div class="row placeholders">
    <H1>All History (kWh/week)</H1>
    <div id="week-power-chart" style="height:450px;"></div>
</div>

<script>

    $(function(){
		initChart("minute-power-chart", "?json&data=minute", 5*60*1000);
		initChart("hour-power-chart", "?json&data=hour", 60*60*1000);
		initChart("day-power-chart", "?json&data=day", -1);
		initChart("week-power-chart", "?json&data=week", -1);

	});

    function initChart(elementId, url, time){
        var chart = Morris.Line({
              element: elementId,
              data: [{time:0}],
              xkey: 'time',
              ykeys: [ {{#sensors}} {{.getId()}}, {{/sensors}} ],
              labels: [ {{#sensors}} "{{.getUser().getUsername()}}: {{.getName()}}", {{/sensors}} ],
              continuousLine: false,
              pointSize: 1,
              postUnits: 'kWh',
              resize: true,
              hideHover: 'auto',
        });
        updateChart(chart, url, time);
    }

    function updateChart(chart, url, time){
        $.getJSON(url, function(json){
            chart.setData(json.data);
        });
        if(time > 0)
            setTimeout(function(){ updateChart(chart, url, time); }, time);
    }
</script>