The Essentials (Duration: 6:15)

This how to video takes you thru a tour of HTML5 Cloud Dashboard Designers essential features. These include:

• Rotating chart carousels
• Support for a variety of JS charts including HighCharts, HighMaps, HighStock, Leaflet.js, Datatables.js data visualizations
• Drag, drop, place and resize user interface for chart placement onto dashboard
• Settings panel for each chart (Titles, text font, text size, etc)
• Specifying data for your chart
• Previewing, Sharing and Saving your Chart
• Rendering your dashboard using: HTML5 Only, HTML5/jQuery, URL string (GET), Silent Form (POST)
• Theming your dashboard

Tour of the HTML5 Cloud Dashboard Designer's UI (Duration: 2:59)

This how to video takes you thru a tour of HTML5 Cloud Dashboard Designer's user interface features. These include:

• Top Panel: Rotating chart carousels, Canvas Settings, Theme Settings
• Browse thru 'Drag Highchart' tab
• Browse thru 'Drag Highstock' tab
• Browse thru 'Drag Highmap' tab
• Browse thru 'Drag Leaflet.js Map' tab
• Browse thru 'Drag DataTables(js) Tale' tab
• 'Canvas Settings' tab
• 'Theme Settings' tab
• Left Nav Bar: Dashboard Widgets: Logo, Text, Image, Video, Horizontal line, Vertical line, Horizontal carousel, Vertical carousel
• Left Nav Bar: Dashboard Widgets: Logo, Text, Image, Video, Horizontal line, Vertical line, Horizontal carousel, Vertical carousel
• Top Right Menus: Preview, Share, Save Dashboard, How To Videos, Buy This Script
• Chart Tile Icons(top right): modify settings, create a copy, delete from dashboard

Preview your Dashboard (Duration: 1:11)

This how to video shows you how to preview your dashboard before you send out to share or save. Here are the steps:

1. Prepare your dashboard as you normally would, by selecting charts to drop onto your dashboard from the chart carousel above and modifying each chart's settings.
2. Click on the 'Preview' button on the top right menu.
3. Preview dashboard that appears in new tab for correctness, before sharing/saving.

Sharing your Dashboard (Duration: 1:26)

This how to video shows you how to create a link that renders your dashboard to share with your audience. Here are the steps:

1. Prepare your dashboard as you normally would, by selecting charts to drop onto your dashboard from the chart carousel above and modifying each chart's settings.
2. Click on the 'Share' button on the top right menu.
3. Your dashboard will appear in a new tab.
4. Use new URL address generated above to share dashboard with your audience.

Saving/Updating your Dashboard (Duration: 2:31)

This how to video shows you how to save/update your dashboard for future modification. Here are the steps:

1. Prepare your dashboard as you normally would, by selecting charts to drop onto your dashboard from the chart carousel above and modifying each chart's settings.
2. Click on the 'Save' button on the top right menu.
3. The HTML5 Cloud Dashboard Designer will appear with your dashboard loaded in a new tab.
4. Use new URL address generated above to retrieve your dashboard in the designer.
5. Use the 'Update' button if you want to modify a previously saved dashboard.

Theming your Dashboard (Duration: 4:17)

This how to video shows you how to use the theming features of the HTML5 Cloud Dashboard Designer. Here are the steps:

1. Click on the 'Theme Settings' tab on the top panel.
2. Change the theme and not how the theme settings to the right change.
3. A theme is made up of the following settings: dashboard background, text font, text colors, background colors and (data) series colors.
4. To see theming in action, drag a drop a Highchart onto your dashboard and click display the 'Settings' panel.
5. The settings panel allows you to specify, the charts: background, text font, text color, series color.
6. Color selection is specified by selecting from colors 1 thru 10. The actual color translation is specified in the 'Theme Settings' tab. This allows actual colors to change when themes change.

Data for your Dashboard (Duration: 0:49)

This how to video shows you how data is associated with your charts. Here are the steps:

1. Prepare your dashboard as you normally would, by selecting charts to drop onto your dashboard from the chart carousel above and modifying each chart's settings.
2. Each chart's setting panel has a place to either: a) type in data that will be used to render your chart or b) pull this data from a file.
3. For a quick/one time read dashboard, just type the data you need.
4. For a dashboard that will be reread and where the data changes, associated chart with a file which can change anytime the data changes..

Render your Dashboard with HTML5 only (Duration: 0:54)

This how to video shows you how render your dashboard with HTML5 only. Here are the steps:

1. Prepare your dashboard as you normally would, by selecting charts to drop onto your dashboard from the chart carousel above and modifying each chart's settings.
2. On the bottom(main) panel's tabs, click on the 'Render Script #1: using HTML5 Only' tab.
3. This tab contains all the source code needed to generate this dashboard in a stand alone script (using HTML5 only).
4. Cut and paste the contents into a file and upload file into the root folder of your installation.
5. Call up your your script in your browser's URL address (e.g. phpdashboardv4.dataninja.biz/html5only.html).

Render your Dashboard with HTML5/jQuery (Duration: 0:51)

This how to video shows you how to render your dashboard with HTML5/jQuery. Here are the steps:

1. Prepare your dashboard as you normally would, by selecting charts to drop onto your dashboard from the chart carousel above and modifying each chart's settings.
2. On the bottom(main) panel's tabs, click on the 'Render Script #2: using HTML5/jQuery' tab.
3. This tab contains all the source code needed to generate this dashboard in a stand alone script (using HTML5 and jQuery).
4. Cut and paste the contents into a file and upload file into the root folder of your installation.
5. Call up your your script in your browser's URL address (e.g. phpdashboardv4.dataninja.biz/html5jquery.html).

Render your Dashboard with URL String (HTTP GET) (Duration: 0:49)

This how to video shows you how to render your dashboard with URL String (HTTP GET). Here are the steps:

1. Prepare your dashboard as you normally would, by selecting charts to drop onto your dashboard from the chart carousel above and modifying each chart's settings.
2. On the bottom(main) panel's tabs, click on the 'Render Script #3: using HTTP GET URL' tab.
3. This tab contains URL string with all the dashboard and chart settings passed to html5dashboard.php file.
4. Cut and paste the contents into your browser's URL address.
5. NOTE: this option though convenient and easy to use is length limited depending on the maximum length of URL address setting on your web server.

Render your Dashboard using Silent Form (HTTP POST) (Duration: 1:07)

This how to video shows you how to render your dashboard using Silent Form (HTTP POST). Here are the steps:

1. Prepare your dashboard as you normally would, by selecting charts to drop onto your dashboard from the chart carousel above and modifying each chart's settings.
2. On the bottom(main) panel's tabs, click on the 'Render Script #4: using HTTP POST var' tab.
3. This tab contains all the source code needed to generate this dashboard using a silent form (HTTP POST).
4. Cut and paste the contents into a file and upload file into the root folder of your installation.
5. Call up your your script in your browser's URL address (e.g. phpdashboardv4.dataninja.biz/silentform.html).

Installing your Script (Duration: 3:41)

This how to video shows you how install the HTML5 Cloud Dashboard Designer script. Here are the steps:

1. You want to run your cloud dashboard from your domain's root directory (so if you need to run this from a folder on your domain, create a subdomain as shown in the video).
2. Unzip the contents of the zip file you will receive when you purchase the script into the root folder of your domain (or the subdomain root folder as show in the video)
3. Navigate to the /php folder and edit the /php/config.php file. Fill out the MySQL database connection settings at the top and save (this includes specifying a database name that will contain your dashboards for this script).
4. Create the database (if it does not yet exist) that you specified in step 3.
5. Run and test the script, making sure to test features that require PHP/MySQL - Preview, Share, Save dashboard (from top menu) and render Script #4 and #5 (from main panel).
6. Because MySQL/Postgres support was added for all chart types and the amount of data that now the DATA table (over 15K records) exceeds the amount that is supported inside a PHP script, I've replaced step 5 above with a .sql script (/data/phpdashboardv4.sql) that you run inside your MySQL admin console (e.g. phpMyAdmin). So after step 4 (create database), ignore step 5 and run the phpdashboardv4.sql script on your database to create the tables and load data.
7. After performing all the steps above, all should be ready! Tanoshinde ('Have fun!')

Here are the steps:

1. Click on HTML5 Cloud Dashboard Designer Offline Documentation and save to your local drive.

DEMO HTML5 Cloud Dashboard Designer Now

1. Click HERE to start demo.

BUY HTML5 Cloud Dashboard Designer Now!

1. Click HERE to purchase script at Codecanyon.net