Using GridStack and ChartJS Extensions Together in Wappler

Wappler Extensions How To
1

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

  1. Follow the installation instructions provided in each extension’s README file to copy the necessary files into your Wappler project's extensions folder.
  2. 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:

<dmx-gridstack id="dashboardGrid" columns="12" cell-height="100px" margin="10px">
    <div class="grid-stack-item" id="widget1" gs-w="4" gs-h="2" gs-x="0" gs-y="0">
        <div class="grid-stack-item-content">
            <dmx-chartjs
                id="chart1"
                type="bar"
                dmx-bind:data="serverConnect1.data.chartData"
                dmx-bind:labels="['January', 'February', 'March']"
            ></dmx-chartjs>
        </div>
    </div>
</dmx-gridstack>

2. Adding and Removing Widgets Dynamically

Use Wappler’s dynamic events to add or remove grid items with charts:

Adding a Chart

dmx-on:click="dashboardGrid.addWidgetWithChart({
    w: 4,
    h: 2,
    content: '<canvas></canvas>',
    chartConfig: {
        type: 'line',
        data: {
            labels: ['April', 'May', 'June'],
            datasets: [{
                label: 'Sales',
                data: [65, 59, 80]
            }]
        },
        options: {
            responsive: true
        }
    }
})"

Removing a Chart

dmx-on:click="dashboardGrid.removeWidgetById('widget1')"
9 Likes
2

This looks really exciting, thanks for sharing.

1 Like
3

That’s amazing @kfawcett !

Will this work for a PHP based design, or only node?

4

Only node.

1 Like
5

This looks great - Can you build configurable dashboards with integrated tabs, tables, rows, etc.. within Wappler - or chartsjs only ?

6

You can build configurable dashboards which are not limited to chartjs using gridstack.

7

that's very useful - any examples out there to review ?

8

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:

1 Like
9

@bpj, I want to create savable dashboards as well. Any insight into how you're saving them and selecting items to add?

10

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):
image

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.

image
image1918Ă—196 82.4 KB

The w,x etc. get added as dynamic properties to the parent container used by GS e.g.

<div class="grid-stack" is="dmx-repeat" id="dash2items" dmx-bind:repeat="var_dashitems.value.q_mydashitems" key="dashboard_itemid">
     <div class="grid-stack-item" gs-w="6" dmx-bind:gs-w="w" dmx-bind:gs-x="x" dmx-bind:gs-id="dashboard_itemid">

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.

<div class="row" is="dmx-if" id="cond_template" dmx-bind:condition="dashboard_itemid == 1'">
	<div class="col-12" dmx-show="!sc_template.data&&sc_template.state.executing">
		<p class="text-center text-secondary mb-0">Loading data&nbsp;<i class="fal fa-spinner fa-spin"></i></p>
	</div>
	<div class="col align-self-center text-secondary py-2 text-center">
		Widget content here
	</div>
</div>
<div class="row" is="dmx-if" id="cond_template2" dmx-bind:condition="dashboard_itemid == 2'">
	<div class="col-12" dmx-show="!sc_template2.data&&sc_template2.state.executing">
		<p class="text-center text-secondary mb-0">Loading data&nbsp;<i class="fal fa-spinner fa-spin"></i></p>
	</div>
	<div class="col align-self-center text-secondary py-2 text-center">
		A second widget content here
	</div>
</div>

I hope that helps

2 Likes
11

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).

2 Likes