|
<head> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script> |
|
</head> |
|
<body> |
|
<script type="text/javascript"> |
|
/* Write JavaScript here */ |
|
var svg = dimple.newSvg("body", 800, 500); |
|
var data = [{ |
|
"1981-2011": "Canada's Real GDP", |
|
"Percentage Increase": 115 |
|
}, { |
|
"1981-2011": "Household Income", |
|
"Percentage Increase": 15 |
|
}]; |
|
var chart = new dimple.chart(svg, data); |
|
var x = chart.addCategoryAxis("x", "1981-2011"); |
|
var y = chart.addMeasureAxis("y", "Percentage Increase"); |
|
var s = chart.addSeries("1981-2011", dimple.plot.bar); |
|
//Canada's colour |
|
chart.assignColor("Canada's Real GDP", "#d71920"); |
|
//Same colour used in original bar plot |
|
chart.assignColor("Household Income", "#57585a"); |
|
//yaxis.fontSize('auto'); |
|
chart.draw(); |
|
//Canada's GDP Label |
|
svg.append("text") |
|
.attr("x", chart._xPixels() + 160) |
|
.attr("y", chart._yPixels() + 200) |
|
.style("text-anchor", "middle") |
|
.style("font-family", "sans-serif") |
|
.style("font-size", "150%") |
|
.style("fill", "white") |
|
.text("115 % ") |
|
//Household Income GDP Label |
|
svg.append("text") |
|
.attr("x", chart._xPixels() + 480) |
|
.attr("y", chart._yPixels() + 385) |
|
.style("text-anchor", "middle") |
|
.style("font-family", "sans-serif") |
|
.style("font-size", "150%") |
|
.style("fill","white") |
|
.text("15 % ") |
|
</script> |
|
</body> |
