capturetheflag
asked on
How do I build a better dashboard with HTML 5?
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
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 CODEASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER