dimple-js
Version:
Dimple is an object-oriented API allowing you to create flexible axis-based charts using [d3.js](http://d3js.org "d3.js").
96 lines (80 loc) • 3.38 kB
HTML
<meta charset="utf-8">
<html>
<div id="chartContainer">
{scriptDependencies}
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
// Get a unique list of dates
var months = dimple.getUniqueValues(data, "Date");
// Set the bounds for the charts
var row = 0,
col = 0,
top = 25,
left = 60,
inMarg = 15,
width = 115,
height = 90,
totalWidth = parseFloat(svg.attr("width"));
// Pick the latest 12 dates
months = months.slice(months.length - 12);
// Draw a chart for each of the 12 dates
months.forEach(function (month) {
// Wrap to the row above
if (left + ((col + 1) * (width + inMarg)) > totalWidth) {
row += 1;
col = 0;
}
// Filter for the month in the iteration
var chartData = dimple.filterData(data, "Date", month);
// Use d3 to draw a text label for the month
svg
.append("text")
.attr("x", left + (col * (width + inMarg)) + (width / 2))
.attr("y", top + (row * (height + inMarg)) + (height / 2) + 12)
.style("font-family", "sans-serif")
.style("text-anchor", "middle")
.style("font-size", "28px")
.style("opacity", 0.2)
.text(chartData[0].Month.substring(0, 3));
// Create a chart at the correct point in the trellis
var myChart = new dimple.chart(svg, chartData);
myChart.setBounds(
left + (col * (width + inMarg)),
top + (row * (height + inMarg)),
width,
height);
// Add x and fix ordering so that all charts are the same
var x = myChart.addCategoryAxis("x", "Owner");
x.addOrderRule(["Black Mesa", "Aperture", "Tyrell Corp",
"Rekall", "MomCorp", "LexCorp", "Stark Ind", "Wayne Ent"]);
// Add y and fix scale so that all charts are the same
var y = myChart.addMeasureAxis("y", "Sales Value");
y.overrideMax = 16000000;
// Draw the bars. Passing null here would draw all bars with
// the same color. Passing owner second colors by owner, which
// is normally bad practice in a bar chart but works in a trellis.
// Month is only passed here so that it shows in the tooltip.
myChart.addSeries(["Month", "Owner"], dimple.plot.bar);
// Draw the chart
myChart.draw();
// Once drawn we can access the shapes
// If this is not in the first column remove the y text
if (col > 0) {
y.shapes.selectAll("text").remove();
}
// If this is not in the last row remove the x text
if (row < 2) {
x.shapes.selectAll("text").remove();
}
// Remove the axis labels
y.titleShape.remove();
x.titleShape.remove();
// Move to the next column
col += 1;
}, this);
});
</script>
</div>
</html>