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 🙂
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.
I hope you liked this tutorial if you want more tutorials please request a tutorial here.
Leave a Reply