graph v 1.0

by gaby de wilde

HTML

<table>
<tr><td>1000</td>
<td rowspan=5>
<div id="graph"></div>
<div id="graph2"></div>
<div id="graph3"></div>
<div id="graph4"></div>
</td>
</tr>
<tr><td>750</td></tr>
<tr><td>500</td></tr>
<tr><td>250</td></tr>
<tr><td>0</td></tr>
</table>

CSS

#graph {
  background-size: 60px 60px;
  background-image: linear-gradient(to right, grey 0.1px, transparent 1px), linear-gradient(to bottom, grey 0.1px, transparent 1px);
  white-space: nowrap;
  /*width: 601px;*/
  height: 241px;
  padding-right:1px;
}
#graph img {
  width: 30px;
  filter: hue-rotate(-90deg);
}
#graph2 img {
  width: 30px;
  filter: invert(100%);
}
#graph3 img {
  width: 30px;
}
#graph4 img {
  width: 30px;
  filter: hue-rotate(90deg);
}
#graph2{
  clear:left;
  float:left;
  position:relative;
  top:-240px;
  left:0;
  height:240px;
  margin-bottom: -240px
}
#graph3,#graph4  {
  clear:left;
  float:left;
  position:relative;
  top:-240px;
  left:0;
  height:240px;
  margin-bottom: -480px
}
td{
  height:56px;
  text-align: right;
  font-size:12px;
  }
body{background:#000}

JavaScript

drawGraph = (a,b) => {
  var c,d,e,f='',g;
  a.reduce(function(h, g) {
    e=(c=(g<h)*3)?h-g:g-h;
    f+='<img src="http://img.go-here.nl/curve'+(c+(e<26?e<5?2:1:0))+'.png" style="height:'+(e|1)+'px;margin: '+(240-e-(d=c?g:h))+'px 0 '+d+'px 0">';
    return g;
  })
  b.innerHTML = f;
}

/* 

usage: provide values up to 240 like this:

drawGraph([120,180,170,240,60,120,240,210,60,30,210], elm)

images can be downloaded here:

up   big    http://img.go-here.nl/curve0.png
down big    http://img.go-here.nl/curve3.png
up   small  http://img.go-here.nl/curve1.png
down small  http://img.go-here.nl/curve4.png
up   tiny   http://img.go-here.nl/curve2.png
down tiny   http://img.go-here.nl/curve5.png        
  
-written by Gaby de Wilde
  
*/



// demo:
var arr = [];
var arr2 = [];
var arr3 = [];
var arr4 = [];
var zap;
for (var i=0, t=31; i<t; i++) {
    zap = Math.round(Math.random() * 240);
    arr.push(zap);
    arr2.push(240-zap);
    arr3.push(Math.round(Math.random() * 120));
    arr4.push(Math.round(Math.random() * 60));
}

setInterval(function(){
arr.shift();
zap = Math.round(Math.random() * 240);
arr.push(1+zap);
drawGraph(arr.slice(),document.getElementById('graph'));

arr2.shift();
arr2.push(1+240-zap);
drawGraph(arr2.slice(),document.getElementById('graph2'));

arr3.shift();
arr3.push(1+Math.round(Math.random() * 240));
drawGraph(arr3.slice(),document.getElementById('graph3'));

arr4.shift();
arr4.push(1+Math.round(Math.random() * 240));
drawGraph(arr4.slice(),document.getElementById('graph4'));
},240)