Online Dashboard

Online dashboard

What is an online dashboard

Online dashboard is a web-based tool that provides users to a user interface to organize and present information in a graphical user interface (GUIs) using their login credential using a web-browser on the web, without having the software installed on their PC or Laptop.


A cloud-based tool by Dashboard Builder

Online dashboard is a cloud-based FREE online dashboard version of our Dashboard Builder's on-premises tool. The online version of web dashboard gives you the freedom to access your web dashboard from anywhere internet connected computer and also enable you to embed the universal HTML code to display your charts or dashboard with the rapid development of web technologies (like APIs) to any website or web application to boast impressive functionality and feature-depth in a lightweight package.


Save money with a SaaS application

The online version of Dashboard Builder is a subscription-based Software as a service (SaaS) application which means no license fees are required. Additionally, it gives you the freedom to decide when to upgrade or downgrade your subscription plan. Our affordable plans are designed in such a way to adapt your needs.


Data security

The online dashboard takes the security of your data and information very seriously. We have taken many different steps to help ensure the safety of your data. This includes physical security practices, network security, standard processes, redundancy and business continuity.


Getting Started

In our online dashboard example, we are going to build a simple dashboard and then will generate Universal HTML code for our web application. For this, we will be demonstrating with our freely available online drag and drop Dashboard This is an online tool and no installation is required to run this tool.

Requirements

Online dashboard runs on all SVG-compatible browsers.

Online dashboard - browser support


Online dashboard examples

Before we really going into connecting the database and fetching the data, make sure that you have already had a user credential to launch the online dashboard builder. The dashboard online provides both paid and free 14 days trail services. Our FREE trail signup requires no credit card and allows you to log in and signup with one click, using your social networking users like Facebook, Google+ and Linkedin accounts.

If you haven't already signup please Signup with online dashboard.

Online dashboard - signup


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.

Online dashboard - domain information screen


Step-2: Launch online dashboard


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

Launch online dashboard


STEP-3: Connect with your Database


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

  • 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.
  • Online Dashboard - Select your Database

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

Online Dashboard - Preference screen


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 you Cpanel and click the Remote MySQL link under the Databases tab

Online dashboard online cpanel


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

Online dashboard remotely

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.

Online Dashboard - Database Connection

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

Online Dashboard - Chart Preference

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

Online Dashboard - SQL Query Result

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

Online Dashboard - Chart Preference

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


Online Dashboard - Chart Preference



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  - http://www.dashboardbuilder.net
 * @copyright (C) 2018 Dashboardbuilder.net
 * @version 3.0
 * @license: This code is under MIT licence, you can find the complete information about the license here: https://dashboardbuilder.net/code-license

 * for auto layout use autolayout=true
 -->

<object type="text/html" data="https://api.dashboardbuilder.net?filename=mychart&autolayout=false" style="width:70%; height:100%;"></object>
 



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

 


Free online dashboard software with 14-day free trial. No credit card required

You can sign up wiht our free online dashboard tool for the 14 days Free plan or the 14-day Trial offered in other plans. Try the service and see if it meets your needs. If you feel it does, you can upgrade to a paid plan anytime.


FREE online Dashboard tool


Privacy Policy

Our privacy policy has been compiled to better serve those who are concerned with how their 'Personally Identifiable Information' (PII) is being used online. PII, as described in US privacy law and information security, is information that can be used on its own or with other information to identify, contact, or locate a single person, or to identify an individual in context. Please read our Privacy Policy carefully to get a clear understanding of how we collect, use, protect or otherwise handle your Personally Identifiable Information in accordance with our website.