Responsive Dashboard with JavaScript Charts and Widgets

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	Web-App-Dashboard
Author:	Triantafyllos Famprikatzis
Licence:	MIT Licence
Published:	March 1, 2024
Repository:	Fork on GitHub
Dependencies:	Chart.js 2.7.3 or Latest
File Type:	zip archive (HTML, CSS & JavaScript)
Package Size:	251 KB

Demo Download

How to Make Responsive Dashboard:

1. To getting started with this dashboard, include the all necessary files into HTML document.

<!-- Main CSS for Dashboard -->
<link rel="stylesheet" href="css/styles.css">

<!-- Chart Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>

<!-- Main JavaScript for Dashboard -->
<script src="script.js"></script>

2. Create header element and add your customization details into it.

        <header>
            <img class="logo" src="icons/logo.png" alt="logo">
            <div class="header-nav">
                <div class="notification">
                    <img class="bell" id="js-bell" src="icons/icon-bell.svg" alt="bell">
                    <p class="badge" id="badge-1"><strong class="badge-num">1</strong></p>
                    <p class="badge" id="badge-2"><strong class="badge-num">2</strong></p>
                    <p class="badge" id="badge-3"><strong class="badge-num">3</strong></p>
                    <p class="badge" id="badge-4"><strong class="badge-num">4</strong></p>
                    <ul class="notification-menu" id="notif-menu" style="display: none;">
                        <li id="header-li"><strong>Notifications</strong></li>
                        <li class="popuptext" id="li-1">
                            <img class="img" src="images/member-1.jpg" alt="member image">
                            <h3 class="name">Victoria Chambers</h3>
                            <p class="comment">What are your plans for tonight?</p>
                            <button class="btn-notif" type="button" name="delete">X</button>
                        </li>
                        <li class="popuptext" id="li-2">
                            <img class="img" src="images/member-2.jpg" alt="member image">
                            <h3 class="name">Dale Byrd</h3>
                            <p class="comment">Hey what's up?</p>
                            <button class="btn-notif" type="button" name="delete">X</button>
                        </li>
                        <li class="popuptext" id="li-3">
                            <img class="img" src="images/member-3.jpg" alt="member image">
                            <h3 class="name">Dawn Wood</h3>
                            <p class="comment">Just sent you a voice message</p>
                            <button class="btn-notif" type="button" name="delete">X</button>
                        </li>
                        <li class="popuptext" id="li-4">
                            <img class="img" src="images/member-4.jpg" alt="member image">
                            <h3 class="name">Dan Oliver</h3>
                            <p class="comment">Are you going to the game next week?</p>
                            <button class="btn-notif" type="button" name="delete">X</button>
                        </li>
                        <li class="popuptext popupalert" id="alert-bell" style="display: none;">
                            <h3>No new notifications</h3>
                        </li>
                    </ul>
                </div>
                <span class="border-notif"></span>
                <img class="profile-pic" src="images/josh.jpg" alt="User Avatar">
                <h3 class="profile-name">Josh Sullivan</h3>
            </div>
        </header>

3. After this, create Navigation menu like below.

  <nav>
            <div class="side-nav" id="js-nav">
                <a href="#top" class="nav-icons nav-selected" id="btn-top"><img src="icons/icon-dashboard.svg" alt="dashboard"></a>
                <a href="#traffic" class="nav-icons" id="btn-traffic"><img src="icons/icon-visits.svg" alt="visits"></a>
                <a href="#activity" class="nav-icons" id="btn-activity"><img src="icons/icon-members.svg" alt="members"></a>
                <a href="#settings" class="nav-icons" id="btn-settings"><img src="icons/icon-settings.svg" alt="settings"></a>
            </div>
        </nav>

4. Copy the other parts of this dashboard from downloaded index file. Thanks 🙂

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.