Dashboard: Drag & Drop Visuals and Export using JavaScript Libraries

Recently, I published an article on various JavaScript libraries for Dashboards. In this article, I am going to demonstrate how we can create a dashboard with drag and drop visuals and export using JavaScript.

I am going to use Gridster library to create a dashboard. I have used this library in my projects and found it easy to use and flexible.

There are many ways of presenting data. If your software product is data-intensive, then you will need to find a way to make that data easy to visualize. That’s where the visualizations come in – such as presenting data in the form of charts, graphs and so on. I will use Chart.js to create charts, which is a simple and flexible JavaScript charting library.

To export the dashboard, I will use jsPDF which is a client-side JavaScript library. It lets you export the static image of the web page into a PDF file. Additionally, I will need to use html2canvas to get charts to be printed in PDF. But if you want to print simple images or data, jsPDF alone is sufficient.

Without further ado, let’s get into coding!

Creating Dashboard

Add Gridster dependency by downloading from GitHub or just include source from cdnjs links. Since Gridster is a jQuery plugin, you will to include jQuery library as well!

First, let’s add the following code snippet within <body>.

< div class="gridster" >

< button id="export">Export< /button>

<ul>

<li data-row="1" data-col="1" data-sizex="5" data-sizey="6">

<canvas id="chart1">< /canvas>

</li>

<li data-row="1" data-col="5" data-sizex="5" data-sizey="6">

< canvas id="chart2">< /canvas>

</li>

<li data-row="7" data-col="1" data-sizex="5" data-sizey="5">

< canvas id="chart3" >< /canvas>

</li>

<li data-row="7" data-col="6" data-sizex="5" data-sizey="5">

<canvas id="chart4">< /canvas>

</li>

</ul>

</div>

I have defined canvas elements and <button>, which we will look at them later in this article. Gridster is instantiated as follows.

//instantiate gridster

$(".gridster > ul").gridster({

widget_margins: [8, 8],

widget_base_dimensions: [100, 55]

});

Here, the <li> elements will be converted into widgets. So far, we will only get empty widgets. Let’s put some data into our widgets.

Creating Charts

We are going to use previously defined canvas elements to create charts. Let’s look at the implementation for the first widget.

First, add dependencies by downloading the latest version of Chart.js on GitHub or just use these Chart.js CDN links. Here is our JavaScript code.

var canvas = document.getElementById(“chart1”).getContext(“2d”);

new Chart(canvas, {

type: 'line',

data: {

labels: ["A", "B", "C", "O", "G", "W", "S"],

datasets: [{

label: ‘Company A’,

data: [12, 19, 3, 17, 6, 3, 7],

backgroundColor: "rgba(182, 213, 139, 0.5)"

}, {

label: ' Company B',

data: [2, 29, 5, 5, 2, 3, 10],

backgroundColor: "rgba(182, 133, 139, 1)"

}]

}

});

Here, the option type is important as it indicates the type of chart that we want to create. Our widget would be as follows.

Screen Shot 2017-04-02 at 19.18.36

For the implementation of remaining widgets, refer the source code on GitHub.

Export

Let’s look at the export feature. Include references to jsPdf and html2canvas in HTML. We will attach click event to <button> and instantiate jsPdf.  Here goes our code:

var doc = new jsPDF();

doc.addHTML($("ul"), 15, 15, {

'background': '#fff',

}, function() {

doc.save('dashboard.pdf');

});

Here, we have specified the element <ul> within addHTML(), that means we want to print only contents of <ul> in PDF file.

The screenshot of the dashboard is as follows.

Screen Shot 2017-04-02 at 20.20.50

And the screenshot of PDF is as follows.

Screen Shot 2017-04-02 at 20.21.09

Check the live demo here and complete source code for the demo here.

Summary

This was a detailed overview for implementing dashboard with a combination of few popular JavaScript libraries. It may not be necessary to use all of them together in your projects. Each library described here can be used independently depending on project needs.

Do post if you have any questions or comments in comments section, I’d love to hear them.

Comments are closed.