Code: Interactive Charting Exercise - Static
This is the final code for the Interactive Charting Exercise. See the
working chart. Or play with the code at
CodePen.
<![CDATA[<!DOCTYPE html>
<html>
<head>
<title>Fun With Charts</title>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 16px;
}
h1 {
font-size: 22px;
}
.bars {
background-color: blue;
height: 25px;
margin: 10px 0 0 0;
-webkit-transition:width 1s ease-in;
-moz-transition:width 1s ease-in;
-o-transition:width 1s ease-in;
transition:width 1s ease-in;
}
#bar0 {
position: relative;
}
#bar1 {
position: relative;
}
#bar2 {
position: relative;
}
p {
margin: 0;
}
.number {
color: white;
text-align: right;
padding: 3px;
font-size: 12px;
}
#cat {
padding-top: 5px;
}
#main
{
border-top: 1px solid black;
border-bottom: 1px solid black;
overflow: auto;
padding: 10px;
margin-top: 10px;
}
.tooltip {
display:none;
background: beige;
font-size:14px;
height:25px;
border-radius: 5px;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
color: black;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>A Tale of Three Cities</h1>
<!-- for for changing measures. Must match items in var measures below -->
<form name="form1">
<select name="sel" onChange="selMeasure()">
<option value="1">Population</option>
<option value="2">Housing Units</option>
<option value="3">Households</option>
</select>
</form>
<div id="main">
<div id="cat"></div>
<div id="bar0" class="bars"><p id="bartext0" class="number">842</p>
</div>
<div id="name0"></div>
<div id="bar1" class="bars"><p id="bartext1" class="number">777</p>
</div>
<div id="name1"></div>
<div id="bar2" class="bars"><p id="bartext2" class="number">236</p>
</div>
<div id="name2"></div>
</div>
<script>
//object to hold data
var cities = [
{name: "Austin", Population: 842, Units: 354, Households: 322, tip: "live music capital"},
{name: "Fort Worth", Population: 777, Units: 291, Households: 257, tip: "near Dallas"},
{name: "Lubbock", Population: 236, Units: 95, Households: 86, tip: "TX Tech"}
];
//array to hold names of different measures. Must match values in form
var measures = Object.keys(cities[0]);
function writeData(x) {
for (var i = 0; i<cities.length; i++) {
document.getElementById("name" + (i)).innerHTML= eval("cities[i]." + measures[0]);
document.getElementById("bartext" + (i)).innerHTML= eval("cities[i]." + measures[x]);
document.getElementById("bar" + (i)).style.width = eval("cities[i]." + measures[x]) + "px";
document.getElementById("bar" + (i)).title= eval("cities[i]." + measures[4]);
}
//city and tip do not need to change for each measure.
// this area inserts the Category as a heading
document.getElementById("cat").innerHTML = "<strong>" + measures[x] + "</strong>";
};
writeData(1); //writes data in initial state before form submitted
function selMeasure() { // function that writes the data based on the dropdown selection
var m = document.form1.sel.value;
writeData(m);
};
// JQuery function for tool tip
$( document ).ready(function() {
$("[title]").tooltip();
});
</script>
</body>
</html>
]]>
