1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="puissance">
<div id="chart_div"></div>
<div id="filter_div"></div>
</div>
<div id="daily_div"></div>
<div id="monthly_div"></div>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'controls'], 'language': 'fr'});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'V.A');
data.addColumn({type:'string', role:'style'});
data.addColumn('number', 'W');
data.addRows([[{v:new Date(2018, 1, 7, 20, 34, 05), f:'7 Feb 20h34'},
{v:1570, f:'1570 V.A'}, 'color: #375D81', {v:1540, f:'1540 W'}], [{v:new Date(2018, 1, 7, 20, 34, 07), f:'7 Feb 20h34'},
{v:1560, f:'1560 V.A'}, 'color: #e0440e', {v:1540, f:'1540 W'}], [{v:new Date(2018, 1, 7, 20, 35, 07), f:'7 Feb 20h35'},
{v:1520, f:'1520 V.A'}, 'color: #e0440e', {v:1540, f:'1540 W'}], [{v:new Date(2018, 1, 7, 20, 36, 03), f:'7 Feb 20h36'},
**************************************************ROGNER****************************************************
{v:2220, f:'2220 V.A'}, 'color: #e0440e', {v:2200, f:'2200 W'}], [{v:new Date(2018, 1, 12, 20, 31, 04), f:'12 Feb 20h31'},
{v:2010, f:'2010 V.A'}, 'color: #e0440e', {v:1980, f:'1980 W'}], [{v:new Date(2018, 1, 12, 20, 32, 04), f:'12 Feb 20h32'},
{v:2230, f:'2230 V.A'}, 'color: #e0440e', {v:2200, f:'2200 W'}], [{v:new Date(2018, 1, 12, 20, 33, 03), f:'12 Feb 20h33'},
{v:1450, f:'1450 V.A'}, 'color: #e0440e', {v:1320, f:'1320 W'}]]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('puissance'));
var rangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'filter_div',
'options': {
filterColumnLabel : 'Date',
ui : {chartType: 'LineChart', chartOptions: {
height : 80,
backgroundColor: '#FFF',
colors : ['#375D81', '#ABC8E2'],
curveType : 'function',
focusTarget : 'category',
lineWidth : '1',
'legend': {'position': 'none'},
'hAxis': {'textPosition': 'in'},
'vAxis': {
'textPosition': 'none',
'gridlines': {'color': 'none'}
}
}}
}
});
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'options': {
title: 'Consommation instantanée',
height : 400,
backgroundColor: '#FFF',
colors : ['#375D81', '#ABC8E2'],
curveType : 'function',
focusTarget : 'category',
lineWidth : '1',
legend : {position: 'bottom', alignment: 'center', textStyle: {color: '#333', fontSize: 16}},
vAxis : {textStyle : {color : '#555', fontSize : '16'}, gridlines : {color: '#CCC', count: 'auto'}, baselineColor : '#AAA', minValue : 0},
hAxis : {textStyle : {color : '#555'}, gridlines : {color: '#DDD'}}
}
});
dashboard.bind(rangeSlider, lineChart);
dashboard.draw(data);
}
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Heures pleines');
data.addColumn('number', 'Heures creuses');
data.addRows([]);
var dailyChartOptions = {
title: 'Consommation journalière',
height : 200,
backgroundColor: '#FFF',
colors : ['#375D81', '#ABC8E2'],
focusTarget : 'category',
isStacked: true,
legend : {position: 'bottom', alignment: 'center', textStyle: {color: '#333', fontSize: 16}},
vAxis : {textStyle : {color : '#555', fontSize : '16'}, gridlines : {color: '#CCC', count: 'auto'}, baselineColor : '#AAA', minValue : 0},
hAxis : {textStyle : {color : '#555'}, gridlines : {color: '#DDD'}}
};
function floorDate(date) {
var month = new Date(date.getFullYear(), date.getMonth());
return month;
}
var monthlyData = google.visualization.data.group(data, [{
column: 0,
modifier: floorDate,
type: 'date'
}], [{
column: 1,
label: 'Heures pleines',
aggregation: google.visualization.data.sum,
type: 'number'
}, {
column: 2,
label: 'Heures creuses',
aggregation: google.visualization.data.sum,
type: 'number'
}]);
// Format dates
var formatter = new google.visualization.DateFormat({pattern: "MMM ' 'yyyy"});
formatter.format(monthlyData, 0);
var monthlyChartOptions = {
title: 'Consommation mensuelle',
height : 200,
backgroundColor: '#FFF',
colors : ['#375D81', '#ABC8E2'],
focusTarget : 'category',
isStacked: true,
legend : {position: 'bottom', alignment: 'center', textStyle: {color: '#333', fontSize: 16}},
vAxis : {textStyle : {color : '#555', fontSize : '16'}, gridlines : {color: '#CCC', count: 'auto'}, baselineColor : '#AAA', minValue : 0},
hAxis : {textStyle : {color : '#555'}, gridlines : {color: '#DDD'}, format: 'MMM yyyy'}
};
var dailyChart = new google.visualization.ColumnChart(document.getElementById("daily_div"));
dailyChart.draw(data, dailyChartOptions);
var monthlyChart = new google.visualization.ColumnChart(document.getElementById("monthly_div"));
monthlyChart.draw(monthlyData, monthlyChartOptions);
}
</script> |
Partager