[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How do I build a better dashboard with HTML 5?

Posted on 2011-05-11
2
Medium Priority
?
300 Views
Last Modified: 2013-11-19
Hello,

I want to build a dashboard with HTML5.  I need to gather dynamic data from multiple sources(i.e. urls, oracle databases) to populate different graphs, charts, and maps.   I have attached the code that I have done so far.  I am using HTML5 and JQuery to do the charts.  I  have also attached the asp code to do a test database.  However,  I am not commted to the asp code if there is a better way to do the dashboard  Thanks for the help
BEGIN HTML5 CODE
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Table Free Web Shell</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/sortable.js"></script>
<link href="css/TableFreeBox.css" rel="stylesheet" type="text/css"/>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

<link href="charting/css/basic.css" type="text/css" rel="stylesheet" />
<link href="charting/css/visualize.css" type="text/css" rel="stylesheet" />
<link href="charting/css/visualize-light.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="charting/js/visualize.jQuery.js"></script>

<!--/*<script type="text/javascript">
function drawGradientbg() {
var bg_canvas = document.getElementById("bg");
var context = bg_canvas.getContext("2d");
var my_gradient = context.createLinearGradient(0, 0, 0, 200);
my_gradient.addColorStop(0, "#333");
my_gradient.addColorStop(200, "#069");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 1600, 1000);
}
</script>*/-->

</head>

<body>

<canvas id="bg" width="1420" height="720" style="position:absolute;top:0;left:0;z-index:-1"></canvas>

<div class="Platform">
<div class="Guts">

<div style="float:left;text-align:left;width:974px;background: #069 url('images/banner-bg.jpg') no-repeat top left;border-bottom:solid 1px #fff;margin:1px 0 0 13px"><img alt="FEMA Logo" src="images/FEMA-LOGO-65.png" style="margin:5px 0 2px 6px">
<div style="position:absolute;top:32px;font: bold 18pt Arial;margin-left:12px;color:#FFF">HTML5 Quick Draw</div></div>

<div style="clear:both;margin-top:32px">

<table class="base" style="display:none">
	<caption>Departments & Salaries</caption>
	<thead>
		<tr>
		<td><td>
			<th scope="col">ECIM</th>
			<th scope="col">TASC</th>
			<th scope="col">PDI</th>
			<th scope="col">NCT</th>
			<th scope="col">IHP</th>
			<th scope="col">QC</th>
			<th scope="col">OPS</th>
			<th scope="col">INS</th>
			<th scope="col">ACT</th>
		</tr>
		</thead>
		<tbody>

<tr><th scope='col'>100</th><td>51600</td></tr><tr><th scope='col'>30</th><td>24900</td></tr><tr><th scope='col'>90</th><td>58000</td></tr><tr><th scope='col'>20</th><td>19000</td></tr><tr><th scope='col'>70</th><td>10000</td></tr><tr><th scope='col'>110</th><td>20300</td></tr><tr><th scope='col'>50</th><td>156400</td></tr><tr><th scope='col'>80</th><td>304500</td></tr><tr><th scope='col'>40</th><td>6500</td></tr><tr><th scope='col'>60</th><td>28800</td></tr><tr><th scope='col'>10</th><td>4400</td></tr>
</tbody>
</table>




<script type="text/javascript">
	$(function(){
		$('table.base').visualize();
		$('table.base').visualize({type: 'pie'});
		$('table.base').visualize({type: 'area'});
		$('table.base').visualize({type: 'line'});
	});
</script>


</div>
</div>
</div>

</body>
</html>
END HTML5 CODE

BEGIN ASP CODE

<%
%>
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Table Free Web Shell</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/sortable.js"></script>
<link href="css/TableFreeBox.css" rel="stylesheet" type="text/css"/>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

<link href="charting/css/basic.css" type="text/css" rel="stylesheet" />
<link href="charting/css/visualize.css" type="text/css" rel="stylesheet" />
<link href="charting/css/visualize-light.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="charting/js/visualize.jQuery.js"></script>

<!--/*<script type="text/javascript">
function drawGradientbg() {
var bg_canvas = document.getElementById("bg");
var context = bg_canvas.getContext("2d");
var my_gradient = context.createLinearGradient(0, 0, 0, 200);
my_gradient.addColorStop(0, "#333");
my_gradient.addColorStop(200, "#069");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 1600, 1000);
}
</script>*/-->

</head>

<body>

<canvas id="bg" width="1420" height="720" style="position:absolute;top:0;left:0;z-index:-1"></canvas>

<!--#include file="inc/headerBox.inc" -->
<table class="base" style="display:none">
	<caption>Departments & Salaries</caption>
	<thead>
		<tr>
		<th>Department ID</th>
		<th>Salary</th>
		</tr>
		</thead>
		<tbody>

<%
dim str_Test
dim len_Test
dim connString:connString = "Provider=OraOLEDB.Oracle;Data Source=VSRD.WORLD;User ID=jroseman;Password=pass3723d "
                Set cnnConn = Server.CreateObject("ADODB.Connection")
                cnnConn.open connString
                                Set curRS=Server.CreateObject("adodb.recordset")
                                strSql= "select E.DEPARTMENT_ID Department, sum(E.SALARY) Salary " &_
                                                                "from EMPLOYEES e " &_
                                                                "where E.DEPARTMENT_ID is not null " &_
                                                                "group by E.DEPARTMENT_ID"

                curRS.Open strSql, cnnConn
                                If Err.Number <> 0 Then
                                                DBError Err.description
                                End If
                                On Error GoTo 0

                                Do while not curRS.eof
                                                Response.write ( "<tr><td>" & curRS("Department") & "</td>"  & "<td>" & curRS("Salary") & "</td></tr>")
                                                curRS.movenext
                                Loop

%>
</tbody>
</table>




<script type="text/javascript">
	$(function(){
		$('table.base').visualize();
		$('table.base').visualize({type: 'pie'});
		$('table.base').visualize({type: 'area'});
		$('table.base').visualize({type: 'line'});
	});
</script>


<!--#include file="inc/footerBox.inc" -->
</body>
</html>
END ASP CODE

Open in new window

0
Comment
Question by:capturetheflag
2 Comments
 
LVL 16

Accepted Solution

by:
hankknight earned 500 total points
ID: 35818311
Your question is very general, so it is hard to give a specific answer.

One thought is that you may wish to use a wndows for your dashboard:
http://hernan.amiune.com/labs/jQuery-Windows-Engine-Plugin/jQuery-Windows-Engine-Plugin.html
0
 
LVL 1

Author Closing Comment

by:capturetheflag
ID: 36100021
It's a start.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question