Interactive Charts & Dashboards
Filters
Chartify Pro
The provided HTML code creates an interactive charts and dashboard web page using Chart.js library. Here's an overview and a user guide:
### Overview:
- **Purpose:** The web page aims to display interactive charts and dashboards for data visualization.
- **Features:**
- Two chart containers displaying different types of charts (e.g., line chart, bar chart, pie chart, doughnut chart).
- Filters section for users to customize data display based on date range and product selection.
- Copy code button to copy the generated HTML code for further use in other projects.
### User Guide:
1. **Chart Selection:**
- Navigate to the chart containers displaying "Chart 1" and "Chart 2".
- Use the buttons within each chart container to switch between different chart types (e.g., line chart, bar chart, pie chart, doughnut chart). Clicking on a button updates the chart type dynamically.
2. **Filters:**
- In the "Filters" section, users can customize data display based on date range and product selection.
- Select a date range using the date input field labeled "Date Range".
- Choose a specific product or view data for all products using the dropdown labeled "Product".
3. **Interactive Charts:**
- Interact with the charts by hovering over data points to view tooltips with additional information.
- For certain chart types (e.g., pie chart, doughnut chart), clicking on segments may reveal more details or explode the segment.
4. **Copy Code:**
- To use the generated code in other projects, click on the "Copy Code" button. This action copies the entire HTML code of the web page to the clipboard.
- Paste the copied code into your HTML editor or project to embed the interactive charts and dashboard.
### Customization:
- **Data:** Replace the sample data provided in the JavaScript section with your actual data to visualize your dataset.
- **Styling:** Modify the CSS styles to customize the appearance of the charts, dashboard layout, and filter section to fit your design preferences.
- **Functionality:** Extend the JavaScript code to add more interactivity or integrate additional features based on your project requirements.
By following this guide, users can effectively interact with the charts and customize the dashboard according to their data visualization needs.
Can a users input their own data in to the Tool?
Yes, users can input their own data into the tool by modifying the `data1` and `data2` objects in the JavaScript section of the code.
For example, you can replace the sample data with your own data like this:
```javascript
const data1 = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Sales',
data: [/* Your sales data here */], // Replace this array with your own sales data
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
}]
};
const data2 = {
labels: ['Product A', 'Product B', 'Product C'],
datasets: [{
data: [/* Your product data here */], // Replace this array with your own product data
backgroundColor: [/* Your background colors here */], // Replace this array with your own background colors
hoverBackgroundColor: [/* Your hover background colors here */], // Replace this array with your own hover background colors
}]
};
```
You can customize the labels, datasets, and colors according to your own data structure and requirements. Once you've updated the data objects with your own data, the charts will display your data accordingly.
Copyright © 2024 Devanand Sah . All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
---
If you encounter any difficulty copying the code for any reason, please don't hesitate to reach out to us. We are more than happy to provide you with a copy of the code that you need. You can connect with our team via email at dev.sganews@gmail.com. We appreciate your interest in our work and look forward to assisting you.
Warm regards
Devanand Sah
---