A fully responsive, single-file HTML dashboard template designed for data visualization. Built with vanilla JavaScript and the powerful ECharts library, it features a clean, professional design, seamless light/dark mode switching, and uses a mock data object for easy front-end development and customization.
This template is perfect for developers who need a polished, functional, and platform-agnostic dashboard to showcase data, either as a standalone project or as a starting point for integration with any backend API.
Platform-Agnostic: Contains no proprietary code (e.g., Zoho) and can be connected to any backend API.
Fully Responsive: The grid layout fluidly adapts from multi-column desktop views to a single-column layout on mobile.
Light & Dark Modes: A clean, persistent theme toggle allows users to switch between light and dark modes, with all components, including charts, adapting instantly.
ECharts Integration: Includes three different types of beautiful, interactive charts (line, stacked bar, and simple bar) powered by Apache ECharts.
No Backend Required: The template uses an internal mockData object, allowing it to be fully functional for demonstration or front-end development without needing a live server.
Easy to Customize: Built as a single, self-contained HTML file. The code is clearly commented, making it simple to modify data, styling, and API connections.
- Using with Mock Data The template works perfectly out of the box. Simply open the index.html file in a browser. To change the data displayed on the dashboard, modify the mockData object at the top of the <script> section.
const mockData = { kpis: { totalRevenue: { value: 4578444, subtext: "From 12 projects" }, // ... more KPI data }, charts: { monthlyPerformance: { sent: [120, 90, 130], // ... more chart data } } };
- Connecting to a Real API To connect the dashboard to your own live data source, follow these steps:
Find the loadDashboardData function in the script.
Delete or comment out the setTimeout block containing the mock data logic.
Uncomment the example fetch call and replace 'https://your-api.com/dashboard-data' with the URL of your own API endpoint.
Ensure your API returns a JSON object with a structure similar to the mockData object.
function loadDashboardData() { // TODO: Replace this mock logic with your actual API fetch call. fetch('https://your-api.com/dashboard-data') .then(response => response.json()) .then(data => { populateKPIs(data.kpis); populateStatusBreakdown(data.statusBreakdown); redrawAllCharts(data); }) .catch(error => { console.error("API fetch failed:", error); document.getElementById("error-message").style.display = "block"; }); }
- (Optional) Using as a Zoho Creator Widget While the template is now platform-agnostic, it can still be easily adapted for Zoho Creator. The included widget-config-example.json file can be renamed to plugin-manifest.json and used for widget setup. You would then replace the fetch logic with Zoho's ZOHO.CREATOR.DATA.invokeCustomApi function as needed.
This project is open-source and available under the MIT License. You are free to use, modify, and distribute it for any purpose.