Dashboard: Drag and Drop Visuals and Export Using JavaScript Libraries

Learn how to use JavaScript, jQuery, and a few JS libraries, to create and export dashboards with drag-and-drop functionalities.

Swathi Prasad

Apr. 24, 17 · Web Dev Zone · Tutorial

Like (2)

Save

9.66K Views

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 it using JavaScript.

I am going to use the Gridster library to create the 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 the Gridster dependency by downloading it from GitHub or just include the source from cdnjs links. Since Gridster is a jQuery plugin, you will have to include a 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(“2 d”);

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 a 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 the 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 the comments section, I’d love to hear them.

Library Dashboard (Mac OS) JavaScript

Published at DZone with permission of Swathi Prasad, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Comments