Interactive Bar Chart (Compare Countries of the World) using JavaScript with Source Code

Introduction

This is a JavaScript Web Application project source code that will help you learn or understand how to create a chart report with options to dynamically update the chart data. This can be useful for some web applications feature such as analytical or statistical reports.

About the project

This project is about allowing the user to make a selection of 8 countries from a list of over 200 and then to visually compare these countries to each other. The countries can be compared from different aspects. For example, by population or by area per square mile or by GDP per capita, etc.

On the top of the web page, there is a row of 8 drop-down list-boxes. Each list box contains the same list of over 200 countries. The user can select one country from each of the 8 drop-down list boxes. Each list box has a different colour. The colour scheme corresponds to the colour scheme of the bars on the bar chart.

On the line below the list boxes, there are 6 radio buttons with descriptive names for each button. Only one of the 6 radio buttons can be selected at a time. The radio button selected determines the type of bar chart you want to see. For example, if you select the GDP radio button then you want to see 8 countries compared to each other by GDP per capita. The title of the bar chart changes depending on the radio button selected, to help the user to understand the meaning of the bar chart.

There is also a sort button. When you click it then the countries will be sorted into descending order and rearranged on the bar chart and in the order in which they appear in the 8 list boxes.

Summary

Features

• Multiple Data Selection X-Axis (Countries/Chart X-Axis data)
• Multiple Data Selection Y-Axis (Type of data to count/Chart Y-Axis data)
• Display Chart
• Dynamically Updates the Chart When changing X/Y Axis Data
• Chart Data Sorting From More to Less Count

The data in I used for this source code are stored in CSV File known as countries.csv in the data directory.

How to Run

1. Download and Extract the provided source code zip file. (download button is located below this article/content)
2. Copy the extracted folder and paste it into your "htdocs" directory for XAMPP and "www" for WAMP
3. Browse the project in a browser. i.e. http://localhost/sourcecodester/Compare%20Countries/

That's it! I hope this Javascript Project will help you with what you are looking for and for your future web application projects.

Developed at Kerry ETB, Tralee. Ireland.
Michael Finnegan, Saturday 6th July 2019

Enjoy :)