{"id":245,"date":"2016-05-27T09:41:10","date_gmt":"2016-05-27T09:41:10","guid":{"rendered":"http:\/\/muthu.co\/?p=245"},"modified":"2021-01-02T14:05:50","modified_gmt":"2021-01-02T14:05:50","slug":"creating-a-bar-chart-using-html-css-and-javascript-part-2","status":"publish","type":"post","link":"http:\/\/write.muthu.co\/creating-a-bar-chart-using-html-css-and-javascript-part-2\/","title":{"rendered":"Creating a Bar chart using HTML, CSS and Javascript \u2013 Part 2"},"content":{"rendered":"

This is in continuation of my\u00a0previous post<\/a>\u00a0about creating Bar chart, we will try to add some more features to our chart to make it look more\u00a0appealing with minimal changes. List of things we will add in this version of chart.<\/p>\n

    \n
  1. x-axis and y-axis labels.<\/li>\n
  2. y-axis line<\/li>\n
  3. Animate the bars<\/li>\n<\/ol>\n

    \"Screenshot<\/a><\/p>\n

    We will work on the same code written from\u00a0our previous bar\u00a0chart and make the modifications. You can check out the finished version here<\/a><\/p>\n

    Rotate Effect:<\/strong>\u00a0As you can see in the snapshot above that the y axis title is rotated and is aligned perfectly with the y-axis line. You can achieve that using CSS3 transformations. We are rotating the text by 270 degree.<\/p>\n

    .ytitle span {\r\n  transform: rotate(270deg);\r\n  -webkit-transform: rotate(270deg);\r\n  -moz-transform: rotate(270deg);\r\n  -o-transform: rotate(270deg);\r\n  -ms-transform: rotate(270deg);\r\n  writing-mode: lr-tb;\r\n  display: block;\r\n}<\/pre>\n
    Bar Animation:\u00a0<\/strong>If we set the height while creating the chart we may not be able to see the animation, so we need to set the heights after the chart is rendered. This way we can use the transition effect from the chart.\u00a0The below CSS takes care of our animation.<\/p>\n
    .bars div {\r\n  height:0%;\r\n  -webkit-transition: 0.4s ease;\r\n  -moz-transition: 0.4s ease;\r\n  -ms-transition: 0.4s ease;\r\n  -o-transition: 0.4s ease;\r\n  transition: 0.4s ease;\r\n  -webkit-transition: height 0.5s;\r\n  -moz-transition: height 0.5s;\r\n  -ms-transition: height 0.5s;\r\n  -o-transition: height 0.5s;\r\n  transition: height 0.5s;\r\n}<\/pre>\n
    The javascript used to set the values on the bar.<\/p>\n
    chart.appendChild(barchart);\r\n\/\/our chart is rendered\r\ndocument.getElementById('chart').innerHTML = chart.outerHTML;\r\n\r\n\/\/now we set the bar heights\r\nsetTimeout(function(){ \r\n  for (var i = 0; i < chartjson.data.length; i++) {\r\n    var bar = document.getElementById('bar'+i);\r\n    bar.style.height = chartjson.data[i][chartjson.ykey] + prefix;\r\n  }\r\n}, 300);<\/pre>\n
    I have used setTimeout<\/code> to get our desired animation. You may\u00a0use jquery animate\u00a0to achieve the same\u00a0effect but for a simple animation, I guess you don’t want to\u00a0include a massive jquery library. In my\u00a0next post we\u00a0will try to make a directive for our chart\u00a0which we will\u00a0reuse to show multiple bar charts on the same page.<\/p>\n
     <\/p>\n
      <\/p>\n","protected":false},"excerpt":{"rendered":"
    This is in continuation of my\u00a0previous post\u00a0about creating Bar chart, we will try to add some more features to our chart to make it look more\u00a0appealing with minimal changes. List of things we will add in this version of chart. x-axis and y-axis labels. y-axis line Animate the bars We will work on the same […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,2],"tags":[52,48],"_links":{"self":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/245"}],"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=245"}],"version-history":[{"count":1,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/245\/revisions"}],"predecessor-version":[{"id":1647,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/245\/revisions\/1647"}],"wp:attachment":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/media?parent=245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/categories?post=245"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/tags?post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}