{"id":221,"date":"2016-05-23T17:03:20","date_gmt":"2016-05-23T17:03:20","guid":{"rendered":"http:\/\/muthu.co\/?p=221"},"modified":"2021-01-02T14:05:50","modified_gmt":"2021-01-02T14:05:50","slug":"creating-a-bar-chart-using-html-css-and-javascript","status":"publish","type":"post","link":"http:\/\/write.muthu.co\/creating-a-bar-chart-using-html-css-and-javascript\/","title":{"rendered":"Creating a Bar chart using HTML, CSS and Javascript &#8211; Part 1"},"content":{"rendered":"<p>Third party libraries like <a href=\"https:\/\/d3js.org\" target=\"_blank\" rel=\"noopener\">d3js<\/a>, <a href=\"http:\/\/www.highcharts.com\" target=\"_blank\" rel=\"noopener\">highcharts<\/a>, <a href=\"http:\/\/www.flotcharts.org\" target=\"_blank\" rel=\"noopener\">flotcharts<\/a>, <a href=\"http:\/\/morrisjs.github.io\/morris.js\" target=\"_blank\" rel=\"noopener\">morris<\/a>, <a href=\"http:\/\/raphaeljs.com\" target=\"_blank\" rel=\"noopener\">raphael <\/a>\u00a0are\u00a0all amazing no doubt but sometimes you just need something dead simple and minimal without too much fanciness. And if all you want is just a bar chart to show some data without having to include a library with a dozen charts then you better figure out something on your own. To help you get\u00a0started I made a small sample of a bar chart using only HTML, CSS and Javascript. The final chart looks like this<\/p>\n<p><a href=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/05\/academic-score-chart.png\" rel=\"attachment wp-att-224\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-224\" src=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/05\/academic-score-chart.png\" alt=\"simple bar chart\" width=\"589\" height=\"369\" srcset=\"http:\/\/write.muthu.co\/wp-content\/uploads\/2016\/05\/academic-score-chart.png 589w, http:\/\/write.muthu.co\/wp-content\/uploads\/2016\/05\/academic-score-chart-300x188.png 300w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><\/a><\/p>\n<h5>Some\u00a0notes about the chart to keep its design minimal<\/h5>\n<ol>\n<li>There are no x-axis or y-axis lines. I intentionally removed them as\u00a0they don&#8217;t really add much value to the chart. The data values are already available for the user above the bars and\u00a0x-axis does nothing more than being a line with a tick, so I removed them both.<\/li>\n<li>\u00a0There are no labels for the bars on the x-axis like we see in most bar charts. The problem with the labels in x-axis is that they are\u00a0usually\u00a0too long in real world use cases, and\u00a0end up overlapping the next label. The hack we usually use is to rotate\u00a0them so they don&#8217;t overlap but they end up making them look ugly and also take up extra space below. A better design\u00a0is to just let the legend\u00a0take care of it and not show any x-axis labels at all.<\/li>\n<\/ol>\n<p>Making a bar chart is the simplest of all and doesn&#8217;t need expert level knowledge of CSS, HTML or Javascript. The full source code is here:<\/p>\n<p>HTML:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div id=\"chart\"&gt;&lt;\/div&gt;<\/pre>\n<p>CSS: Contains colors taken from flatuicolors.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">html,\r\nbody {\r\n  font-family: Consolas, monaco, monospace;\r\n}\r\n\r\n#chart {\r\n  padding: 20px;\r\n}\r\n\r\ntable {\r\n  width: 100%;\r\n  height: 400px;\r\n}\r\n\r\n.charttitle {\r\n  text-align: center;\r\n}\r\n\r\n.bars td {\r\n  vertical-align: bottom;\r\n}\r\n\r\n.bars div:hover {\r\n  opacity: 0.6;\r\n}\r\n\r\n.legend {\r\n  vertical-align: bottom;\r\n  padding-left: 20px;\r\n  text-align: left;\r\n}\r\n\r\n.legbox {\r\n  display: block;\r\n  clear: both;\r\n}\r\n\r\n.xaxisname {\r\n  margin: 5px;\r\n  color: #fff;\r\n  font-size: 77%;\r\n  padding: 5px;\r\n  float: left;\r\n}\r\n\r\n\r\n\/*Flat UI colors*\/\r\n\r\n.one {\r\n  background: #16A085;\r\n}\r\n\r\n.two {\r\n  background: #2ECC71;\r\n}\r\n\r\n.three {\r\n  background: #27AE60;\r\n}\r\n\r\n.four {\r\n  background: #3498DB;\r\n}\r\n\r\n.five {\r\n  background: #2980B9;\r\n}\r\n\r\n.six {\r\n  background: #9B59B6;\r\n}\r\n\r\n.seven {\r\n  background: #8E44AD;\r\n}\r\n\r\n.eight {\r\n  background: #34495E;\r\n}\r\n\r\n.nine {\r\n  background: #2C3E50;\r\n}\r\n\r\n.ten {\r\n  background: #22313f;\r\n}\r\n\r\n.eleven {\r\n  background: #F1C40F;\r\n}\r\n\r\n.twelve {\r\n  background: #F39C12;\r\n}\r\n\r\n.thirteen {\r\n  background: #E67E22;\r\n}\r\n\r\n.fourteen {\r\n  background: #D35400;\r\n}\r\n\r\n.fifteen {\r\n  background: #E74C3C;\r\n}\r\n\r\n.sixteen {\r\n  background: #C0392B;\r\n}\r\n\r\n.seventeen {\r\n  background: #ECF0F1;\r\n}\r\n\r\n.seventeen.clouds {\r\n  color: #BDC3C7;\r\n}\r\n\r\n.eighteen {\r\n  background: #BDC3C7;\r\n}\r\n\r\n.nineteen {\r\n  background: #95A5A6;\r\n}\r\n\r\n.twenty {\r\n  background: #7F8C8D;\r\n}<\/pre>\n<p>Javascript: With sample data<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/chart data\r\nvar chartjson = {\r\n  \"title\": \"Students Academic Scores\",\r\n  \"data\": [{\r\n    \"name\": \"Kerry\",\r\n    \"score\": 20\r\n  }, {\r\n    \"name\": \"Teegan\",\r\n    \"score\": 73\r\n  }, {\r\n    \"name\": \"Jamalia\",\r\n    \"score\": 20\r\n  }, {\r\n    \"name\": \"Quincy\",\r\n    \"score\": 89\r\n  }, {\r\n    \"name\": \"Darryl\",\r\n    \"score\": 24\r\n  }, {\r\n    \"name\": \"Jescie\",\r\n    \"score\": 86\r\n  }, {\r\n    \"name\": \"Quemby\",\r\n    \"score\": 96\r\n  }, {\r\n    \"name\": \"McKenzie\",\r\n    \"score\": 71\r\n  }],\r\n  \"xtitle\": \"Secured Marks\",\r\n  \"ytitle\": \"Marks\",\r\n  \"ymax\": 100,\r\n  \"ykey\": 'score',\r\n  \"xkey\": \"name\",\r\n  \"prefix\": \"%\"\r\n}\r\n\r\n\/\/chart colors\r\nvar colors = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen','fourteen'];\r\n\r\n\/\/constants\r\nvar TROW = 'tr',\r\n  TDATA = 'td';\r\n\r\nvar chart = document.createElement('div');\r\n\/\/create the chart canvas\r\nvar barchart = document.createElement('table');\r\n\/\/create the title row\r\nvar titlerow = document.createElement(TROW);\r\n\/\/create the title data\r\nvar titledata = document.createElement(TDATA);\r\n\/\/make the colspan to number of records\r\ntitledata.setAttribute('colspan', chartjson.data.length+1);\r\ntitledata.setAttribute('class', 'charttitle');\r\ntitledata.innerText = chartjson.title;\r\ntitlerow.appendChild(titledata);\r\nbarchart.appendChild(titlerow);\r\nchart.appendChild(barchart);\r\n\r\n\/\/create the bar row\r\nvar barrow = document.createElement(TROW);\r\n\r\n\/\/lets add data to the chart\r\nfor (var i = 0; i &lt; chartjson.data.length; i++) {\r\n  barrow.setAttribute('class', 'bars');\r\n  var prefix = chartjson.prefix || '';\r\n  \/\/create the bar data\r\n  var bardata = document.createElement(TDATA);\r\n  var bar = document.createElement('div');\r\n  bar.setAttribute('class', colors[i]);\r\n  bar.style.height = chartjson.data[i][chartjson.ykey] + prefix;\r\n  bardata.innerText = chartjson.data[i][chartjson.ykey] + prefix;\r\n  bardata.appendChild(bar);\r\n  barrow.appendChild(bardata);\r\n}\r\n\r\n\/\/create legends\r\nvar legendrow = document.createElement(TROW);\r\nvar legend = document.createElement(TDATA);\r\nlegend.setAttribute('class','legend');\r\nlegend.setAttribute('colspan', chartjson.data.length);\r\n\r\n\/\/add legend data\r\nfor (var i = 0; i &lt; chartjson.data.length; i++) {\r\n   var legbox = document.createElement('span');\r\n   legbox.setAttribute('class','legbox');\r\n   var barname = document.createElement('span');\r\n   barname.setAttribute('class',colors[i] + ' xaxisname');\r\n   var bartext = document.createElement('span');\r\n   bartext.innerText = chartjson.data[i][chartjson.xkey];\r\n   legbox.appendChild(barname);\r\n   legbox.appendChild(bartext);\r\n   legend.appendChild(legbox);\r\n}\r\nbarrow.appendChild(legend);\r\nbarchart.appendChild(barrow);\r\nbarchart.appendChild(legendrow);\r\nchart.appendChild(barchart);\r\ndocument.getElementById('chart').innerHTML = chart.outerHTML;<\/pre>\n<p>You can see the preview here:\u00a0<a href=\"http:\/\/codepen.io\/Muthukrishnan\/pen\/vGoZVz\" target=\"_blank\" rel=\"noopener\">http:\/\/codepen.io\/Muthukrishnan\/pen\/vGoZVz<\/a><\/p>\n<p>This code is just a proof of concept of what is possible and is not production ready. You can use this idea to build your own chart. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Third party libraries like d3js, highcharts, flotcharts, morris, raphael \u00a0are\u00a0all amazing no doubt but sometimes you just need something dead simple and minimal without too much fanciness. And if all you want is just a bar chart to show some data without having to include a library with a dozen charts then you better figure [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[52],"_links":{"self":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/221"}],"collection":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":1,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"predecessor-version":[{"id":1649,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/221\/revisions\/1649"}],"wp:attachment":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}