var chart1; window.onload = ()=>{ // chart data, contains the id of the chart canvas to draw on. var data = { id: "chart1", data: [ {value: 23, label: "Name 1"}, {value: 32, label: "Name 2"}, {value: 21, label: "Name 3"}, {value: 43, label: "Name 4"}, {value: 45, label: "Name 5"}, {value: 27, label: "Name 6"}, {value: 36, label: "Name 7"} ], options:{ max: null } } //new instance of a chart with the data from above. chart1 = new loudChart(data); // draws and animates the chart after card open animation setTimeout(()=>{ chart1.animate(); },1500); //opens card 3 after half a second setTimeout(()=>{ toggleOpen.call(document.getElementsByClassName('card-3')[0]); },500); } // toggles the clicked card open or closed function toggleOpen(){ if(this.className.includes('open')){ this.className = this.className.replace(" open",""); } else{ var cards = document.getElementsByClassName("card-section"); for(var i=0 ;i 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 0) ? 0: curMin; return 0; } var drawRoundedRect = (context,x,y,width,height,radius) => { 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 = "rgb(210,210,210)"; 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.onresize = ()=>{ this.redraw(); } return this; }else{ return null; } } // function to randomize data in a chart function randomizeData(chart, min, max){ //console.log(JSON.stringify(chart.data)); for(var i = 0; i

Custom bar chart library