*Magnify*
SPONSORED LINKS
Creative fun in
the palm of your hand.
Printed from https://www.Writing.Com/view/2102794
Printer Friendly Page Tell A Friend
No ratings.
Rated: E · Other · Technology · #2102794
This is a JavaScript program that will display water saving data in 2 formats.
<!-- code should be mostly self documenting but I am adding comments anyway-->
<script>
//this is the water saving data object array
//weekly calculated averages go here
var dataArr = { values:[
{ X: "12/28/2015", Y: 0 },
{ X: "01/04/2016", Y: 0 },
{ X: "01/11/2016", Y: 0 },
{ X: "01/18/2016", Y: 0 },
{ X: "01/25/2016", Y: 0 },
{ X: "02/01/2016", Y: 0 },
{ X: "02/08/2016", Y: 0 },
{ X: "02/15/2016", Y: 0 },
{ X: "02/22/2016", Y: 0 },
{ X: "02/29/2016", Y: 0 },
{ X: "03/07/2016", Y: 0 },
{ X: "03/14/2016", Y: 0 },
{ X: "03/21/2016", Y: 0 },
{ X: "03/28/2016", Y: 0 },
{ X: "04/04/2016", Y: 2504.79 },
{ X: "04/11/2016", Y: 2401.47 },
{ X: "04/18/2016", Y: 2471.84 },
{ X: "04/25/2016", Y: 2344.44 },
{ X: "05/02/2016", Y: 2337.77 },
{ X: "05/09/2016", Y: 2262.50 },
{ X: "05/16/2016", Y: 2268.09 },
{ X: "05/23/2016", Y: 2156.75 },
{ X: "05/30/2016", Y: 2402.08 },
{ X: "06/06/2016", Y: 2457.94 },
{ X: "06/13/2016", Y: 2548.12 },
{ X: "06/20/2016", Y: 2512.00 },
{ X: "06/27/2016", Y: 2625.89 },
{ X: "07/04/2016", Y: 2341.57 },
{ X: "07/11/2016", Y: 2626.69 },
{ X: "07/18/2016", Y: 2671.52 },
{ X: "07/25/2016", Y: 2624.41 },
{ X: "08/01/2016", Y: 2647.72 },
{ X: "08/08/2016", Y: 2497.02 },
{ X: "08/15/2016", Y: 2582.94 },
{ X: "08/22/2016", Y: 2474.71 },
{ X: "08/29/2016", Y: 2665.18 },
{ X: "09/05/2016", Y: 2435.62 },
{ X: "09/12/2016", Y: 2510.52 },
{ X: "09/19/2016", Y: 2483.93 },
{ X: "09/26/2016", Y: 2254.56 },
{ X: "10/03/2016", Y: 2015.08 },
{ X: "10/10/2016", Y: 2119.94 },
{ X: "10/17/2016", Y: 2631.45 },
{ X: "10/24/2016", Y: 2618.95 },
{ X: "10/31/2016", Y: 0 },
{ X: "11/07/2016", Y: 0 },
{ X: "11/14/2016", Y: 0 },
{ X: "11/21/2016", Y: 0 },
{ X: "11/28/2016", Y: 0 },
{ X: "12/05/2016", Y: 0 },
{ X: "12/12/2016", Y: 0 },
{ X: "12/19/2016", Y: 0 },
{ X: "12/26/2016", Y: 0 },
]};
</script>
<!DOCTYPE HTML>
<head>
<title>Malaga Facility Water Saving Chart 2016</title>
<style>
body{
background-color: #9ddbeb;
font-family: 'Roboto', sans-serif;
}
h1{
color: #4f4f4f;
font-size: 3em;
font-weight: bold;
text-shadow: 0 4px 0 #949494, 4px 4px 4px #949494;
}
p, tr , td , input, select, option{
font-family: 'Roboto', sans-serif;
font-weight:300;
font-size: 18px;
}
th{
background-color: #4d88ff;
}
td:nth-child(1){
width: 20em;
}
td:nth-child(2){
width: 20em;
}
td:nth-child(4){
width: 20em;
}
table{
border-collapse: collapse;
box-shadow: 2px 2px 3px grey
}
table, th, td {
border: 2px solid #000000;
}
</style>
</head>
<body onbeforeprint="hide()" onafterprint="show()">
<center><h1>Malaga Facility Water Saving Chart 2016</h1></center>

<center><canvas id="GraphCanvas" width="1000" height="500" style="border:1px solid #000000;"></canvas></center><br>
<center><div class="hide"><input type="radio" name="graphtype" checked="true" onchange="doStuff()">Gallons Per Minute</input><input type="radio" name="graphtype" onchange="doStuff()">Percentages</input></div></center>
<center><div class="hide"><input type="checkbox" id="monotone" value="DEATH" onchange="doStuff()">Grayscale<input type="checkbox" id="grid" onchange="doStuff()">Gridlines</div></center>
<center><h4 id="STDATE" class="hide">Start Date: 4/4/2016</h4><input class="hide" type="range" id="RangeStart" value="" min="0" max="51" onchange="doStuff()" /></center>
<center><h4 id="NDDATE" class="hide">End Date: 7/11/2016</h4><input class="hide" type="range" id="RangeEnd" value="" min="0" max="51" onchange="doStuff()" /></center>

<center><table>
<thead>
<tr>
<th>Week Start Date</th>
<th>Percentage Saved</th>
<th>Average Gallons Per Minute</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table></center>
</body>
</html>
<script>
window.onload = function() {
setStartDate();
setEndDate();
doStuff();
}
var rangeStart;
var rangeEnd;
var numDates;

//sets start date to first element in array that contains data
function setStartDate() {
for(var i = 0; i < dataArr.values.length; i++){
if(dataArr.values[i].Y != 0){
document.getElementById("RangeStart").value = i;
return;
}
}
}
//sets end date to last element in array with actual data
function setEndDate() {
for(var i = dataArr.values.length; i > 0; i--){
if(dataArr.values[i-1].Y != 0){
document.getElementById("RangeEnd").value = i-1;
return;
}
}
}

function doStuff(){
rangeStart = Number(document.getElementById("RangeStart").value);
rangeEnd = Number(document.getElementById("RangeEnd").value);
numDates = rangeEnd - rangeStart + 1;
if(document.getElementsByName("graphtype")[0].checked){
drawGraph();
}else{
drawGraph2();
}
insertDate();
fillTable();
}

//variables to make sure that you dont get one of the previous two chosen colors
var colorChoice = 0;
var prev;
var prev2;
var baseline = 3600;
//var baseline = 2914.17;

function getColor() {
if(document.getElementById("monotone").checked){
do{
colorChoice = (Math.floor(Math.random() * 3))+14;
}while(colorChoice == prev || colorChoice == prev2);
}
else{
do{
colorChoice = (Math.floor(Math.random() * 12))+1;
}while(colorChoice == prev || colorChoice == prev2);
}
prev2 = prev;
prev = colorChoice;

switch(colorChoice) {
case 1:
return "#007ad1"; //Royal Blue
break;
case 2:
return "#80007b"; //Purple
break;
case 3:
return "#FF9900"; //Orange
break;
case 4:
return "#424242"; //Charcoal
break;
case 5:
return "#e6e61c"; //Yellow
break;
case 6:
return "#0d7080"; //Dark Cyan
break;
case 7:
return "#2cc746"; //Dark Green
break;
case 8:
return "#4ECDC4"; //Light Cyan
break;
case 9:
return "#556270"; //Grey
break;
case 10:
return "#AEE239"; //Lime Green
break;
case 11:
return "#F5634A"; //Red-Orange
break;
case 12:
return "#ED303C"; //Red
break;
case 13:
return "#B2FA22"; //Bright Lime Green
break;
case 14:
return "#595959"; //Light Grey
break;
case 15:
return "#9e9e9e"; //Dark Grey
break;
case 16:
return "#000000"; //Black
break;
default:
return "#000000"; //Black
}

}

function drawGraph(){
//Check if the date range makes sense
if(numDates < 1){
window.alert("That date range is not allowed.");
}
//set up the graph canvas
var graph = document.getElementById("GraphCanvas");
var gphctx = graph.getContext("2d");
gphctx.fillStyle = "#FFFFFF";
gphctx.fillRect(0,0,graph.width,graph.height);

//graph label
gphctx.fillStyle = "#000000";
gphctx.font = "40px Arial";
gphctx.textAlign = "center";
gphctx.fillText("Average Gallons Per Minute", graph.width/2 , 40);

//this divides the canvas into equally portioned sizes for each data point
var gXDist = graph.width/(numDates+1);

//draw the bars and fill in the data on the graph
for(var i = 0; i < numDates; i++){

//get random color and draw the bar
gphctx.fillStyle = getColor();
gphctx.fillRect(gXDist*(i+1)-(gXDist/2)+3, 500-(dataArr.values[i+rangeStart].Y/10) , gXDist-3 , graph.height);

//write the value of the data point above the bar
if(dataArr.values[i+rangeStart].Y != 0){
gphctx.save();
gphctx.font = "22px Arial";
if(numDates < 15){
gphctx.font = "30px Franklin Gothic Heavy";
}else if(numDates < 25){
gphctx.font = "26px Franklin Gothic Heavy";
}else{
gphctx.font = "22px Franklin Gothic Heavy";
}
gphctx.textAlign = "left";
gphctx.translate((gXDist*(i+1))-482, graph.height-(dataArr.values[i+rangeStart].Y/10)-10);
gphctx.rotate(3*Math.PI / 2);
gphctx.fillText(dataArr.values[rangeStart+i].Y, 0 , graph.height-10);
gphctx.restore();
}

//write the date on the bar
if(numDates < 15){
gphctx.font = "30px Franklin Gothic Heavy";
}else if(numDates < 25){
gphctx.font = "26px Franklin Gothic Heavy";
}else{
gphctx.font = "22px Franklin Gothic Heavy";
}
gphctx.textAlign = "left";
gphctx.save();
gphctx.translate((gXDist*(i+1))-482, graph.height-10);

//if (there is data for the data point) {write the date in white;} else {write it in black}
if(dataArr.values[i+rangeStart].Y){
gphctx.fillStyle = "#FFFFFF";
}else{
gphctx.fillStyle = "#000000";
}
gphctx.rotate(3*Math.PI / 2);
gphctx.fillText(dataArr.values[rangeStart+i].X, 0 , graph.height-10);
gphctx.lineWidth=1;
gphctx.strokeStyle = "#000000";
gphctx.strokeText(dataArr.values[rangeStart+i].X,0,graph.height-10);
gphctx.restore();

}

//gridlines option
if(document.getElementById("grid").checked){
gphctx.fillStyle = "#000000";
gphctx.font = "15px Arial";
gphctx.textAlign = "left";
gphctx.beginPath();
gphctx.lineWidth = 1.5;
gphctx.strokeStyle = "#000000";

gphctx.moveTo(0, 100);
gphctx.lineTo(graph.width, 100);
gphctx.fillText("4000", 0 , 100);

gphctx.moveTo(0, 200);
gphctx.lineTo(graph.width, 200);
gphctx.fillText("3000", 0 , 200);

gphctx.moveTo(0, 300);
gphctx.lineTo(graph.width, 300);
gphctx.fillText("2000", 0 , 300);

gphctx.moveTo(0, 400);
gphctx.lineTo(graph.width, 400);
gphctx.fillText("1000", 0 , 400);

gphctx.stroke();

gphctx.beginPath();
gphctx.moveTo(0, 500-baseline/10);
gphctx.lineTo(graph.width, 500-baseline/10);
gphctx.lineWidth = 5;
gphctx.strokeStyle = "#FF0000";
gphctx.stroke();
}
}

function fillTable() {
var new_tbody = document.createElement('tbody');
var old_tbody = document.getElementById('data');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody);
new_tbody.id = 'data';
}

function populate_with_new_rows(new_tbody) {

var nodata = false;

for(var j = 0; j < numDates; j++){

var tr = document.createElement('TR');
new_tbody.appendChild(tr);

for(var k = 0; k < 3; k++){
var td = document.createElement('TD');

if(k==0){
td.innerHTML = dataArr.values[j+rangeStart].X;
td.align = "center";
}

if(k==1){
//this calculates the percentage of water saved based on the highest volume day of the previous year
td.innerHTML = "%"+((1-(dataArr.values[j+rangeStart].Y/baseline))*100).toFixed(2);

//if the calculation resolves to 100% then that means there is a default 0 value so there is no data
if(td.innerHTML == "%100.00"){
td.innerHTML = "NO DATA";
nodata = true;
}
td.align = "center";
}

if(k==2){
td.innerHTML = dataArr.values[j+rangeStart].Y;
if(td.innerHTML == "0"){
td.innerHTML = "NO DATA";
nodata = true;
}
td.align = "center";
}

if(nodata){
tr.style.backgroundColor = "#ff0000";
tr.className = "hide";
}

tr.appendChild(td);
nodata = false;
}
}

}
//sets the viewable date text to the date that is in the array at the marked position
function insertDate() {
document.getElementById("STDATE").innerHTML = "Start Date: "+dataArr.values[rangeStart].X;
document.getElementById("NDDATE").innerHTML = "End Date: "+dataArr.values[numDates+rangeStart].X;
}
//hides all elements with the class "hide" for printing
function hide(){
var hideArray = document.getElementsByClassName("hide");
for(var i = 0; i < hideArray.length; i++){
hideArray[i].style.display = "none";
}
}
//shows all elements with the class "hide" after printing
function show(){
var hideArray = document.getElementsByClassName("hide");
for(var i = 0; i < hideArray.length; i++){
hideArray[i].style.display = "inherit";
}
}

function drawGraph2(){
//Check if the date range makes sense
if(numDates < 1){
window.alert("That date range is not allowed.");
}
//set up the graph canvas
var graph = document.getElementById("GraphCanvas");
var gphctx = graph.getContext("2d");
gphctx.fillStyle = "#FFFFFF";
gphctx.fillRect(0,0,graph.width,graph.height);

//divide the canvas into equally portioned sizes for each data point
var gXDist = graph.width/(numDates+1);

//draw the data points
for(var i = 0; i < numDates; i++){

//draw the vertical line for each point
gphctx.beginPath();
gphctx.moveTo(gXDist*(i+1),0);
gphctx.lineTo(gXDist*(i+1),500);
gphctx.lineWidth=1;
gphctx.strokeStyle = "#000000";
gphctx.stroke();
gphctx.moveTo(0,0);

//draw the line from the previous dot to this dot
if(((1-(dataArr.values[i+rangeStart].Y/baseline))*500) != 500 && ((1-(dataArr.values[i-1+rangeStart].Y/baseline))*500) != 500 && i != 0){
gphctx.beginPath();
gphctx.moveTo(gXDist*(i),((1-(dataArr.values[i-1+rangeStart].Y/baseline))*500));
gphctx.lineTo(gXDist*(i+1),((1-(dataArr.values[i+rangeStart].Y/baseline))*500));
gphctx.lineWidth=3;
if((((1-(dataArr.values[i-1+rangeStart].Y/baseline))*500)) > ((1-(dataArr.values[i+rangeStart].Y/baseline))*500)){
gphctx.strokeStyle = "#000000";
}else{
gphctx.strokeStyle = "#000000";
}
gphctx.stroke();
gphctx.moveTo(0,0);
}

//get random color and draw the dot
if(((1-(dataArr.values[i+rangeStart].Y/baseline))*500) <= 150){
gphctx.strokeStyle = "#FF0000";
gphctx.fillStyle = gphctx.strokeStyle;
}else{
gphctx.strokeStyle = "#0000FF";
gphctx.fillStyle = gphctx.strokeStyle;
}
if(((1-(dataArr.values[i+rangeStart].Y/baseline))*500) != 500){
gphctx.beginPath();
gphctx.arc(gXDist*(i+1),(((1-(dataArr.values[i+rangeStart].Y/baseline))*500).toFixed(2)),4,0,2*Math.PI);
gphctx.lineWidth=6;
gphctx.stroke();
}
//write the value of the data point above the dot
if(dataArr.values[i+rangeStart].Y != 0){
gphctx.save();
gphctx.font = "15px Arial";
gphctx.textAlign = "left";
gphctx.translate((gXDist*(i+1))-490, (((1-(dataArr.values[i+rangeStart].Y/baseline))*500).toFixed(2))-10);
gphctx.rotate(3*Math.PI / 2);
gphctx.fillText(((1-(dataArr.values[i+rangeStart].Y/baseline))*100).toPrecision(4)+"%", 0 , graph.height-10);
gphctx.restore();
}

//write the date below the data point
gphctx.font = "15px Arial";
gphctx.textAlign = "left";
gphctx.save();
gphctx.translate((gXDist*(i+1))-490, graph.height-110);
//gphctx.fillStyle = "#000000";
gphctx.rotate(3*Math.PI / 2);
gphctx.fillText(dataArr.values[rangeStart+i].X, 0 , graph.height-10);
gphctx.restore();

}

//gridlines option
if(document.getElementById("grid").checked){
gphctx.fillStyle = "#000000";
gphctx.font = "15px Arial";
gphctx.textAlign = "left";
gphctx.beginPath();

gphctx.moveTo(0, 50);
gphctx.lineTo(graph.width, 50);
gphctx.fillText("10%", 0 , 50);

gphctx.moveTo(0, 100);
gphctx.lineTo(graph.width, 100);
gphctx.fillText("20%", 0 , 100);

gphctx.moveTo(0, 150);
gphctx.lineTo(graph.width, 150);
gphctx.fillText("30%", 0 , 150);

gphctx.moveTo(0, 200);
gphctx.lineTo(graph.width, 200);
gphctx.fillText("40%", 0 , 200);

gphctx.moveTo(0, 250);
gphctx.lineTo(graph.width, 250);
gphctx.fillText("50%", 0 , 250);

gphctx.moveTo(0, 300);
gphctx.lineTo(graph.width, 300);
gphctx.fillText("60%", 0 , 300);

gphctx.lineWidth=1;
gphctx.strokeStyle = "#000000";
gphctx.stroke();
gphctx.beginPath();
gphctx.moveTo(0, ((1-(2914.17/baseline))*500));
gphctx.lineTo(graph.width, ((1-(2914.17/baseline))*500));
gphctx.fillText("", 0 , ((1-(2914.17/baseline))*500));

gphctx.lineWidth=3;
gphctx.strokeStyle = "#ff0000";
gphctx.stroke();
}
//graph label
//Label Background Rect
gphctx.fillStyle = "#FFFFFF";
gphctx.fillRect(225,400,550,75);

//Label Stroke
gphctx.lineWidth=1;
gphctx.strokeStyle = "#000000";
gphctx.strokeRect(225,400,550,75);

//Label Words
gphctx.fillStyle = "#000000";
gphctx.font = "40px Arial";
gphctx.textAlign = "center";
gphctx.fillText("Percentage Saved Per Week", graph.width/2 , 500-50);
}

</script>
© Copyright 2016 J_Alexander (jaymorrow at Writing.Com). All rights reserved.
Writing.Com, its affiliates and syndicates have been granted non-exclusive rights to display this work.
Log in to Leave Feedback
Username:
Password:
Not a Member?
Signup right now, for free!
All accounts include:
*Bullet* FREE Email @Writing.Com!
*Bullet* FREE Portfolio Services!
Printed from https://www.Writing.Com/view/2102794