This guide explains how to integrate the GridStack and ChartJS extensions within Wappler to create a dynamic and interactive dashboard. By combining these extensions, you can build customizable grid layouts that contain various Chart.js graphs.
Overview
GridStack: Provides a responsive and draggable grid layout system.
ChartJS: Integrates Chart.js charts for data visualization.
By using these extensions together, you can dynamically add, remove, and customize grid items containing various types of graphs.
Installation
1. Install GridStack and ChartJS Extensions
Follow the installation instructions provided in each extension’s README file to copy the necessary files into your Wappler project's extensions folder.
Add the GridStack and ChartJS components in the Wappler App Structure panel.
Usage
1. Adding GridStack and ChartJS Components
To set up a grid layout with charts, include both the GridStack and GraphJS components in your HTML:
Not using ChartsJS - I have various KPIs and table-type data, on a dashboard page, relevant to school staff which they can arrange how they wish to suit the data of each element.
I've also set it to allow them to save multiple dashboards so they can switch between useful views as their daily priorities shift. At the start of the day they might be managing attendance but later working on their admissions pipeline may be more important:
Hi Keith,
I have some permissions-based logic as not all widgets should be available for all users but a simple eaxmple:
The types of dash widget are stored in the DB with a name, permission etc.
There is a table of dashboards created by users (with the name they give it, status - active/archived and a JSON for each of the widgets to be included on the page):
As you can see below, the dashboard_saveitems json column contains an array of the widgets to be included. When the item is resized or repositioned, as SC call is made to update the json field with the new width (w), x postion, y postion. On dragstop or resizestop I call the GS save() method and use JS to update a Wappler variable with the resultant data. The onupdated event of that variable kicks in which triggers a form submission (SC Form repeating the children array from the save) that sends the data to an SC API and updates the json field.
The dashboard is a grid-stack div repeating children for each of the items from the json field. Inside there are a set of conditional regions set to look at the id of the widget and show if it matches - the relevant widget is built within each condition block.
We adopted GridStack a while back and love it! Would definitely have used this Extension. I think any UI without a User definable layout is lacking in functionality. Like @bpj we allow our Users to store as many 'Dashboard' configurations as they want, and can flip between them easily based on that days assignments etc. Great for separate mobile and desktop layouts (although everything is fully responsive it is still possible to save a layout if the User wishes to).