canvas scheduler proto

by jpeter06

HTML

<div id="container">
  <canvas id="myCanvas"/>
</div>

CSS

canvas {
    border: 0px solid #ccc;
    margin: 0px;
}
#bResize{ position:absolute; left: 10px;top:10px;}
#bRepos{ position:absolute; left: 100px;top:10px;}
#container{position:absolute;overflow:hidden; left:0px;top:0px; bottom:0px;right:0px;border:1px solid #eee;}

JavaScript

var elem = document.getElementById('myCanvas'),
    elements = [],
    numHoras=24;

var datos=[{cron:"0+01,11,21,31,41,51+*+*+*+?",report:"CARES",batch:"NOW"},
{cron:"0+00,15,30,45+*+*+*+?",report:"CARGAS",batch:"BATCH"},
{cron:"0+16+07+*+*+?",report:"CHE",batch:"YESTERDAY"},
{cron:"0+12+07+*+*+?",report:"CHEPLIN",batch:"YESTERDAY"},
{cron:"0+00,15,30,45+*+*+*+?",report:"CHE_DIRSPD",batch:"BATCH"},
{cron:"0+08+*+*+*+?",report:"CHE_SPDEXP",batch:"BATCH"},
{cron:"0+27+07+*+*+?",report:"CHE_TFS7",batch:"YESTERDAY"},
{cron:"0+14+07+*+*+?",report:"COBHORHIE",batch:"YESTERDAY"},
{cron:"0+02,12,22,32,42,52+1-4+*+*+?",report:"CONSIGNA_2M",batch:"YESTERDAY"},
{cron:"0+02,12,22,32,42,52+*+*+*+?",report:"CONSIGNA_2M",batch:"TODAY"},
{cron:"0+03,08,13,18,23,28,33,38,43,48,53,58+1-4+*+*+?",report:"DEMANDA",batch:"TODAY"},
{cron:"0+15+07+*+*+?"},
{cron:"0+25+*+*+*+?"},
{cron:"0+28+01+*+*+?"},
{cron:"0+24+*+*+*+?"},
{cron:"0+08+*+*+*+?"},
{cron:"0+14,29,44,59+1-4+*+*+?"},
{cron:"0+14,29,44,59+*+*+*+?"},
{cron:"0+14,29,44,59+1-4+*+*+?"},
{cron:"0+14,29,44,59+*+*+*+?"},
{cron:"0+24+01+*+*+?"},
{cron:"0+14,29,44,59+0-23+*+*+?"},
{cron:"0+10+01+*+*+?"},
{cron:"0+10+05+*+*+?"},
{cron:"0+40+13+*+*+?"},
{cron:"0+40+21+*+*+?"},
{cron:"0+10+01+*+*+?"},
{cron:"0+10,45+1-23+*+*+?"},
{cron:"0+55+05+*+*+?"},
{cron:"0+14,29,44,59+*+*+*+?"},
{cron:"0+02,17,32,47+*+*+*+?"},
{cron:"0+21,32,52+*+*+*+?"},
{cron:"0+10,30,50+*+*+*+?"},
{cron:"0+00+01+*+*+?"},
{cron:"0+02+03+*+*+?"},
{cron:"0+00+04+*+*+?"},
{cron:"0+11+07+*+*+?"},
{cron:"0+13+07+*+*+?"}];

//EVENTOS
elem.addEventListener('click', function(event) {
    var  y = event.offsetY/scaleY;
    var aux=Math.floor(y*datos.length/100);
  	 console.log("index datos:",aux);
}, false);

elem.addEventListener('mousemove', function(event) {
    var  y = event.offsetY/scaleY;
    var aux=Math.floor(y*datos.length/100);
   if(elem.title!=datos[aux])
   	 elem.setAttribute("title",
     	(datos[aux].report?datos[aux].report+" ":"")+
    ...