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", 24*60*60*1000);
		initChart("#week-power-chart", "?json&data=week", 7*24*60*60*1000);

	});

    function initChart(elementId, url, updateTime){
        var tickConf = {count: 20};
        if (updateTime < 60*60*1000)
            tickConf['format'] = '%H:%M';
        else if (updateTime < 24*60*60*1000)
            tickConf['format'] = '%Y-%m-%d %H:%M';
        else
            tickConf['format'] = '%Y-%m-%d';


        var chart = c3.generate({
            bindto: elementId,
            data:  {json: []}, // set empty data, data will be loaded later
            axis : {
                x : {
                    type : 'timeseries',
                    label: 'Timestamp',
                    tick: tickConf,
                },
                y: {
                    label: 'Power (kWh)',
                    min: 0,
                },
                y2: {
                    show: true,
                    label: 'Temperature (C)',
                    min: 0,
                }
            },
            grid: {
                y: {show: true}
            },
            point: {
                show: false
            }
        });

        updateChart(chart, url, updateTime);;
    }
    function updateChart(chart, url, updateTime){
        $.getJSON(url, function(json){
            chart.load(getChartData(json));
        });
        setTimeout(function(){ updateChart(chart, url, updateTime); }, updateTime);
    }
    function getChartData(json){
        var dataXaxis = {};
        var dataYaxis = {};
        var data = [];
        var labels = [];
        json.forEach(function(sensor, i) {
            var index = 'data'+i;
            labels[index] = sensor.user +": "+ sensor.name;
            dataXaxis[index] = 'data'+i+'x';
            data.push([index+'x'].concat(sensor.timestamps));
            data.push([index].concat(sensor.data));

            if (sensor.type == "PowerConsumptionSensorData")
                dataYaxis[index] = 'y';
            else //if (sensor.type == "TemperatureSensorData")
                dataYaxis[index] = 'y2';
        });

        return {
            xs: dataXaxis,
            columns: data,
            names: labels,
            type: 'spline',
            axes: dataYaxis,
        };
    }
</script>