mirror of https://github.com/vitalif/dimple
parent
3f6ec4984e
commit
86efa631b4
|
@ -0,0 +1,22 @@
|
|||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||
<script type="text/javascript">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(75, 30, 480, 330)
|
||||
myChart.addMeasureAxis("x", "Unit Sales");
|
||||
myChart.addCategoryAxis("y", "Brand");
|
||||
var mySeries = myChart.addSeries("Channel", dimple.plot.bar);
|
||||
mySeries.getTooltipText = function (e) {
|
||||
return [
|
||||
"Hey you hovered over " + e.aggField[0] + "!",
|
||||
"Each element in the array becomes a new line."
|
||||
];
|
||||
};
|
||||
myChart.addLegend(60, 10, 510, 20, "right");
|
||||
myChart.draw();
|
||||
});
|
||||
</script>
|
||||
</div>
|
|
@ -0,0 +1,47 @@
|
|||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||
<script type="text/javascript">
|
||||
// This is the simple vertical grouped stacked 100% bar example
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(65, 45, 505, 315)
|
||||
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||
var y = myChart.addPctAxis("y", "Unit Sales");
|
||||
var s = myChart.addSeries("Owner", dimple.plot.bar);
|
||||
// Using the afterDraw callback means this code still works with animated
|
||||
// draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
|
||||
// also be used to clear the text from the previous frame)
|
||||
s.afterDraw = function (shape, data) {
|
||||
// Get the shape as a d3 selection
|
||||
var s = d3.select(shape),
|
||||
rect = {
|
||||
x: parseFloat(s.attr("x")),
|
||||
y: parseFloat(s.attr("y")),
|
||||
width: parseFloat(s.attr("width")),
|
||||
height: parseFloat(s.attr("height"))
|
||||
};
|
||||
// Only label bars where the text can fit
|
||||
if (rect.height >= 8) {
|
||||
// Add a text label for the value
|
||||
svg.append("text")
|
||||
// Position in the centre of the shape (vertical position is
|
||||
// manually set due to cross-browser problems with baseline)
|
||||
.attr("x", rect.x + rect.width / 2)
|
||||
.attr("y", rect.y + rect.height / 2 + 3.5)
|
||||
// Centre align
|
||||
.style("text-anchor", "middle")
|
||||
.style("font-size", "10px")
|
||||
.style("font-family", "sans-serif")
|
||||
// Make it a little transparent to tone down the black
|
||||
.style("opacity", 0.6)
|
||||
// Format the number
|
||||
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
|
||||
}
|
||||
};
|
||||
myChart.addLegend(200, 10, 380, 20, "right");
|
||||
myChart.draw(2000);
|
||||
});
|
||||
</script>
|
||||
</div>
|
|
@ -1,6 +1,6 @@
|
|||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.{version}.js"></script>
|
||||
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||
<script type="text/javascript">
|
||||
// Start off with a couple of rows of data
|
||||
var data = [
|
|
@ -1,6 +1,6 @@
|
|||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.{version}.js"></script>
|
||||
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||
<script type="text/javascript">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
|
@ -0,0 +1,22 @@
|
|||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||
<script type="text/javascript">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(60, 50, 480, 280);
|
||||
var priceTierAxis = myChart.addCategoryAxis("x", "Price Tier");
|
||||
var monthAxis = myChart.addCategoryAxis(priceTierAxis, "Month");
|
||||
monthAxis.addOrderRule("Date");
|
||||
var packTypeAxis = myChart.addCategoryAxis(priceTierAxis, "Pack Type");
|
||||
var volumeAxis = myChart.addPctAxis("y", "Unit Sales");
|
||||
myChart.addSeries("Owner", dimple.plot.bar, [priceTierAxis, volumeAxis]);
|
||||
myChart.addSeries("Owner", dimple.plot.area, [monthAxis, volumeAxis]);
|
||||
myChart.addSeries("Owner", dimple.plot.bar, [packTypeAxis, volumeAxis]);
|
||||
myChart.addLegend(200, 10, 380, 20, "right");
|
||||
priceTierAxis.title = null;
|
||||
myChart.draw();
|
||||
});
|
||||
</script>
|
||||
</div>
|
|
@ -0,0 +1,20 @@
|
|||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||
<script type="text/javascript">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(60, 50, 480, 280);
|
||||
var monthAxis = myChart.addCategoryAxis("x", "Month");
|
||||
monthAxis.addOrderRule("Date");
|
||||
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
|
||||
var profitAxis = myChart.addMeasureAxis(volumeAxis, "Operating Profit");
|
||||
myChart.addSeries("Quantity", dimple.plot.line, [monthAxis, volumeAxis]);
|
||||
myChart.addSeries("Op. Profit", dimple.plot.line, [monthAxis, profitAxis]);
|
||||
myChart.addLegend(200, 10, 380, 20, "right");
|
||||
volumeAxis.title = "£";
|
||||
myChart.draw();
|
||||
});
|
||||
</script>
|
||||
</div>
|
|
@ -0,0 +1,19 @@
|
|||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||
<script type="text/javascript">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(60, 50, 460, 280);
|
||||
var monthAxis = myChart.addCategoryAxis("x", "Month");
|
||||
monthAxis.addOrderRule("Date");
|
||||
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
|
||||
var profitAxis = myChart.addMeasureAxis("y", "Operating Profit");
|
||||
myChart.addSeries("Quantity", dimple.plot.line, [monthAxis, volumeAxis]);
|
||||
myChart.addSeries("Op. Profit", dimple.plot.line, [monthAxis, profitAxis]);
|
||||
myChart.addLegend(200, 10, 380, 20, "right");
|
||||
myChart.draw();
|
||||
});
|
||||
</script>
|
||||
</div>
|
|
@ -1,35 +0,0 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||
<script type="text/javascript">
|
||||
// Start off with a couple of rows of data
|
||||
var data = [
|
||||
{ "Date": Date.now(), "Value": 2000000 * Math.random() }
|
||||
];
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
var myChart = new dimple.chart(svg, [].concat(data));
|
||||
myChart.setBounds(60, 50, 480, 250)
|
||||
x = myChart.addTimeAxis("x", "Date", null, "%d/%m/%Y");
|
||||
myChart.addMeasureAxis("y", "Value");
|
||||
myChart.addSeries("Sales", dimple.plot.bar);
|
||||
myChart.ease = "linear";
|
||||
window.setInterval(function () {
|
||||
// Let 60 bars accumulate and then start slicing them off the front
|
||||
if (data.length > 60) { data = data.slice(1); }
|
||||
// Keep a day's gap at each end of the axis
|
||||
x.overrideMin = data[0]["Date"] - 86400000;
|
||||
x.overrideMax = data[data.length - 1]["Date"] + 86400000;
|
||||
data.push({
|
||||
"Date": data[data.length - 1]["Date"] + 86400000,
|
||||
"Value": 2000000 * Math.random() });
|
||||
// Update the data, using a clone to maintain order
|
||||
myChart.data = [].concat(data);
|
||||
// Draw with an animation. Each bar will take 1 second to draw and a new
|
||||
// one is added every 500ms so there will be a few animating at once
|
||||
myChart.draw(1000);
|
||||
}, 500);
|
||||
</script>
|
||||
</div>
|
|
@ -1,23 +0,0 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.v2.0.0.js"></script>
|
||||
<script type="text/javascript">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(60, 80, 480, 260)
|
||||
myChart.addMeasureAxis("x", "Price Monthly Change");
|
||||
myChart.addMeasureAxis("y", "Distribution Monthly Change");
|
||||
myChart.addMeasureAxis("z", "Sales Value");
|
||||
myChart.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble);
|
||||
myChart.addLegend(200, 10, 380, 20, "right");
|
||||
myChart.setStoryboard("Date");
|
||||
myChart.ease = "elastic";
|
||||
myChart.draw(2000);
|
||||
myChart.legends = [];
|
||||
});
|
||||
</script>
|
||||
</div>
|
|
@ -7,17 +7,16 @@
|
|||
<script type="text/javascript">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(60, 50, 480, 280)
|
||||
myChart.setBounds(60, 30, 505, 305);
|
||||
var x = myChart.addCategoryAxis("x", "Month");
|
||||
x.addOrderRule("Date");
|
||||
myChart.addMeasureAxis("y", "Unit Sales");
|
||||
myChart.addSeries("Owner", dimple.plot.bar);
|
||||
myChart.setStoryboard("Price Tier");
|
||||
myChart.ease = "bounce"
|
||||
myChart.staggerDraw = true;
|
||||
myChart.addLegend(200, 10, 380, 20, "right");
|
||||
myChart.draw(800);
|
||||
var s = myChart.addSeries("Channel", dimple.plot.line);
|
||||
s.interpolation = "cardinal";
|
||||
myChart.addLegend(60, 10, 500, 20, "right");
|
||||
myChart.draw();
|
||||
});
|
||||
</script>
|
||||
</div>
|
|
@ -1,20 +0,0 @@
|
|||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.{version}.js"></script>
|
||||
<script type="text/javascript">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(60, 80, 480, 260)
|
||||
myChart.addMeasureAxis("x", "Price Monthly Change");
|
||||
myChart.addMeasureAxis("y", "Distribution Monthly Change");
|
||||
myChart.addMeasureAxis("z", "Sales Value");
|
||||
myChart.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble);
|
||||
myChart.addLegend(200, 10, 380, 20, "right");
|
||||
myChart.setStoryboard("Date");
|
||||
myChart.ease = "elastic";
|
||||
myChart.draw(2000);
|
||||
myChart.legends = [];
|
||||
});
|
||||
</script>
|
||||
</div>
|
|
@ -0,0 +1,19 @@
|
|||
<div id="chartContainer">
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.{version}.js"></script>
|
||||
<script type="text/javascript">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(60, 30, 505, 305);
|
||||
var x = myChart.addCategoryAxis("x", "Month");
|
||||
x.addOrderRule("Date");
|
||||
myChart.addMeasureAxis("y", "Unit Sales");
|
||||
var s = myChart.addSeries("Channel", dimple.plot.line);
|
||||
s.interpolation = "cardinal";
|
||||
myChart.addLegend(60, 10, 500, 20, "right");
|
||||
myChart.draw();
|
||||
});
|
||||
</script>
|
||||
</div>
|
Loading…
Reference in New Issue