https://github.com/parthasarathy27/barchart-visualization-using-amcharts
This project visualizes monthly fuel usage data (petrol and diesel) using a responsive bar chart built with the amCharts library. The chart displays fuel consumption across 12 months, with separate bars for petrol and diesel for each month.
https://github.com/parthasarathy27/barchart-visualization-using-amcharts
amcharts amcharts-js-charts data-visualization html-css-javascript json visualization
Last synced: 2 months ago
JSON representation
This project visualizes monthly fuel usage data (petrol and diesel) using a responsive bar chart built with the amCharts library. The chart displays fuel consumption across 12 months, with separate bars for petrol and diesel for each month.
- Host: GitHub
- URL: https://github.com/parthasarathy27/barchart-visualization-using-amcharts
- Owner: parthasarathy27
- Created: 2025-02-05T04:49:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-05T05:04:09.000Z (over 1 year ago)
- Last Synced: 2025-03-30T19:31:41.057Z (about 1 year ago)
- Topics: amcharts, amcharts-js-charts, data-visualization, html-css-javascript, json, visualization
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```json
{
"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](https://nodejs.org/) installed. Then, install the necessary HTTP server globally using npm:
```bash
npm install -g http-server
```
### 2. Clone the Repository
Clone the project repository to your local machine:
```bash
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:
```bash
http-server
```
By default, the application will be accessible at [http://localhost:8080](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](https://www.amcharts.com/docs/)
- **Open Source Community**: For creating tools and libraries that help in efficient web development.