Getting Started

Create the HTML, CSS, and Javascript files below and you are off to the races. Click on the file name to get the code content for each.

index.html
code.js
style.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dashboard Template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Data Dashboard</h1>
<div id='page'>
<div class="card">
<div id="chart1"></div>
</div>
<div class="card">
<div id="chart2"></div>
</div>
</div>
<!--Javascript-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdn.jsdelivr.net/alasql/0.2/alasql.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/idewcomputing/code-dataviz-dashboard/src/viz.js"></script>
<script src="code.js"></script>
</body>
</html>

Copyright and License

Copyright © 2018-2019 Jim Lyst and Michael Frontz, Indiana University School of Informatics and Computing at IUPUI

This material is part of the Computing by Design high school computer science curriculum developed for the Informatics Diversity-Enhanced Workforce (iDEW) program, an award-winning community partnership in central Indiana that is broadening student participation in computing and helping students develop the skills essential for success in the 21st century workplace. The iDEW program is managed by the Indiana University School of Informatics and Computing at IUPUI.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. You are free to use, share, or adapt this material for noncommercial purposes as long as you provide proper attribution and distribute any copies or adaptations under this same license.

Creative Commons License