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").
124 lines (104 loc) • 4.67 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) {
// Fill the SVG background
svg.append("rect")
.attr("x", "8px")
.attr("y", "8px")
.attr("width", "100%")
.attr("height", "100%")
.style("fill", "#2c3e50");
// Configure a simple bar chart
var myChart = new dimple.chart(svg, data),
xAxis = myChart.addCategoryAxis("x", "Owner"),
yAxis = myChart.addMeasureAxis("y", "Unit Sales"),
mySeries = myChart.addSeries("Owner", dimple.plot.bar);
// Draw without any axes
xAxis.hidden = true;
yAxis.hidden = true;
// Set small margins as there is going to be no axes displayed
myChart.setMargins(14, 18, 6, 10);
// Define a custom color palette. These colours are based on the excellent
// set at http://flatuicolors.com/
myChart.defaultColors = [
new dimple.color("#3498db", "#2980b9", 1), // blue
new dimple.color("#e74c3c", "#c0392b", 1), // red
new dimple.color("#2ecc71", "#27ae60", 1), // green
new dimple.color("#9b59b6", "#8e44ad", 1), // purple
new dimple.color("#e67e22", "#d35400", 1), // orange
new dimple.color("#f1c40f", "#f39c12", 1), // yellow
new dimple.color("#1abc9c", "#16a085", 1), // turquoise
new dimple.color("#95a5a6", "#7f8c8d", 1) // gray
];
// Set some custom display elements for each series shape
mySeries.afterDraw = function (s, d) {
// I've defined the width in terms of the golden ratio as it seems like the sort
// of thing a designer would do.
var shape = d3.select(s),
goldenRatio = 1.61803398875;
// Add a rectangle to the bar giving a nice style. The idea was borrowed
// from sirocco's question here:
// http://stackoverflow.com/questions/25044608/dimplejs-barchart-styling-columns
svg.append("rect")
.attr("x", shape.attr("x"))
.attr("y", shape.attr("y"))
.attr("height", shape.attr("height"))
.attr("width", (0.5 * shape.attr("width")) / goldenRatio)
.style("fill", shape.style("stroke"))
.style("opacity", 1)
.style("pointer-events", "none");
// Add some bar labels for the yValue
svg.append("text")
.attr("x", parseFloat(shape.attr("x")) + shape.attr("width") / 2)
.attr("y", parseFloat(shape.attr("y")) + (shape.attr("height") > 30 ? (shape.attr("height") / 2 + 8) : - 10))
.style("font-family", "courier new")
.style("text-anchor", "middle")
.style("font-size", "16px")
.style("fill", "#ecf0f1")
.style("pointer-events", "none")
.text(yAxis._getFormat()(d.yValue));
// Draw without a border
shape.attr("stroke", shape.attr("fill"));
};
// Override the standard tooltip behaviour
mySeries.addEventHandler("mouseover", function (e){
// Draw the text information in the top left corner
svg.selectAll(".dimple-hover-text")
.data([e.xValue, d3.format(",.f")(e.yValue)])
.enter()
.append("text")
.attr("class", "dimple-hover-text")
.attr("x", myChart._xPixels() + myChart._widthPixels() - 25)
.attr("y", function (d, i) { return myChart._yPixels() + 20 + i * 25; })
.style("font-family", "courier new")
.style("text-anchor", "end")
.style("font-size", "20px")
.style("fill", "#ecf0f1")
.style("pointer-events", "none")
.text(function (d) { return d; });
// Put a coloured bar next to the text for no good reason
svg.append("rect")
.attr("class", "dimple-hover-text")
.attr("x", myChart._xPixels() + myChart._widthPixels() - 15)
.attr("y", myChart._yPixels())
.attr("height", 60)
.attr("width", 10)
.style("fill", myChart.getColor(e.xValue).fill)
.style("opacity", 1)
.style("pointer-events", "none");
});
// Clear the text on exit
mySeries.addEventHandler("mouseleave", function (e) {
svg.selectAll(".dimple-hover-text").remove();
});
// Render everything
myChart.draw();
});
</script>
</div>
</html>