let numbers = 10; let numberArray = []; let chart1, chart2, chart3, chart4; window.onload = ()=>{ reset(); } function reset(){ numberArray = []; for(let i = 1; i<=numbers; i++){ numberArray.push({label: i, value: 0}); } for(let i = 0; i<=100; i++){ let genNum = Math.floor(Math.random()*numbers); numberArray[genNum].value++; numberArray[genNum].label = parseInt(genNum+1)+" ("+numberArray[genNum].value+")"; } let data = { id: "chart1", data: numberArray, options:{ max: null } } chart1 = new loudChart(data); chart1.animate(); numberArray = []; for(let i = 1; i<=numbers; i++){ numberArray.push({label: i, value: 0}); } for(let i = 0; i<=1000; i++){ let genNum = Math.floor(Math.random()*numbers); numberArray[genNum].value++; numberArray[genNum].label = parseInt(genNum+1)+" ("+numberArray[genNum].value+")"; } data = { id: "chart2", data: numberArray, options:{ max: null } } chart2 = new loudChart(data); chart2.animate(); numberArray = []; for(let i = 1; i<=numbers; i++){ numberArray.push({label: i, value: 0}); } for(let i = 0; i<=10000; i++){ let genNum = Math.floor(Math.random()*numbers); numberArray[genNum].value++; numberArray[genNum].label = parseInt(genNum+1)+" ("+numberArray[genNum].value+")"; } data = { id: "chart3", data: numberArray, options:{ max: null } } chart3 = new loudChart(data); chart3.animate(); numberArray = []; for(let i = 1; i<=numbers; i++){ numberArray.push({label: i, value: 0}); } for(let i = 0; i<=100000; i++){ let genNum = Math.floor(Math.random()*numbers); numberArray[genNum].value++; numberArray[genNum].label = parseInt(genNum+1)+" ("+numberArray[genNum].value+")"; } data = { id: "chart4", data: numberArray, options:{ max: null } } chart4 = new loudChart(data); chart4.animate(); } //******* // Constructor below //******* var loudChart = function(data){ data = data || {}; if(data.id){ this.data = data.data.filter(t => typeof t.value != "undefined" && !isNaN(t.value)).map((t)=>{ t.start = 0; t.current = 0; t.shift = (t.value > 0)?0:Math.abs(t.value); t.label = t.label || ""; return t; }); this.id = data.id; this.options = data.options || {}; this.options.shift = this.options.shift || 0; var c = document.getElementById(this.id); var ctx = c.getContext("2d"); this.animate = () =>{ var done = false; for(var i = 0; i{ var curMax = this.data[0].value; for(var i = 0; i curMax){ curMax = this.data[i].value; } } return curMax+0.2*curMax; } var getMin = ()=>{ var curMin = this.data[0].value; for(var i = 0; i { y = Math.abs(y); height = Math.abs(height); if(height<2*radius){ radius = height/2; } if(width<2*radius){ radius = width/2; } context.beginPath(); context.arc(x+radius,y+radius,radius,Math.PI,3/2*Math.PI); context.lineTo(x+width-radius,y); context.arc(x+width-radius,y+radius,radius,3/2*Math.PI,2*Math.PI); context.lineTo(x+width,y+height-radius); context.arc(x+width-radius,y+height-radius,radius,2*Math.PI,1/2*Math.PI); context.lineTo(x+radius,y+height); context.arc(x+radius,y+height-radius,radius,1/2*Math.PI,Math.PI); context.lineTo(x,y+radius); context.fill(); } this.draw = ()=>{ var rect = c.getBoundingClientRect(); var dpr = window.devicePixelRatio || 1; var w = rect.width; var h = rect.height; c.width = w*dpr; c.height = h*dpr; ctx.scale(dpr,dpr); ctx.shadowOffsetX = 2*dpr; ctx.shadowOffsetY = 3*dpr; ctx.shadowBlur = 5*dpr; ctx.shadowColor = "rgba(0,0,0,0.35)"; var grd = ctx.createLinearGradient(0,0,w,h); grd.addColorStop(0, "orange"); grd.addColorStop(1, "fuchsia"); ctx.fillStyle = grd; ctx.font = 15*h/300+"px Arial"; var max = this.options.max || getMax(); var min = this.options.min || getMin(); var shift = this.options.shift; var getPower = function(num){ return Math.pow(10,Math.floor(Math.log(num)/Math.log(10))-1); } var getTicks = function(numTicks){ var arr = []; var step = Math.floor((max+shift)/numTicks/getPower(max+shift))*getPower(max+shift); var currStep = min; while(currStep < 0.95*(max+shift)){ arr.push(Math.round(currStep*1000000)/1000000); currStep += step; } return arr; } var ticks = getTicks(5); ctx.strokeStyle = "rgba(150,150,150,0.5)"; ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(30,h-10); ctx.lineTo(30,h-10-h); for(var i = 0; i 0.93*(max+shift)){ break; } ctx.moveTo(30,h-10-h*(ticks[i]/(max+shift))); ctx.lineTo(w-10,h-10-h*(ticks[i]/(max+shift))); ctx.fillText(ticks[i]-shift, 0, h-8-h*(ticks[i]/(max+shift))); } ctx.stroke(); for(var i = 0; i 0)?0:Math.abs(this.data[i].value); drawRoundedRect(ctx,40+i*(w-40)/this.data.length, h-h*(shift/(max+shift))+h*(this.data[i].shift/(max+shift))-10-h*(Math.abs(this.data[i].current)/(max+shift)),w/this.data.length-15,h*(this.data[i].current/(max+shift)),7); ctx.save(); ctx.translate(40+i*(w-40)/this.data.length, h-9); ctx.rotate(-Math.PI/2); ctx.fillStyle = "white"; ctx.shadowBlur = 1; ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.textAlign = "left"; ctx.fillText(this.data[i].label, 5+h*(shift/(max+shift))-h*(this.data[i].shift/(max+shift)),12); ctx.restore(); } } this.redraw = () =>{ ctx.clearRect(0,0,c.width,c.height); this.draw(); } window.addEventListener("resize", ()=>{ this.redraw(); }); return this; }else{ return null; } }

Distribution of Math.random() in JS