• Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
How to Create Bar Chart Race in JavaScript
Home
JavaScript

How to Create Bar Chart Race in JavaScript

June 5th, 2022 Huzoor Bux JavaScript 0 comments

Facebook Twitter Google+ LinkedIn Pinterest

In this article, I am going to show you that How to Create Bar Chart Race in JavaScript very easily. You must watch many bar chart data visualization videos in this tutorial you can make data visualization with bar chart race. I have found this code snippet on codepen.io by Carlos and chart created by amCharts Library.

What if you show this type of chart as your companies sales reports and profits your boss might love it, just kidding 🙂

DEMO
DOWNLOAD CODE

amCharts Libraries needs to be included:

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

Charts Data for graphs visualization:


var allData = {
      "2014": [{
          "languages": "Objective-C",
          "PUSHES": 1.862
        },
        {
          "languages": "Go",
          "PUSHES": 1.973
        },
        {
          "languages": "Shell",
          "PUSHES": 2.813
        },

        {
          "languages": "C#",
          "PUSHES": 2.849
        },
        {
          "languages": "C",
          "PUSHES": 6.083
        },
        {
          "languages": "C++",
          "PUSHES": 7.372
        },
        {
          "languages": "Ruby",
          "PUSHES": 7.948
        },
        {
          "languages": "PHP",
          "PUSHES": 9.956
        },
        {
          "languages": "Java",
          "PUSHES": 12.396
        },
        {
          "languages": "Python",
          "PUSHES": 14.054
        },
        {
          "languages": "JavaScript",
          "PUSHES": 21.636
        },
        {
          "languages": "TypeScript",
          "PUSHES": 0.359
        }
      ],
      "2021": [{
          "languages": "Objective-C",
          "PUSHES": 0.328

        },
        {
          "languages": "Go",
          "PUSHES": 4.639

        },
        {
          "languages": "Shell",
          "PUSHES": 4.564

        },

        {
          "languages": "C#",
          "PUSHES": 2.654

        },
        {
          "languages": "C",
          "PUSHES": 3.463

        },
        {
          "languages": "C++",
          "PUSHES": 8.222

        },
        {
          "languages": "Ruby",
          "PUSHES": 4.051

        },
        {
          "languages": "PHP",
          "PUSHES": 5.323

        },
        {
          "languages": "Java",
          "PUSHES": 10.498

        },
        {
          "languages": "Python",
          "PUSHES": 14.183

        },
        {
          "languages": "JavaScript",
          "PUSHES": 28.653

        },
        {
          "languages": "TypeScript",
          "PUSHES": 4.94

        }
      ]
    }

Complete javascript Code:

    am4core.useTheme(am4themes_animated);
    am4core.globalAdapter.addAll(2)
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.padding(40, 40, 40, 40);
    chart.numberFormatter.numberFormat = "#,###.";
    var label = chart.plotContainer.createChild(am4core.Label);
    label.x = am4core.percent(97);
    label.y = am4core.percent(95);
    label.horizontalCenter = "right";
    label.verticalCenter = "middle";
    label.dx = -15;
    label.fontSize = 50;

    var playButton = chart.plotContainer.createChild(am4core.PlayButton);
    playButton.x = am4core.percent(97);
    playButton.y = am4core.percent(95);
    playButton.dy = -2;
    playButton.verticalCenter = "middle";
    playButton.events.on("toggled", function (event) {
      if (event.target.isActive) {
        play();
      } else {
        stop();
      }
    })

    var stepDuration = 4000;

    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.dataFields.category = "languages";
    categoryAxis.renderer.minGridDistance = 1;
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.disabled = false;

    var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;
    valueAxis.rangeChangeEasing = am4core.ease.linear;
    valueAxis.rangeChangeDuration = stepDuration;
    valueAxis.extraMax = 0.1;

    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryY = "languages";
    series.dataFields.valueX = "PUSHES";
    series.tooltipText = "{valueX.value}"
    series.columns.template.strokeOpacity = 0;
    series.columns.template.column.cornerRadiusBottomRight = 5;
    series.columns.maxColumns = 1
    series.columns.template.column.cornerRadiusTopRight = 5;
    series.interpolationDuration = stepDuration;
    series.interpolationEasing = am4core.ease.linear;
    var labelBullet = series.bullets.push(new am4charts.LabelBullet())
    labelBullet.label.horizontalCenter = "right";
    labelBullet.label.text = "{values.valueX.workingValue}";
    labelBullet.label.textAlign = "end";
    labelBullet.label.dx = -10;
    labelBullet.label.maxColumns = 1;
    chart.zoomOutButton.disabled = true;
    series.columns.template.adapter.add("fill", function (fill, target) {
      return chart.colors.getIndex(target.dataItem.index);
    });
    var year = 2014;
    label.text = year.toString();
    var interval;
    function play() {
      interval = setInterval(function () {
        nextYear();
      }, stepDuration)
      nextYear();
    }
    function stop() {
      if (interval) {
        clearInterval(interval);
      }
    }
    function nextYear() {
      year++

      if (year > 2021) {
        year = 2014;
        stop();
      }
      var newData = allData[year];
      var itemsWithNonZero = 0;
      for (var i = 0; i < chart.data.length; i++) { chart.data[i].PUSHES = (newData[i].PUSHES * 100000); if (chart.data[i].PUSHES > 0) {
          itemsWithNonZero++;
        }
      }
      if (itemsWithNonZero > 25) {
        itemsWithNonZero = 25
      }
      if (year == 2014) {
        series.interpolationDuration = stepDuration / 8;
        valueAxis.rangeChangeDuration = stepDuration / 8;
      } else {
        series.interpolationDuration = stepDuration;
        valueAxis.rangeChangeDuration = stepDuration;
      }

      chart.invalidateRawData();
      label.text = year.toString();

      categoryAxis.zoom({
        start: 0,
        end: itemsWithNonZero / categoryAxis.dataItems.length
      });
    }

    categoryAxis.sortBySeries = series;
    var allData = {} // you can add data here.

    chart.data = JSON.parse(JSON.stringify(allData[year]));
    categoryAxis.zoom({
      start: 0,
      end: 1 / chart.data.length
    });

    series.events.on("inited", function () {
      setTimeout(function () {
        playButton.isActive = true; // this starts interval
      }, 1000)
    })

Make your charts and share us in the comments box.

DEMO
DOWNLOAD CODE

I hope you liked this tutorial if you want more tutorials please request a tutorial here.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

  • Tags
  • Chart
  • data visualisation
  • How to
  • javascript
Facebook Twitter Google+ LinkedIn Pinterest
Next article Top 7 Websites To Get Your First Paid Internship
Previous article 9 Tricks and Tips to Search Google Like a Pro

Huzoor Bux

I am a PHP Developer

Related Posts

How to create a screen recorder in JavaScript JavaScript
June 26th, 2022

How to create a screen recorder in JavaScript

Drag and drop multiple file upload using jQuery, Ajax, and PHP JavaScript
February 17th, 2022

Drag and drop multiple file upload using jQuery, Ajax, and PHP

Const vs. Let vs. Var in Javascript. Which one should you use? JavaScript
February 14th, 2022

Const vs. Let vs. Var in Javascript. Which one should you use?

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Advertisement
    Like us
    Recent Posts
    • How to Create PDFs from HTML with PHP and Dompdf
    • How to create a screen recorder in JavaScript
    • Best 10 Programming Languages that will rule in 2022
    • Top 7 Websites To Get Your First Paid Internship
    • How to Create Bar Chart Race in JavaScript
    Categories
    • API
    • Bootstrap
    • Bot
    • CSS
    • CSS 3
    • Database
    • Designing
    • Framework
    • Guide
    • HTML
    • HTML 5
    • JavaScript
    • jQuery
    • MySQL
    • Node.js
    • oAuth
    • Payment
    • PHP
    • Python
    • Social
    • Tips
    • WordPress
    Weekly Tags
    • PHP
    • How to
    • javascript
    • api
    • MYSQL
    • jQuery
    • HTML to PDF
    • PHP Basics
    • Programming Habits
    • HTML5
    • About
    • Privacy Policy
    • Back to top
    © PHPLift 2021. All rights reserved.