Monthly Fuel Usage Bar Chart Visualization

This project visualizes the monthly fuel usage data for petrol and diesel in a bar chart using the amCharts library. The chart displays fuel consumption across 12 months with interactivity and responsiveness.

Technologies Used

• HTML: For structuring the webpage.
• CSS: For styling the chart and layout.
• JavaScript: For integrating the amCharts library and processing the JSON data.
• amCharts: A charting library used to visualize the data.
• http-server: A simple, zero-configuration command-line HTTP server for testing locally.

Project Features

• Interactive Bar Chart: Displays fuel usage per month, with separate bars for petrol and diesel.
• Responsive Design: The chart adjusts to fit different screen sizes, ensuring accessibility across devices.
• Hover Tooltips: Hover over each bar to see the precise fuel usage for petrol and diesel.
• Data-driven: The chart dynamically loads the fuel consumption data from a JSON object.

Data Format

The data for monthly fuel usage is provided in a JSON object structured as follows:

{
  "monthly_usage": [
    {
      "month": "January",
      "petrol_used_liters": 3,
      "diesel_used_liters": 5
    },
    ...
    {
      "month": "December",
      "petrol_used_liters": 4,
      "diesel_used_liters": 8
    }
  ]
}

Each month has two fields: petrol_used_liters and diesel_used_liters, representing the fuel consumption in liters for that particular month.

Installation and Setup

To run this project locally, follow these steps:

1. Install Dependencies

First, ensure you have Node.js installed. Then, install the necessary HTTP server globally using npm:

npm install -g http-server

2. Clone the Repository

Clone the project repository to your local machine:

git clone https://github.com/parthasarathy27/BarChart-Visualization-using-amCharts.git
cd BarChart-Visualization-using-amCharts

3. Run the Project Locally

Once you have the project set up, run the following command to start the HTTP server and view the project in your browser:

http-server

By default, the application will be accessible at http://localhost:8080.

Usage

The project loads the JSON data and dynamically renders a bar chart with two bars (petrol and diesel usage) for each month. You can hover over the bars to see the exact usage details.

• X-Axis: Displays the months (January to December).
• Y-Axis: Represents the fuel usage in liters.
• Bars: Each month has two bars: one for petrol usage and one for diesel usage.

Features and Interactivity

• Tooltips: Hovering over any bar will show a tooltip with the exact usage of petrol or diesel for that month.
• Responsive Design: The chart will automatically adjust its size based on the width of the screen, ensuring that it looks good on both desktop and mobile devices.
• Legend: The chart includes a legend showing which color corresponds to petrol and which to diesel.

Customization

The following customizations have been made to the chart:

• Bar Colors: Petrol bars are colored in a distinct color (e.g., light blue), while diesel bars are colored differently (e.g., green).
• Chart Labels: Labels for months and fuel types are visible and readable.
• Tooltip Configuration: Each tooltip displays the exact liters consumed for both petrol and diesel when hovering over the bars.

Folder Structure

/project-folder
    ├── index.html       # The main HTML file
    ├── style.css        # Styles for the chart and layout
    ├── script.js        # JavaScript file for integrating amCharts and rendering data
    ├── /node_modules    # Folder containing node modules (generated by npm install)
    └── data.json        # The JSON file containing monthly fuel usage data (optional)

Acknowledgments

• amCharts: For providing an easy-to-use charting library. amCharts Documentation
• Open Source Community: For creating tools and libraries that help in efficient web development.