Online Dashboard - get your infinitesimal dashboard online for FREE

What is an Online Dashboard?

An Online Dashboard is a web-based tool that enables users to design and display data-driven dashboards using a graphical user interface (GUI). Without requiring any software installation, users can log in via a web browser to access and manage their interactive dashboards from anywhere.

Why Choose an Online Dashboard?

Unlike traditional desktop applications, an Online Dashboard provides flexibility, real-time data visualization, and easy accessibility. With cloud technology, users can create, update, and share dashboards effortlessly. Whether you’re an individual or a business, an online dashboard helps you track key performance indicators (KPIs) in real time.

A Cloud-Based Dashboard Builder by Dashboard Builder

The Online Dashboard is a cloud-based, free version of our Dashboard Builder software. This web-based dashboard tool allows users to access dashboards from any internet-connected device. Additionally, users can embed their dashboards into websites or applications using universal HTML code, enabling seamless integration with APIs and third-party tools.

Benefits of Using an Online Dashboard

• Accessibility: Access your dashboard from anywhere with an internet connection.
• No Installation Required: Use it directly through your web browser.
• Real-Time Data Visualization: Track and monitor your data with live updates.
• Easy Integration: Embed dashboards into websites and web applications.
• Cost-Effective: Enjoy a free trial with no upfront licensing fees.

Save Money with a SaaS-Based Online Dashboard

Our Online Dashboard operates as a Software as a Service (SaaS) application, meaning you don’t have to worry about license fees. With flexible subscription plans, you can upgrade or downgrade your plan based on your needs.

Data Security & Privacy in an Online Dashboard

We prioritize data security with industry-standard encryption, secure access protocols, and regular backups. Your data is protected with stringent security measures, including physical security practices, network security, redundancy, and business continuity protocols.

Getting Started with an Online Dashboard

Setting up your first Online Dashboard is simple. Our intuitive drag-and-drop interface allows you to build interactive dashboards within minutes. Once created, you can generate a universal HTML code to embed the dashboard into your web application.

System Requirements for Running an Online Dashboard

The Online Dashboard runs on all SVG-compatible web browsers, ensuring smooth functionality across different devices and platforms.

Online Dashboard Examples

Before connecting a database and visualizing data, ensure you have the necessary login credentials. Our Online Dashboard offers both free and paid plans, including a 14-day free trial—no credit card required. You can sign up using Google, Facebook, or LinkedIn for a seamless experience.

If you haven't already signed up, please Sign Up and start building your first online dashboard today.

Step-1: Enter your domain information.

You need to tell the online dashboard where you are going to embed the universal code. If you don't intend to use embed code then you may skip this step.

Extend the preferences menu and click on Domain Information after signing up with your online dashboard. Enter your website domain only, you don't need to enter any folder or sub-folder if you intend to execute your dashboard script from there. If you are using a sub-domain, then enter domain along with your sub-domain name, for example, http://subdomain.example.com

You may also need to enter your business name, business type, language (currently the online dashboard supports English language only) and your business email address along with your domain information. Click update to save your information.

Step-2: Launch online dashboard

On the left navigation menu, click the Launch dashboard button to launch the online dashboard

STEP-3: Connect with your Database

• Access the web folder in your browser. e.g. http://localhost/dashboardbuilder following welcome screen will appear.



• This is the main panel of the online dashboard. This is a HTML5 based fully responsive interface built in PHP, HTML, JavaScript and CSS. The interface has a minimal design with a drag-and-drop feature that allows you to add multiple chart panel to customize the dashboard on according to the way you want.
• Now Click the Database icon
• Following screen will appear. In our online dashboard example, we will use the sample SQLite database called Northwind.db to connect and fetch the data. Now, Select Database from data source tab. Select SQLite from the drop down list of Database, Enter your "../data/Northwind.db" in the DB name field and Save changes as mentioned in the screen.

• When you click the save changes, a green tick mark with Database will appear that shows that your database is successfully connected.

If you see a red cross sign that means the connection with database is unsuccessful. Make sure that your database is accessible remotely to %.dashboardbuilder.net

Go to your Cpanel and click the Remote MySQL link under the Databases tab

Enter %dashboardbuilder.net in the host field and click Add Host button

STEP-4: Chart settings

• In our next step, we will fetch data from the database we have just connected. Select the gear icon for your Chart preference.

• The following screen will appear. List of the tables from Northwind.db will appear on the table list as shown in the picture below.

STEP-5: SQL statements

• In our example, we will be creating a simple application using the universal HTML code for our sales management. This online dashboard will contain a chart where users can find the sales stats and maintain the data about the products.
• Now, enter the following SQL statement in text box in a following manner

SELECT strftime('%Y-%m',o.shippeddate) as xaxis, sum(d.quantity) as yaxis from `order details` d, orders o where o.orderid = d.orderid group by strftime('%Y-%m',o.orderdate) limit 50

• Now, we want to execute our query and fetch the data from the tables. Click the Run Query button

• Query Result will appear. Now, we have to assign x-axis data to the x-axis column and y-axis data to the y-axis column. Select your x-axis data from the drop down list of X and y-axis data from the drop down list of Y .
• Click Save Changes

• Charts will be appeared on the screen as shown below.

STEP-6: Adjust the position

• You may adjust the size and the position of the Chart Panel by dragging its corner. The size and position are fully responsive according to the Bootstrap framework

STEP-7: Universal code generation

• So far we have successfully build our dashboard. In this step we are going to generate the universal HTML code for dashboard we have just created. Click the Generate   button to auto-generate HTML code for our dashboard. This universal HTML code can be embed to anywhere in any platform. Click here for Online Dashboard Examples

Auto-generated universal HTML code

Following is an example of auto-generated universal HTML code. You may copy & paste the following code in your web application.

<!--
 * DashboardBuilder
 *
 * @author Diginix Technologies www.diginixtech.com
 * Support  - https://www.dashboardbuilder.net
 * @copyright (C) 2016-2021 Dashboardbuilder.net
  @version 4.2
 * @license: This code is under MIT license, you can find the complete information about the license here: https://dashboardbuilder.net/code-license
 *
 * for auto layout use autolayout=true
 -->
 <div class="mychart">
 <object type="text/html" data="https://cloud.dashboardbuilder.net/apps-63/?param=JmZpbGU9bXljaGFydCZtZW1iZXJJRD0yMSZodG1sPXRydWU=" style="width:100%; height:100%;"></object>
 </div>

This auto-generated HTML code is under MIT license, which you may customize as per your desire needs and can be used an anywhere you want. You can find the complete information about the license here