Skip to content

Instantly share code, notes, and snippets.

@nimajneBG

nimajneBG/chart-demonstration.html

Last active February 9, 2021 14:43
Show Gist options
  • Save nimajneBG/4fd09a9c64ed57f0618fb76caa3dfbe6 to your computer and use it in GitHub Desktop.
Save nimajneBG/4fd09a9c64ed57f0618fb76caa3dfbe6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chart-demonstration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&family=Ubuntu:ital,wght@0,400;0,500;1,400;1,500&display=swap');:root{--oxford-blue:#031d44ff;--indigo-dye:#04395eff;--ming:#3a6e73ff;--polished-pine:#70a288ff;--sage:#a5ad87ff;--burlywood:#dab785ff;--copper-crayola:#d5896fff;--terra-cotta:#dd705bff;--deep-chestnut:#ad4846ff;--eggplant:#583345ff;--bg:#f2f2f2;--fg:#fff;--text:#262626;--disabled:#ccc}*{margin:0;padding:0;font-family:'Ubuntu', sans-serif;color:var(--text);box-sizing:border-box}body{background-color:var(--bg)}span.color0,span.color1,span.color2,span.color3,span.color4,span.color5,span.color6,span.color7,span.color8,span.color9{display:inline-block;width:1.3em;height:1.3em;border:4px solid #fff}.color0{fill:var(--oxford-blue);background-color:var(--oxford-blue)}.color1{fill:var(--indigo-dye);background-color:var(--indigo-dye)}.color2{fill:var(--ming);background-color:var(--ming)}.color3{fill:var(--polished-pine);background-color:var(--polished-pine)}.color4{fill:var(--sage);background-color:var(--sage)}.color5{fill:var(--burlywood);background-color:var(--burlywood)}.color6{fill:var(--copper-crayola);background-color:var(--copper-crayola)}.color7{fill:var(--terra-cotta);background-color:var(--terra-cotta)}.color8{fill:var(--deep-chestnut);background-color:var(--deep-chestnut)}.color9{fill:var(--eggplant);background-color:var(--eggplant)}.chart-description,main div.content div.poll{text-align:left}svg{background:#ddd;display:block}.chart{width:100%;max-height:500px}div.charts{display:flex;flex-direction:row}.charts > *{margin:20px 0 0 20px}.chart-description{min-width:38%;display:flex;flex-direction:column;justify-content:center}svg{margin:20px 0}@media only screen and (max-width: 600px){div.charts{flex-direction:column}}
</style>
<script>
const xmlns="http://www.w3.org/2000/svg";class Chart{constructor(data){this.data=data;this.total=new Number}computeValues(){this.data.forEach(i=>this.total+=i)}create(){if(typeof this.data==='object'&&this.data.length>0){this.computeValues();this.drawLineDiagramm();this.createDescription()}}drawLineDiagramm(){let barChartParent=document.getElementById('bar-chart-container');this.barChart=document.createElementNS(xmlns,'svg');this.barChart.id='bar-chart';this.barChart.classList.add('chart');console.log(this.barChart);const viewBox=[0,0,(15*this.data.length+5),110];this.barChart.setAttributeNS(null,'viewBox',`${viewBox[0]} ${viewBox[1]} ${viewBox[2]} ${viewBox[3]}`);console.log('SVG viewBox',viewBox);let linesG=document.createElementNS(xmlns,'g');const linesYCoordinates=[5,30,55,80,105];for(let i=0;i<=4;i+=1){let line=document.createElementNS(xmlns,'path');const xRight=viewBox[2]-2;line.setAttributeNS(null,'d',`M 2 ${linesYCoordinates[i]} L ${ xRight } ${linesYCoordinates[i]}`);line.setAttributeNS(null,'stroke-width','0.1');line.setAttributeNS(null,'stroke','#000');linesG.appendChild(line)}this.barChart.appendChild(linesG);let barsG=document.createElementNS(xmlns,'g');for(let i=0;i<this.data.length;i+=1){const percent=this.data[i]/this.total*100;console.log(i,percent);let bar=document.createElementNS(xmlns,'rect');bar.classList.add('bar',`color${ i }`);bar.setAttributeNS(null,'width','10');bar.setAttributeNS(null,'x',String(5+15*i));bar.setAttributeNS(null,'y',String(105-percent));bar.setAttributeNS(null,'height',String(percent));barsG.appendChild(bar)}this.barChart.appendChild(barsG);barChartParent.appendChild(this.barChart)}createDescription(){this.descriptionParagraphs=document.getElementsByClassName('description-p');for(let i=0;i<this.descriptionParagraphs.length;i+=1){const percent=Math.round((this.data[i]/this.total*100)*10)/10;this.descriptionParagraphs[i].innerHTML+=(String(percent)+'%')}}}
</script>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<div class="charts">
<div id="bar-chart-container"></div>
<div class="chart-description">
<div class="description-p"><span class="color color0"></span></div>
<div class="description-p"><span class="color color1"></span></div>
<div class="description-p"><span class="color color2"></span></div>
<div class="description-p"><span class="color color3"></span></div>
<div class="description-p"><span class="color color4"></span></div>
<div class="description-p"><span class="color color5"></span></div>
<div class="description-p"><span class="color color6"></span></div>
<div class="description-p"><span class="color color7"></span></div>
<div class="description-p"><span class="color color8"></span></div>
<div class="description-p"><span class="color color9"></span></div>
</div>
</div>
<script>
document.body.onload = () => {
let chart = new Chart([20, 50, 80, 200, 59])
chart.create()
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment