vitalif-js
/
dimple
mirror of https://github.com/vitalif/dimple
1
0
Fork 0
Code Issues Releases Wiki Activity

New Examples

master 2.0.0
johnkiernander 2014-04-28 23:22:12 +01:00
parent 3f6ec4984e
commit 86efa631b4
12 changed files with 157 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
adhoc/adhoc_bar_custom_tooltips.html Normal file
View File

@ -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>

47
adhoc/adhoc_bar_labels.html Normal file
View File

@ -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>

2
examples/templates/advanced_bar_scroll.html → adhoc/adhoc_bar_scroll.html
View File

@ -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 = [

2
examples/templates/advanced_bounce_stagger.html → adhoc/adhoc_bounce_stagger.html
View File

@ -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) {

22
adhoc/adhoc_composite_axis_category.html Normal file
View File

@ -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>

20
adhoc/adhoc_composite_axis_measure.html Normal file
View File

@ -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>

19
adhoc/adhoc_dual_axis.html Normal file
View File

@ -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>

35
examples/advanced_bar_scroll.html
View File

@ -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>

23
examples/advanced_elastic_bubbles.html
View File

@ -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>

13
examples/advanced_bounce_stagger.html → examples/lines_curvy.html
View File

@ -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>

20
examples/templates/advanced_elastic_bubbles.html
View File

@ -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>

19
examples/templates/lines_curvy.html Normal file
View File

@ -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>