{"id":25030262,"url":"https://github.com/parthasarathy27/barchart-visualization-using-amcharts","last_synced_at":"2026-04-12T22:42:00.874Z","repository":{"id":275891021,"uuid":"927517027","full_name":"parthasarathy27/BarChart-Visualization-using-amCharts","owner":"parthasarathy27","description":"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.","archived":false,"fork":false,"pushed_at":"2025-02-05T05:04:09.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T19:31:41.057Z","etag":null,"topics":["amcharts","amcharts-js-charts","data-visualization","html-css-javascript","json","visualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/parthasarathy27.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-05T04:49:28.000Z","updated_at":"2025-02-05T05:06:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"fe6c02ed-686e-4ae1-a511-783e11e36b12","html_url":"https://github.com/parthasarathy27/BarChart-Visualization-using-amCharts","commit_stats":null,"previous_names":["parthasarathy27/barchart-visualization-using-amcharts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/parthasarathy27/BarChart-Visualization-using-amCharts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parthasarathy27%2FBarChart-Visualization-using-amCharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parthasarathy27%2FBarChart-Visualization-using-amCharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parthasarathy27%2FBarChart-Visualization-using-amCharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parthasarathy27%2FBarChart-Visualization-using-amCharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/parthasarathy27","download_url":"https://codeload.github.com/parthasarathy27/BarChart-Visualization-using-amCharts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parthasarathy27%2FBarChart-Visualization-using-amCharts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270586229,"owners_count":24611315,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-15T02:00:12.559Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amcharts","amcharts-js-charts","data-visualization","html-css-javascript","json","visualization"],"created_at":"2025-02-05T21:58:25.579Z","updated_at":"2026-04-12T22:41:55.832Z","avatar_url":"https://github.com/parthasarathy27.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Monthly Fuel Usage Bar Chart Visualization\n\nThis 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.\n\n## Technologies Used\n- **HTML**: For structuring the webpage.\n- **CSS**: For styling the chart and layout.\n- **JavaScript**: For integrating the amCharts library and processing the JSON data.\n- **amCharts**: A charting library used to visualize the data.\n- **http-server**: A simple, zero-configuration command-line HTTP server for testing locally.\n\n## Project Features\n- **Interactive Bar Chart**: Displays fuel usage per month, with separate bars for petrol and diesel.\n- **Responsive Design**: The chart adjusts to fit different screen sizes, ensuring accessibility across devices.\n- **Hover Tooltips**: Hover over each bar to see the precise fuel usage for petrol and diesel.\n- **Data-driven**: The chart dynamically loads the fuel consumption data from a JSON object.\n\n## Data Format\nThe data for monthly fuel usage is provided in a JSON object structured as follows:\n\n```json\n{\n  \"monthly_usage\": [\n    {\n      \"month\": \"January\",\n      \"petrol_used_liters\": 3,\n      \"diesel_used_liters\": 5\n    },\n    ...\n    {\n      \"month\": \"December\",\n      \"petrol_used_liters\": 4,\n      \"diesel_used_liters\": 8\n    }\n  ]\n}\n```\n\nEach month has two fields: `petrol_used_liters` and `diesel_used_liters`, representing the fuel consumption in liters for that particular month.\n\n## Installation and Setup\n\nTo run this project locally, follow these steps:\n\n### 1. Install Dependencies\n\nFirst, ensure you have [Node.js](https://nodejs.org/) installed. Then, install the necessary HTTP server globally using npm:\n\n```bash\nnpm install -g http-server\n```\n\n### 2. Clone the Repository\n\nClone the project repository to your local machine:\n\n```bash\ngit clone https://github.com/parthasarathy27/BarChart-Visualization-using-amCharts.git\ncd BarChart-Visualization-using-amCharts\n```\n\n### 3. Run the Project Locally\n\nOnce you have the project set up, run the following command to start the HTTP server and view the project in your browser:\n\n```bash\nhttp-server\n```\n\nBy default, the application will be accessible at [http://localhost:8080](http://localhost:8080).\n\n## Usage\n\nThe 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.\n\n- **X-Axis**: Displays the months (January to December).\n- **Y-Axis**: Represents the fuel usage in liters.\n- **Bars**: Each month has two bars: one for petrol usage and one for diesel usage.\n\n## Features and Interactivity\n- **Tooltips**: Hovering over any bar will show a tooltip with the exact usage of petrol or diesel for that month.\n- **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.\n- **Legend**: The chart includes a legend showing which color corresponds to petrol and which to diesel.\n\n## Customization\n\nThe following customizations have been made to the chart:\n\n- **Bar Colors**: Petrol bars are colored in a distinct color (e.g., light blue), while diesel bars are colored differently (e.g., green).\n- **Chart Labels**: Labels for months and fuel types are visible and readable.\n- **Tooltip Configuration**: Each tooltip displays the exact liters consumed for both petrol and diesel when hovering over the bars.\n\n## Folder Structure\n\n```\n/project-folder\n    ├── index.html       # The main HTML file\n    ├── style.css        # Styles for the chart and layout\n    ├── script.js        # JavaScript file for integrating amCharts and rendering data\n    ├── /node_modules    # Folder containing node modules (generated by npm install)\n    └── data.json        # The JSON file containing monthly fuel usage data (optional)\n```\n\n## Acknowledgments\n\n- **amCharts**: For providing an easy-to-use charting library. [amCharts Documentation](https://www.amcharts.com/docs/)\n- **Open Source Community**: For creating tools and libraries that help in efficient web development.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparthasarathy27%2Fbarchart-visualization-using-amcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparthasarathy27%2Fbarchart-visualization-using-amcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparthasarathy27%2Fbarchart-visualization-using-amcharts/lists"}