mirror of https://github.com/vitalif/dimple
95 lines
3.4 KiB
HTML
95 lines
3.4 KiB
HTML
<!----------------------------------------------------------------->
|
|
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
|
<!----------------------------------------------------------------->
|
|
<div id="chartContainer">
|
|
<script src="/lib/d3.v3.min.js"></script>
|
|
<script src="/dist/dimple.v1.2.0.js"></script>
|
|
<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> |