DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. JavaScript
  4. Dashboard: Drag and Drop Visuals and Export Using JavaScript Libraries

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 user avatar by
Swathi Prasad
·
Apr. 24, 17 · Tutorial
Like (2)
Save
Tweet
Share
9.86K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Popular on DZone

  • Educating the Next Generation of Cloud Engineers With Google Cloud
  • Mr. Over, the Engineer [Comic]
  • (Deep) Cloning Objects in JavaScript
  • Implementing Infinite Scroll in jOOQ

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: