histogram

by Marc Chehab

HTML

<svg id="drawhere">
</svg>

JavaScript

var vc_comments = [
 ["", 10, 12], 
 ["", 30, 44],  
 ["", 35, 6], 
 ["", 40, 30]
];

function vc_histogram(px) {
 //to be adapted 
 var vidlength = 60;
 var canvas = "drawhere";
 var tmp=0;
 
 //build SVG string
 var width=300;
 var height=100;
 var arraypos=0;
 var int=vidlength/(width/px); //interval in seconds
 var commentsums = [];
 var maxcomments = 0;
 console.log(int);
 for (var intnr=0;intnr*int<=vidlength; intnr++) {
 	var sumcomments = 0;
  if(arraypos<vc_comments.length) {
  	sumit: 
    while (vc_comments[arraypos][1]<(intnr+1)*int) {
      sumcomments+=vc_comments[arraypos][2];
      arraypos++;
      if (arraypos==vc_comments.length) break sumit;
    }
  }
  commentsums[intnr] = sumcomments;
  if (sumcomments>maxcomments) maxcomments=sumcomments;
 }
 var svgstring="M 0 " + height + " ";
 for (var i=0; i<commentsums.length;i++) {
  svgstring+= "S " + (i+0.5)*px + " " + (1-commentsums[i]/maxcomments)*height + ", " + (i+1)*px + " " + (1-commentsums[i]/maxcomments)*height + " ";
 }
 //svgstring+= "S " + width + " " + height + ", " + width + " " + height;
 svgstring+= "Z";
 console.log(svgstring);
 var svgpath = document.createElementNS("http://www.w3.org/2000/svg", "path");
 svgpath.setAttribute("d", svgstring);
 svgpath.style.stroke = "#000";
 svgpath.style.strokeWidth = "2px";
 document.getElementById(canvas).appendChild(svgpath);
 console.log("tmp: " + tmp);
};

$(document).ready(function() {
    vc_histogram(10);
});