mirror of https://github.com/vitalif/dimple
Copy over from d3Simple
parent
992cb4fd40
commit
a88d98e91e
|
@ -0,0 +1,22 @@
|
||||||
|
# Auto detect text files and perform LF normalization
|
||||||
|
* text=auto
|
||||||
|
|
||||||
|
# Custom for Visual Studio
|
||||||
|
*.cs diff=csharp
|
||||||
|
*.sln merge=union
|
||||||
|
*.csproj merge=union
|
||||||
|
*.vbproj merge=union
|
||||||
|
*.fsproj merge=union
|
||||||
|
*.dbproj merge=union
|
||||||
|
|
||||||
|
# Standard to msysgit
|
||||||
|
*.doc diff=astextplain
|
||||||
|
*.DOC diff=astextplain
|
||||||
|
*.docx diff=astextplain
|
||||||
|
*.DOCX diff=astextplain
|
||||||
|
*.dot diff=astextplain
|
||||||
|
*.DOT diff=astextplain
|
||||||
|
*.pdf diff=astextplain
|
||||||
|
*.PDF diff=astextplain
|
||||||
|
*.rtf diff=astextplain
|
||||||
|
*.RTF diff=astextplain
|
|
@ -1,14 +1,5 @@
|
||||||
lib-cov
|
node_modules
|
||||||
*.seed
|
.komodotools
|
||||||
*.log
|
*.komodo*
|
||||||
*.csv
|
help
|
||||||
*.dat
|
image_creator
|
||||||
*.out
|
|
||||||
*.pid
|
|
||||||
*.gz
|
|
||||||
|
|
||||||
pids
|
|
||||||
logs
|
|
||||||
results
|
|
||||||
|
|
||||||
npm-debug.log
|
|
|
@ -0,0 +1,53 @@
|
||||||
|
module.exports = function(grunt) {
|
||||||
|
|
||||||
|
// Project configuration.
|
||||||
|
grunt.initConfig({
|
||||||
|
pkg: grunt.file.readJSON('package.json'),
|
||||||
|
concat: {
|
||||||
|
dist: {
|
||||||
|
src: [
|
||||||
|
"src/begin.js",
|
||||||
|
"src/objects/axis/begin.js",
|
||||||
|
"src/objects/axis/methods/*.js",
|
||||||
|
"src/objects/axis/end.js",
|
||||||
|
"src/objects/chart/begin.js",
|
||||||
|
"src/objects/chart/methods/*.js",
|
||||||
|
"src/objects/chart/end.js",
|
||||||
|
"src/objects/color/begin.js",
|
||||||
|
"src/objects/color/end.js",
|
||||||
|
"src/objects/eventArgs/begin.js",
|
||||||
|
"src/objects/eventArgs/end.js",
|
||||||
|
"src/objects/legend/begin.js",
|
||||||
|
"src/objects/legend/methods/*.js",
|
||||||
|
"src/objects/legend/end.js",
|
||||||
|
"src/objects/series/begin.js",
|
||||||
|
"src/objects/series/methods/*.js",
|
||||||
|
"src/objects/series/end.js",
|
||||||
|
"src/objects/storyboard/begin.js",
|
||||||
|
"src/objects/storyboard/methods/*.js",
|
||||||
|
"src/objects/storyboard/end.js",
|
||||||
|
"src/objects/aggregateMethod/*.js",
|
||||||
|
"src/objects/plot/*.js",
|
||||||
|
"src/methods/*.js",
|
||||||
|
"src/end.js"
|
||||||
|
],
|
||||||
|
dest: 'dist/<%= pkg.name %>.v1.js'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
uglify: {
|
||||||
|
dist: {
|
||||||
|
files: {
|
||||||
|
'dist/<%= pkg.name %>.v1.min.js': ['<%= concat.dist.dest %>']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load the plugin that provides the "uglify" task.
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||||
|
|
||||||
|
// Default task(s).
|
||||||
|
grunt.registerTask('default', ['concat', 'uglify']);
|
||||||
|
|
||||||
|
};
|
|
@ -0,0 +1,21 @@
|
||||||
|
Copyright 2013 PMSI-AlignAlytics
|
||||||
|
www.pmsi-consulting.com
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of this software and associated documentation files (the
|
||||||
|
"Software"), to deal in the Software without restriction, including
|
||||||
|
without limitation the rights to use, copy, modify, merge, publish,
|
||||||
|
distribute, sublicense, and/or sell copies of the Software, and to
|
||||||
|
permit persons to whom the Software is furnished to do so, subject to
|
||||||
|
the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be
|
||||||
|
included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||||
|
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||||
|
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||||
|
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||||
|
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
@ -1,4 +1,7 @@
|
||||||
dimple
|
### dimple ###
|
||||||
======
|
|
||||||
|
|
||||||
An object-oriented API for business analytics
|
An object-oriented API allowing you to create flexible axis-based charts using [d3.js](http://d3js.org "d3.js"). The intention of this project is to allow analysts who are not necessarily expert JavaScript programmers to create standard (and some not-so-standard) business analytics.
|
||||||
|
|
||||||
|
The API will also expose the core d3 objects where possible so that as users gain confidence they can extend the base functionality in whatever way they wish.
|
||||||
|
|
||||||
|
For full details and documentation the wiki is available [here](http://github.com/PMSI-AlignAlytics/dimple/wiki "Wiki").
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
var express = require('express');
|
||||||
|
var app = express();
|
||||||
|
|
||||||
|
app.use('/', express.static(__dirname));
|
||||||
|
|
||||||
|
app.listen(process.env.PORT || 3000);
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,79 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.js"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
.hoverBox {
|
||||||
|
fill: #FFFFE2;
|
||||||
|
stroke: #808080;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
.hoverText {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var hoverBoxDuration = 200;
|
||||||
|
var barOpacity = 0.6;
|
||||||
|
var box = null;
|
||||||
|
var label = null;
|
||||||
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
var x = myChart.addCategoryAxis("x", "Brand");
|
||||||
|
var y = myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var z = myChart.addMeasureAxis("z", "Sales Value");
|
||||||
|
var s = myChart.addSeries("SKU", dimple.plot.bubble);
|
||||||
|
s.addEventHandler("mouseover", onHover);
|
||||||
|
s.addEventHandler("mouseleave", onLeave);
|
||||||
|
myChart.draw();
|
||||||
|
s.shapes.attr("opacity", barOpacity);
|
||||||
|
});
|
||||||
|
|
||||||
|
function onHover(e) {
|
||||||
|
e.selectedShape
|
||||||
|
.transition()
|
||||||
|
.duration(hoverBoxDuration)
|
||||||
|
.attr("opacity", 1);
|
||||||
|
if (label == null) {
|
||||||
|
box = svg.append("rect").attr("class", "hoverBox");
|
||||||
|
label = svg.append("text").attr("class", "hoverText");
|
||||||
|
}
|
||||||
|
label.attr("x", parseInt(e.selectedShape.attr("cx")) + 25)
|
||||||
|
.attr("y", parseInt(e.selectedShape.attr("cy")) + 25)
|
||||||
|
.attr("opacity", 0)
|
||||||
|
.text(e.seriesValue);
|
||||||
|
box.attr("x", parseInt(e.selectedShape.attr("cx")) + 20)
|
||||||
|
.attr("y", parseInt(e.selectedShape.attr("cy")) + 14)
|
||||||
|
.attr("opacity", 0)
|
||||||
|
.attr("width", label.node().getComputedTextLength() + 10)
|
||||||
|
.attr("height", 15);
|
||||||
|
label
|
||||||
|
.transition()
|
||||||
|
.duration(hoverBoxDuration)
|
||||||
|
.attr("opacity", 1);
|
||||||
|
box
|
||||||
|
.transition()
|
||||||
|
.duration(hoverBoxDuration)
|
||||||
|
.attr("opacity", 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
function onLeave(e) {
|
||||||
|
e.seriesShapes
|
||||||
|
.transition()
|
||||||
|
.duration(hoverBoxDuration)
|
||||||
|
.attr("opacity", barOpacity);
|
||||||
|
if (label != null) {
|
||||||
|
label
|
||||||
|
.transition()
|
||||||
|
.duration(hoverBoxDuration)
|
||||||
|
.attr("opacity", 0);
|
||||||
|
box
|
||||||
|
.transition()
|
||||||
|
.duration(hoverBoxDuration)
|
||||||
|
.attr("opacity", 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,22 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, "Month", "Dec-12");
|
||||||
|
data = dimple.filterData(data, "Channel", "Hypermarkets");
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(40, 30, 420, 320)
|
||||||
|
var x = myChart.addCategoryAxis("x", "Brand");
|
||||||
|
var y1 = myChart.addMeasureAxis("y", "Price");
|
||||||
|
var y2 = myChart.addMeasureAxis("y", "Sales Value");
|
||||||
|
myChart.assignColor("Sales", "#222222", "#000000", 0.1);
|
||||||
|
myChart.addSeries("Sales", dimple.plot.bar, [x, y2]);
|
||||||
|
myChart.addSeries("Min", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.min;
|
||||||
|
myChart.addSeries("Avg", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.avg;
|
||||||
|
myChart.addSeries("Max", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.max;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,35 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Random Bubbles</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("body", 1000, 600);
|
||||||
|
function getData() {
|
||||||
|
var returnVal = [];
|
||||||
|
var c = Math.ceil(Math.random() * 12);
|
||||||
|
for (var i = 1; i <= c; i++) {
|
||||||
|
returnVal.push({ "SKU":"SKU " + i, "Volume": 5000 - Math.floor(Math.random() * 10000), "Value": 5000 - Math.floor(Math.random() * 10000)});
|
||||||
|
}
|
||||||
|
return returnVal;
|
||||||
|
}
|
||||||
|
var myChart = new dimple.chart(svg, getData());
|
||||||
|
myChart.addMeasureAxis("x", "Volume");
|
||||||
|
myChart.addMeasureAxis("y", "Value");
|
||||||
|
myChart.addMeasureAxis("z", "Value");
|
||||||
|
myChart.addSeries("SKU", dimple.plot.bubble);
|
||||||
|
myChart.draw(1000);
|
||||||
|
|
||||||
|
setInterval(function () {
|
||||||
|
myChart.data = getData();
|
||||||
|
myChart.draw(1000);
|
||||||
|
}, 2000);
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,37 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Test Bed</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svg = dimple.newSvg("body", 1000, 600);
|
||||||
|
function getData() {
|
||||||
|
var returnVal = [];
|
||||||
|
var bc = Math.ceil(Math.random() * 4);
|
||||||
|
var c = Math.ceil(Math.random() * 12);
|
||||||
|
for (var k = 1; k <= bc; k++) {
|
||||||
|
for (var i = 1; i <= c; i++) {
|
||||||
|
returnVal.push({ "Brand":"Brand " + k, "SKU":"SKU " + i, "Volume": 5000 - Math.floor(Math.random() * 10000), "Value": 5000 - Math.floor(Math.random() * 10000)});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return returnVal;
|
||||||
|
}
|
||||||
|
var myChart = new dimple.chart(svg, getData());
|
||||||
|
myChart.addAxis("x", "Brand", "Value").showPercent = true;
|
||||||
|
myChart.addPctAxis("y", "Value");
|
||||||
|
myChart.addSeries("SKU", dimple.plot.bar);
|
||||||
|
myChart.draw();
|
||||||
|
|
||||||
|
setInterval(function () {
|
||||||
|
myChart.data = getData();
|
||||||
|
myChart.draw(1000);
|
||||||
|
}, 2000);
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(70, 30, 490, 310)
|
||||||
|
myChart.addCategoryAxis("x", "Month");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries(null, dimple.plot.area);
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,18 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, 500, 330)
|
||||||
|
myChart.addCategoryAxis("x", ["Owner", "Month"]);
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("Owner", dimple.plot.area);
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,19 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(70, 30, 340, 330)
|
||||||
|
myChart.addCategoryAxis("x", ["Owner", "Month"]);
|
||||||
|
myChart.addPctAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("SKU", dimple.plot.area);
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(430, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,19 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(70, 30, 340, 330)
|
||||||
|
myChart.addCategoryAxis("x", ["Owner", "Month"]);
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("SKU", dimple.plot.area);
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(430, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(70, 30, 490, 310)
|
||||||
|
myChart.addCategoryAxis("x", "Month");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.area);
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(70, 30, 490, 310)
|
||||||
|
myChart.addCategoryAxis("x", "Month");
|
||||||
|
myChart.addPctAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.area);
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", "Month");
|
||||||
|
var s = myChart.addSeries(null, dimple.plot.area);
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,18 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(90, 30, 470, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", ["Owner", "Month"]);
|
||||||
|
var s = myChart.addSeries("Owner", dimple.plot.area);
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,19 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(90, 30, 320, 330)
|
||||||
|
myChart.addPctAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", ["Owner", "Month"]);
|
||||||
|
var s = myChart.addSeries("SKU", dimple.plot.area);
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(430, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,19 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(90, 30, 320, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", ["Owner", "Month"]);
|
||||||
|
var s = myChart.addSeries("SKU", dimple.plot.area);
|
||||||
|
s.lineWeight = 1;
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(430, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", "Month");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.area);
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330);
|
||||||
|
myChart.addPctAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", "Month");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.area);
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,15 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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", "Month");
|
||||||
|
myChart.addSeries(null, dimple.plot.bar);
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bar);
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
|
||||||
|
myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
|
||||||
|
myChart.addPctAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
|
||||||
|
myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, 510, 310)
|
||||||
|
myChart.addPctAxis("x", "Unit Sales");
|
||||||
|
var y = myChart.addAxis("y", "Channel", "Unit Sales");
|
||||||
|
y.showPercent = true;
|
||||||
|
myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
|
myChart.addLegend(220, 10, 380, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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", "Month");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bar);
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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.addPctAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", "Month");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bar);
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(100, 50, 410, 310)
|
||||||
|
myChart.addCategoryAxis("x", ["Channel", "Price Tier"]);
|
||||||
|
myChart.addCategoryAxis("y", "Owner");
|
||||||
|
myChart.addSeries("Price Tier", dimple.plot.bar);
|
||||||
|
myChart.addLegend(240, 10, 330, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,15 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, 30, 510, 310)
|
||||||
|
myChart.addCategoryAxis("x", "Month");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries(null, dimple.plot.bar);
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, 30, 510, 330)
|
||||||
|
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bar);
|
||||||
|
myChart.addLegend(65, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, 45, 510, 315)
|
||||||
|
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, 45, 510, 315)
|
||||||
|
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||||
|
myChart.addPctAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
|
myChart.addLegend(200, 10, 380, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, 510, 310)
|
||||||
|
var x = myChart.addAxis("x", "Channel", "Unit Sales");
|
||||||
|
x.showPercent = true;
|
||||||
|
myChart.addPctAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Owner", dimple.plot.bar);
|
||||||
|
myChart.addLegend(240, 10, 330, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, 30, 510, 310)
|
||||||
|
myChart.addCategoryAxis("x", "Month");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bar);
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, 30, 510, 310)
|
||||||
|
myChart.addCategoryAxis("x", "Month");
|
||||||
|
myChart.addPctAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bar);
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
|
||||||
|
myChart.addMeasureAxis("z", "Operating Profit");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bubble);
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,20 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, "Date", [
|
||||||
|
"01/07/2012", "01/08/2012", "01/09/2012",
|
||||||
|
"01/10/2012", "01/11/2012", "01/12/2012"]);
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(75, 30, 480, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", "Month");
|
||||||
|
myChart.addMeasureAxis("z", "Operating Profit");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bubble);
|
||||||
|
myChart.addLegend(180, 10, 360, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,19 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(100, 50, 410, 310)
|
||||||
|
myChart.addCategoryAxis("x", ["Channel", "Price Tier"]);
|
||||||
|
myChart.addCategoryAxis("y", "Owner");
|
||||||
|
var z = myChart.addMeasureAxis("z", "Distribution");
|
||||||
|
var s = myChart.addSeries("Price Tier", dimple.plot.bubble);
|
||||||
|
s.aggregate = dimple.aggregateMethod.max;
|
||||||
|
z.overrideMax = 200;
|
||||||
|
myChart.addLegend(240, 10, 330, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, "Date", "01/12/2012");
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 500, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addMeasureAxis("y", "Operating Profit");
|
||||||
|
myChart.addSeries(["SKU", "Channel"], dimple.plot.bubble);
|
||||||
|
myChart.addLegend(200, 10, 360, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,18 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, "Date", "01/12/2012");
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 500, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales Monthly Change");
|
||||||
|
myChart.addMeasureAxis("y", "Price Monthly Change");
|
||||||
|
myChart.addMeasureAxis("z", "Operating Profit");
|
||||||
|
myChart.addSeries(["SKU", "Channel"], dimple.plot.bubble);
|
||||||
|
myChart.addLegend(200, 10, 360, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
|
||||||
|
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addMeasureAxis("z", "Operating Profit");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bubble);
|
||||||
|
myChart.addLegend(70, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,20 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, "Date", [
|
||||||
|
"01/07/2012", "01/08/2012", "01/09/2012",
|
||||||
|
"01/10/2012", "01/11/2012", "01/12/2012"]);
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 500, 330)
|
||||||
|
myChart.addCategoryAxis("x", "Month");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addMeasureAxis("z", "Operating Profit");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bubble);
|
||||||
|
myChart.addLegend(140, 10, 360, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(70, 30, 490, 310)
|
||||||
|
myChart.addCategoryAxis("x", "Month");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries(null, dimple.plot.line);
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, 500, 330)
|
||||||
|
myChart.addCategoryAxis("x", ["Owner", "Month"]);
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries("Owner", dimple.plot.line);
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,18 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(70, 30, 420, 330)
|
||||||
|
myChart.addCategoryAxis("x", ["Owner", "Month"]);
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
var s = myChart.addSeries(["Brand"], dimple.plot.line);
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(510, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(70, 30, 490, 310)
|
||||||
|
myChart.addCategoryAxis("x", "Month");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.line);
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330);
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", "Month");
|
||||||
|
var s = myChart.addSeries(null, dimple.plot.line);
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(90, 30, 470, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", ["Owner", "Month"]);
|
||||||
|
var s = myChart.addSeries("Owner", dimple.plot.line);
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,18 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(90, 30, 400, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", ["Owner", "Month"]);
|
||||||
|
var s = myChart.addSeries(["Brand"], dimple.plot.line);
|
||||||
|
s.barGap = 0.05;
|
||||||
|
myChart.addLegend(510, 20, 100, 300, "left");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", "Month");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.line);
|
||||||
|
myChart.addLegend(60, 10, 500, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addCategoryAxis("y", ["Price Tier", "Channel"]);
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bubble);
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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", "Month");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bubble);
|
||||||
|
myChart.addLegend(180, 10, 360, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(100, 50, 410, 310)
|
||||||
|
myChart.addCategoryAxis("x", ["Channel", "Price Tier"]);
|
||||||
|
myChart.addCategoryAxis("y", "Owner");
|
||||||
|
myChart.addSeries("Price Tier", dimple.plot.bubble);
|
||||||
|
myChart.addLegend(240, 10, 330, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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, "Date", "01/12/2012");
|
||||||
|
var myChart = new dimple.chart(svg, data);
|
||||||
|
myChart.setBounds(60, 30, 500, 330)
|
||||||
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
|
myChart.addMeasureAxis("y", "Operating Profit");
|
||||||
|
myChart.addSeries(["SKU", "Channel"], dimple.plot.bubble);
|
||||||
|
myChart.addLegend(200, 10, 360, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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(80, 30, 480, 330)
|
||||||
|
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bubble);
|
||||||
|
myChart.addLegend(60, 10, 510, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div id="chartContainer">
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||||
|
<script src="/dist/dimple.v1.min.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.addCategoryAxis("x", "Month");
|
||||||
|
myChart.addMeasureAxis("y", "Unit Sales");
|
||||||
|
myChart.addSeries("Channel", dimple.plot.bubble);
|
||||||
|
myChart.addLegend(180, 10, 360, 20, "right");
|
||||||
|
myChart.draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "dimple",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"licenses": [
|
||||||
|
{
|
||||||
|
"type": "MIT",
|
||||||
|
"url": "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"express": "3.x",
|
||||||
|
"grunt": "~0.4.1",
|
||||||
|
"grunt-contrib-jshint": "~0.1.1",
|
||||||
|
"grunt-contrib-nodeunit": "~0.1.2",
|
||||||
|
"grunt-contrib-concat": "~0.2.0",
|
||||||
|
"grunt-contrib-uglify": "~0.2.0"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,14 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/begin.js
|
||||||
|
|
||||||
|
// Create the stub object
|
||||||
|
var dimple = {
|
||||||
|
version: "1.0.0",
|
||||||
|
plot: {},
|
||||||
|
aggregateMethod: {}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Wrap all application code in a self-executing function
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
|
@ -0,0 +1,2 @@
|
||||||
|
})();
|
||||||
|
// End dimple
|
|
@ -0,0 +1,46 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/methods/_addGradient.js
|
||||||
|
var _addGradient = function (seriesValue, id, categoryAxis, data, chart, duration, colorProperty) {
|
||||||
|
var grad = chart.svg.select("#" + id);
|
||||||
|
var cats = [];
|
||||||
|
data.forEach(function (d) {
|
||||||
|
if (cats.indexOf(d[categoryAxis.categoryFields[0]]) == -1) {
|
||||||
|
cats.push(d[categoryAxis.categoryFields[0]]);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
var field = categoryAxis.position + "Field";
|
||||||
|
var transition = true;
|
||||||
|
if (grad.node() == null) {
|
||||||
|
transition = false;
|
||||||
|
grad = chart.svg.append("linearGradient")
|
||||||
|
.attr("id", id)
|
||||||
|
.attr("gradientUnits", "userSpaceOnUse")
|
||||||
|
.attr("x1", (categoryAxis.position == "x" ? categoryAxis._scale(cats[0]) + ((chart.width / cats.length) / 2) : 0))
|
||||||
|
.attr("y1", (categoryAxis.position == "y" ? categoryAxis._scale(cats[0]) - ((chart.height / cats.length) / 2) : 0))
|
||||||
|
.attr("x2", (categoryAxis.position == "x" ? categoryAxis._scale(cats[cats.length - 1]) + ((chart.width / cats.length) / 2) : 0))
|
||||||
|
.attr("y2", (categoryAxis.position == "y" ? categoryAxis._scale(cats[cats.length - 1]) - ((chart.height / cats.length) / 2) : 0));
|
||||||
|
}
|
||||||
|
var colors = [];
|
||||||
|
cats.forEach(function (cat, j) {
|
||||||
|
var row = {};
|
||||||
|
for (var k = 0; k < data.length; k++) { if (data[k].aggField == seriesValue && data[k][field] == cat) { row = data[k]; break; } }
|
||||||
|
colors.push({ offset: Math.round((j / (cats.length - 1)) * 100) + "%", color: row[colorProperty] });
|
||||||
|
}, this);
|
||||||
|
if (transition) {
|
||||||
|
grad.selectAll("stop")
|
||||||
|
.data(colors)
|
||||||
|
.transition().duration(duration)
|
||||||
|
.attr("offset", function(d) { return d.offset; })
|
||||||
|
.attr("stop-color", function(d) { return d.color; });
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
grad.selectAll("stop")
|
||||||
|
.data(colors)
|
||||||
|
.enter()
|
||||||
|
.append("stop")
|
||||||
|
.attr("offset", function(d) { return d.offset; })
|
||||||
|
.attr("stop-color", function(d) { return d.color; });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,161 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/methods/_helpers.js
|
||||||
|
var _helpers = {
|
||||||
|
|
||||||
|
// Calculate the centre x position
|
||||||
|
cx: function (d, chart, series) {
|
||||||
|
if (series.x.measure != null && series.x.measure != undefined) {
|
||||||
|
return series.x._scale(d.cx);
|
||||||
|
}
|
||||||
|
else if (series.x.categoryFields != null && series.x.categoryFields != undefined && series.x.categoryFields.length >= 2) {
|
||||||
|
return series.x._scale(d.cx) + _helpers.xGap(d, chart, series) + ((d.xOffset + 0.5) * (((chart.width / series.x._max) - 2 * _helpers.xGap(d, chart, series)) * d.width));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return series.x._scale(d.cx) + ((chart.width / series.x._max) / 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the centre y position
|
||||||
|
cy: function (d, chart, series) {
|
||||||
|
if (series.y.measure != null && series.y.measure != undefined) {
|
||||||
|
return series.y._scale(d.cy);
|
||||||
|
}
|
||||||
|
else if (series.y.categoryFields != null && series.y.categoryFields != undefined && series.y.categoryFields.length >= 2) {
|
||||||
|
return (series.y._scale(d.cy) - (chart.height / series.y._max)) + _helpers.yGap(d, chart, series) + ((d.yOffset + 0.5) * (((chart.height / series.y._max) - 2 * _helpers.yGap(d, chart, series)) * d.height));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return series.y._scale(d.cy) - ((chart.height / series.y._max) / 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the radius
|
||||||
|
r: function (d, chart, series) {
|
||||||
|
if (series.z == null || series.z == undefined) {
|
||||||
|
return 5;
|
||||||
|
}
|
||||||
|
else if (series.z._hasMeasure()) {
|
||||||
|
return series.z._scale(d.r);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return series.z._scale(chart.height / 100);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the x gap for bar type charts
|
||||||
|
xGap: function (d, chart, series) {
|
||||||
|
if ((series.x.measure == null || series.x.measure == undefined) && series.barGap > 0) {
|
||||||
|
return ((chart.width / series.x._max) * (series.barGap > 0.99 ? 0.99 : series.barGap)) / 2;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the x gap for clusters within bar type charts
|
||||||
|
xClusterGap: function (d, chart, series) {
|
||||||
|
if (series.x.categoryFields != null && series.x.categoryFields != undefined && series.x.categoryFields.length >= 2 && series.clusterBarGap > 0) {
|
||||||
|
return (d.width * ((chart.width / series.x._max) - (_helpers.xGap(d, chart, series) * 2)) * (series.clusterBarGap > 0.99 ? 0.99 : series.clusterBarGap)) / 2;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the y gap for bar type charts
|
||||||
|
yGap: function (d, chart, series) {
|
||||||
|
if ((series.y.measure == null || series.y.measure == undefined) && series.barGap > 0) {
|
||||||
|
return ((chart.height / series.y._max) * (series.barGap > 0.99 ? 0.99 : series.barGap)) / 2;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the y gap for clusters within bar type charts
|
||||||
|
yClusterGap: function (d, chart, series) {
|
||||||
|
if (series.y.categoryFields != null && series.y.categoryFields != undefined && series.y.categoryFields.length >= 2 && series.clusterBarGap > 0) {
|
||||||
|
return (d.height * ((chart.height / series.y._max) - (_helpers.yGap(d, chart, series) * 2)) * (series.clusterBarGap > 0.99 ? 0.99 : series.clusterBarGap)) / 2;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the top left x position for bar type charts
|
||||||
|
x: function (d, chart, series) {
|
||||||
|
return series.x._scale(d.x)
|
||||||
|
+ _helpers.xGap(d, chart, series)
|
||||||
|
+ (d.xOffset * (_helpers.width(d, chart, series) + 2 * _helpers.xClusterGap(d, chart, series)))
|
||||||
|
+ _helpers.xClusterGap(d, chart, series);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the top left y position for bar type charts
|
||||||
|
y: function (d, chart, series) {
|
||||||
|
if (series.y.measure != null && series.y.measure != undefined) {
|
||||||
|
return series.y._scale(d.y);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return (series.y._scale(d.y) - (chart.height / series.y._max))
|
||||||
|
+ _helpers.yGap(d, chart, series)
|
||||||
|
+ (d.yOffset * (_helpers.height(d, chart, series) + 2 * _helpers.yClusterGap(d, chart, series)))
|
||||||
|
+ _helpers.yClusterGap(d, chart, series);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the width for bar type charts
|
||||||
|
width: function (d, chart, series) {
|
||||||
|
if (series.x.measure != null && series.x.measure != undefined) {
|
||||||
|
return Math.abs(series.x._scale(d.width) - series.x._scale(0));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return d.width
|
||||||
|
* ((chart.width / series.x._max) - (_helpers.xGap(d, chart, series) * 2))
|
||||||
|
- (_helpers.xClusterGap(d, chart, series) * 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the height for bar type charts
|
||||||
|
height: function (d, chart, series) {
|
||||||
|
if (series.y.measure != null && series.y.measure != undefined) {
|
||||||
|
return Math.abs(series.y._scale(0) - series.y._scale(d.height));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return d.height
|
||||||
|
* ((chart.height / series.y._max) - (_helpers.yGap(d, chart, series) * 2))
|
||||||
|
- (_helpers.yClusterGap(d, chart, series) * 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the opacity for series
|
||||||
|
opacity: function (d, chart, series) {
|
||||||
|
if (series.c != null && series.c != undefined) {
|
||||||
|
return d.opacity;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return chart.getColor(d.aggField.slice(-1)[0]).opacity;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the fill coloring for series
|
||||||
|
fill: function (d, chart, series) {
|
||||||
|
if (series.c != null && series.c != undefined) {
|
||||||
|
return d.fill;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return chart.getColor(d.aggField.slice(-1)[0]).fill;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Calculate the stroke coloring for series
|
||||||
|
stroke: function (d, chart, series) {
|
||||||
|
if (series.c != null && series.c != undefined) {
|
||||||
|
return d.stroke;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return chart.getColor(d.aggField.slice(-1)[0]).stroke;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/methods/filterData.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple#wiki-filterData
|
||||||
|
dimple.filterData = function (data, field, filterValues) {
|
||||||
|
if (field != null && filterValues != null) {
|
||||||
|
// Build an array from a single filter value or use the array
|
||||||
|
if (filterValues != null && filterValues != undefined) { filterValues = [].concat(filterValues); }
|
||||||
|
// The data to return
|
||||||
|
var returnData = [];
|
||||||
|
// Iterate all the data
|
||||||
|
data.forEach(function (d, i) {
|
||||||
|
// If an invalid field is passed, just pass the data
|
||||||
|
if (d[field] == null) {
|
||||||
|
returnData.push(d);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (filterValues.indexOf([].concat(d[field]).join("/")) > -1) {
|
||||||
|
returnData.push(d);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
// Return the filtered data
|
||||||
|
return returnData;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/methods/getUniqueValues.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple#wiki-getUniqueValues
|
||||||
|
dimple.getUniqueValues = function (data, fields) {
|
||||||
|
var returnlist = [];
|
||||||
|
// Put single values into single value arrays
|
||||||
|
if (fields != null && fields != undefined) {
|
||||||
|
fields = [].concat(fields);
|
||||||
|
// Iterate every row in the data
|
||||||
|
data.forEach(function (d, i) {
|
||||||
|
// Handle multiple category values by iterating the fields in the row and concatonate the values
|
||||||
|
var field = "";
|
||||||
|
fields.forEach(function (f, i) {
|
||||||
|
if (i > 0) { field += "/"; } field += d[f];
|
||||||
|
}, this);
|
||||||
|
// If the field was not found, add it to the end of the categories array
|
||||||
|
if (returnlist.indexOf(field) == -1) {
|
||||||
|
returnlist.push(field);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
return returnlist;
|
||||||
|
};
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/methods/newSvg.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple#wiki-newSvg
|
||||||
|
dimple.newSvg = function (parentSelector, width, height) {
|
||||||
|
if (parent == null) { parent = "body"; }
|
||||||
|
return d3.select(parentSelector).append("svg").attr("width", width).attr("height", height);
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/aggregateMethod/avg.js
|
||||||
|
dimple.aggregateMethod.avg = function (lhs, lhsCount, rhs, rhsCount) {
|
||||||
|
lhs = (lhs == null || lhs == undefined ? 0 : lhs);
|
||||||
|
rhs = (rhs == null || rhs == undefined ? 0 : rhs);
|
||||||
|
return ((parseFloat(lhs) * parseFloat(lhsCount)) + (parseFloat(rhs) * parseFloat(rhsCount))) / (parseFloat(lhsCount) + parseFloat(rhsCount));
|
||||||
|
};
|
|
@ -0,0 +1,6 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/aggregateMethod/count.js
|
||||||
|
dimple.aggregateMethod.count = function (lhs, lhsCount, rhs, rhsCount) {
|
||||||
|
return parseFloat(lhsCount) + parseFloat(rhsCount);
|
||||||
|
};
|
|
@ -0,0 +1,6 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/aggregateMethod/max.js
|
||||||
|
dimple.aggregateMethod.max = function (lhs, lhsCount, rhs, rhsCount) {
|
||||||
|
return parseFloat(lhs) > parseFloat(rhs) ? parseFloat(lhs) : parseFloat(rhs);
|
||||||
|
};
|
|
@ -0,0 +1,6 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/aggregateMethod/min.js
|
||||||
|
dimple.aggregateMethod.min = function (lhs, lhsCount, rhs, rhsCount) {
|
||||||
|
return (lhs == null ? parseFloat(rhs) : (parseFloat(lhs) < parseFloat(rhs) ? parseFloat(lhs) : parseFloat(rhs)));
|
||||||
|
};
|
|
@ -0,0 +1,8 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/aggregateMethod/sum.js
|
||||||
|
dimple.aggregateMethod.sum = function (lhs, lhsCount, rhs, rhsCount) {
|
||||||
|
lhs = (lhs == null || lhs == undefined ? 0 : lhs);
|
||||||
|
rhs = (rhs == null || rhs == undefined ? 0 : rhs);
|
||||||
|
return parseFloat(lhs) + parseFloat(rhs);
|
||||||
|
}
|
|
@ -0,0 +1,41 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/axis/begin.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis
|
||||||
|
dimple.axis = function (chart, position, categoryFields, measure) {
|
||||||
|
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-chart
|
||||||
|
this.chart = chart;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-position
|
||||||
|
this.position = position;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-categoryFields
|
||||||
|
this.categoryFields = categoryFields;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-measure
|
||||||
|
this.measure = measure;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-hidden
|
||||||
|
this.hidden = false;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-showPercent
|
||||||
|
this.showPercent = false;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-colors
|
||||||
|
this.colors = null;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-overrideMin
|
||||||
|
this.overrideMin = null;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-overrideMax
|
||||||
|
this.overrideMax = null;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-shapes
|
||||||
|
this.shapes = null;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-showGridlines
|
||||||
|
this.showGridlines = null;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-gridlineShapes
|
||||||
|
this.gridlineShapes = null;
|
||||||
|
|
||||||
|
// The scale determined by the update method
|
||||||
|
this._scale = null;
|
||||||
|
// The minimum and maximum axis values
|
||||||
|
this._min = 0;
|
||||||
|
this._max = 0;
|
||||||
|
// Chart origin before and after an update. This helps
|
||||||
|
// with transitions
|
||||||
|
this._previousOrigin = null;
|
||||||
|
this._origin = null;
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
};
|
||||||
|
// End dimple.axis
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/axis/methods/_draw.js
|
||||||
|
this._draw = null;
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/axis/methods/_getFormat.js
|
||||||
|
this._getFormat = function () {
|
||||||
|
var returnFormat,
|
||||||
|
max,
|
||||||
|
min,
|
||||||
|
len,
|
||||||
|
chunks,
|
||||||
|
suffix,
|
||||||
|
dp;
|
||||||
|
if (this.showPercent) {
|
||||||
|
returnFormat = d3.format("%");
|
||||||
|
}
|
||||||
|
else if (this.measure !== null) {
|
||||||
|
max = Math.floor(Math.abs(this._max), 0).toString();
|
||||||
|
min = Math.floor(Math.abs(this._min), 0).toString();
|
||||||
|
len = Math.max(min.length, max.length);
|
||||||
|
if (len > 3) {
|
||||||
|
chunks = Math.min(Math.floor((len - 1) / 3), 4);
|
||||||
|
suffix = "kmBT".substring(chunks - 1, chunks);
|
||||||
|
dp = (len - chunks * 3 <= 2 ? 1 : 0);
|
||||||
|
returnFormat = function (n) { return (n === 0 ? 0 : d3.format(",." + dp + "f")(n / Math.pow(1000, chunks)) + suffix); };
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
dp = (len <= 2 ? 1 : 0);
|
||||||
|
returnFormat = d3.format(",." + dp + "f");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
returnFormat = function (n) { return n; };
|
||||||
|
}
|
||||||
|
return returnFormat;
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/axis/methods/_hasCategories.js
|
||||||
|
this._hasCategories = function () {
|
||||||
|
return (this.categoryFields != null && this.categoryFields != undefined && this.categoryFields.length > 0);
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/axis/methods/_hasMeasure.js
|
||||||
|
this._hasMeasure = function () {
|
||||||
|
return (this.measure != null && this.measure != undefined);
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,97 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/axis/methods/_update.js
|
||||||
|
this._update = function (refactor) {
|
||||||
|
|
||||||
|
// If the axis is a percentage type axis the bounds must be between -1 and 1. Sometimes
|
||||||
|
// binary rounding means it can fall outside that bound so tidy up here
|
||||||
|
this._min = (this.showPercent && this._min < -1 ? this._min = -1 : this._min);
|
||||||
|
this._max = (this.showPercent && this._max > 1 ? this._max = 1 : this._max);
|
||||||
|
|
||||||
|
// Override or round the min or max
|
||||||
|
this._min = (this.overrideMin != null ? this.overrideMin : this._min);
|
||||||
|
this._max = (this.overrideMax != null ? this.overrideMax : this._max);
|
||||||
|
|
||||||
|
// If this is an x axis
|
||||||
|
if (this.position.length > 0 && this.position[0] == "x") {
|
||||||
|
if (this.measure == null || this.measure == undefined) {
|
||||||
|
var distinctCats = [];
|
||||||
|
this.chart.data.forEach(function (d, i) {
|
||||||
|
if (distinctCats.indexOf(d[this.categoryFields[0]]) == -1) {
|
||||||
|
distinctCats.push(d[this.categoryFields[0]]);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
this._scale = d3.scale.ordinal().rangePoints([this.chart.x, this.chart.x + this.chart.width]).domain(distinctCats.concat([""]));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this._scale = d3.scale.linear().range([this.chart.x, this.chart.x + this.chart.width]).domain([this._min, this._max]).nice();
|
||||||
|
}
|
||||||
|
// If it's visible, orient it at the top or bottom if it's first or second respectively
|
||||||
|
if (!this.hidden) {
|
||||||
|
switch (chart._axisIndex(this, "x")) {
|
||||||
|
case 0: this._draw = d3.svg.axis().orient("bottom").scale(this._scale); break;
|
||||||
|
case 1: this._draw = d3.svg.axis().orient("top").scale(this._scale); break;
|
||||||
|
default: break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// If it's a y axis
|
||||||
|
else if (this.position.length > 0 && this.position[0] == "y") {
|
||||||
|
// Set the height both logical and physical of the axis
|
||||||
|
if (this.measure == null || this.measure == undefined) {
|
||||||
|
var distinctCats = [];
|
||||||
|
this.chart.data.forEach(function (d, i) {
|
||||||
|
if (distinctCats.indexOf(d[this.categoryFields[0]]) == -1) {
|
||||||
|
distinctCats.push(d[this.categoryFields[0]]);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
this._scale = d3.scale.ordinal().rangePoints([this.chart.y + this.chart.height, this.chart.y]).domain(distinctCats.concat([""]));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this._scale = d3.scale.linear().range([this.chart.y + this.chart.height, this.chart.y]).domain([this._min, this._max]).nice();
|
||||||
|
}
|
||||||
|
// if it's visible, orient it at the left or right if it's first or second respectively
|
||||||
|
if (!this.hidden) {
|
||||||
|
switch (chart._axisIndex(this, "y")) {
|
||||||
|
case 0: this._draw = d3.svg.axis().orient("left").scale(this._scale); break;
|
||||||
|
case 1: this._draw = d3.svg.axis().orient("right").scale(this._scale); break;
|
||||||
|
default: break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// If it's a z axis just set the logical range
|
||||||
|
else if (this.position.length > 0 && this.position[0] == "z") {
|
||||||
|
this._scale = d3.scale.linear().range([this.chart.height / 300, this.chart.height / 10]).domain([this._min, this._max]);
|
||||||
|
}
|
||||||
|
// If it's a c axis just set the logical range based on the number of colours. This will be used in the calculation to determin R, G and B values.
|
||||||
|
// The distance between 2 colours will be different for each part of the color and depending on the color so it needs to be done case by case
|
||||||
|
else if (this.position.length > 0 && this.position[0] == "c") {
|
||||||
|
this._scale = d3.scale.linear().range([0, (this.colors == null || this.colors.length == 1 ? 1 : this.colors.length - 1)]).domain([this._min, this._max]);
|
||||||
|
}
|
||||||
|
// Check that the axis ends on a labelled tick
|
||||||
|
if ((refactor == null || refactor == undefined || refactor == false) && this._scale != null && this._scale.ticks != null && this._scale.ticks(10).length > 0) {
|
||||||
|
// Get the ticks determined based on a split of 10
|
||||||
|
var ticks = this._scale.ticks(10);
|
||||||
|
// Get the step between ticks
|
||||||
|
var step = ticks[1] - ticks[0];
|
||||||
|
// Get the remainder
|
||||||
|
var remainder = ((this._max - this._min) % step).toFixed(0);
|
||||||
|
// If the remainder is not zero
|
||||||
|
if (remainder != 0) {
|
||||||
|
// Set the bounds
|
||||||
|
this._max = Math.ceil(this._max/step) * step
|
||||||
|
this._min = Math.floor(this._min/step) * step
|
||||||
|
// Recursively call the method to recalculate the scale. This shouldn't enter this block again.
|
||||||
|
this._update(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Populate the origin
|
||||||
|
var origin = this._scale.copy()(0);
|
||||||
|
if (this._origin != origin) {
|
||||||
|
this._previousOrigin = (this._origin == null ? origin : this._origin);
|
||||||
|
this._origin = origin;
|
||||||
|
}
|
||||||
|
// Return axis for chaining
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/begin.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart
|
||||||
|
dimple.chart = function (svg, data) {
|
||||||
|
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-svg
|
||||||
|
this.svg = svg;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-x
|
||||||
|
this.x = svg[0][0].width.baseVal.value * 0.1;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-y
|
||||||
|
this.y = svg[0][0].height.baseVal.value * 0.1;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-width
|
||||||
|
this.width = svg[0][0].width.baseVal.value * 0.8;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-height
|
||||||
|
this.height = svg[0][0].height.baseVal.value * 0.8;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-data
|
||||||
|
this.data = data;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-noFormats
|
||||||
|
this.noFormats = false;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-axes
|
||||||
|
this.axes = [];
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-series
|
||||||
|
this.series = [];
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-legends
|
||||||
|
this.legends = [];
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-storyboard
|
||||||
|
this.storyboard = null;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-titleShape
|
||||||
|
this.titleShape = null;
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-shapes
|
||||||
|
this.shapes = null;
|
||||||
|
|
||||||
|
// Colors assigned to chart contents. E.g. a series value.
|
||||||
|
this._assignedColors = {};
|
||||||
|
// The next colour index to use, this value is cycled around for all default colours
|
||||||
|
this._nextColor = 0;
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
};
|
||||||
|
// End dimple.chart
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/_axisIndex.js
|
||||||
|
// Return the ordinal value of the passed axis. If an orientation is passed, return the order for the
|
||||||
|
// specific orientation, otherwise return the order from all axes. Returns -1 if the passed axis isn't part of the collection
|
||||||
|
this._axisIndex = function (axis, orientation) {
|
||||||
|
var i = 0;
|
||||||
|
var axisCount = 0;
|
||||||
|
for (i = 0; i < this.axes.length; i++) {
|
||||||
|
if (this.axes[i] == axis) {
|
||||||
|
return axisCount;
|
||||||
|
}
|
||||||
|
if (orientation == null || orientation == undefined || orientation[0] == this.axes[i].position[0]) {
|
||||||
|
axisCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,243 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/_getSeriesData.js
|
||||||
|
// Create a dataset containing positioning information for every series
|
||||||
|
this._getSeriesData = function () {
|
||||||
|
// If there are series
|
||||||
|
if (this.series !== null && this.series !== undefined) {
|
||||||
|
// Iterate all the series
|
||||||
|
this.series.forEach(function (series) {
|
||||||
|
// The data for this series
|
||||||
|
var returnData = [];
|
||||||
|
// Handle multiple category values by iterating the fields in the row and concatonate the values
|
||||||
|
// This is repeated for each axis using a small anon function
|
||||||
|
var getField = function (axis, row) {
|
||||||
|
var returnField = [];
|
||||||
|
if (axis != null && axis._hasCategories()) {
|
||||||
|
axis.categoryFields.forEach(function (cat, i) {
|
||||||
|
returnField.push(row[cat]);
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
return returnField;
|
||||||
|
};
|
||||||
|
// Catch a non-numeric value and re-calc as count
|
||||||
|
var useCount = { x: false, y: false, z: false, c: false };
|
||||||
|
// If the elements are grouped a unique list of secondary category values will be required
|
||||||
|
var secondaryElements = { x: [], y: [] };
|
||||||
|
// Iterate every row in the data to calculate the return values
|
||||||
|
this.data.forEach(function (d, i) {
|
||||||
|
// Reset the index
|
||||||
|
var foundIndex = -1;
|
||||||
|
var xField = getField(series.x, d);
|
||||||
|
var yField = getField(series.y, d);
|
||||||
|
var zField = getField(series.z, d);
|
||||||
|
// Get the aggregate field using the other fields if necessary
|
||||||
|
var aggField = [];
|
||||||
|
if (series.categoryFields == null || series.categoryFields == undefined || series.categoryFields.length == 0) {
|
||||||
|
aggField = ["All"];
|
||||||
|
}
|
||||||
|
else if (series.categoryFields.length == 1 && d[series.categoryFields[0]] == undefined) {
|
||||||
|
aggField = [series.categoryFields[0]];
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
series.categoryFields.forEach(function (cat, j) {
|
||||||
|
aggField.push(d[cat]);
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
// Add a key
|
||||||
|
var key = aggField.join("/") + "_" + xField.join("/") + "_" + yField.join("/") + "_" + zField.join("/");
|
||||||
|
// See if this field has already been added.
|
||||||
|
for (var k = 0; k < returnData.length; k++) {
|
||||||
|
if (returnData[k].key == key) {
|
||||||
|
foundIndex = k;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// If the field was not added, do so here
|
||||||
|
if (foundIndex == -1) {
|
||||||
|
var newRow = {
|
||||||
|
key: key, aggField: aggField,
|
||||||
|
xField: xField, xValue: null, xCount: 0,
|
||||||
|
yField: yField, yValue: null, yCount: 0,
|
||||||
|
zField: zField, zValue: null, zCount: 0,
|
||||||
|
cValue: 0, cCount: 0,
|
||||||
|
x: 0, y: 0,
|
||||||
|
xOffset: 0, yOffset: 0,
|
||||||
|
width: 0, height: 0,
|
||||||
|
cx: 0, cy: 0,
|
||||||
|
xBound: 0, yBound: 0,
|
||||||
|
xValueList: [], yValueList: [], zValueList: [], cValueList: [],
|
||||||
|
fill: {}, stroke: {} };
|
||||||
|
returnData.push(newRow);
|
||||||
|
foundIndex = returnData.length - 1;
|
||||||
|
}
|
||||||
|
// Update the return data for the passed axis
|
||||||
|
var updateData = function (axis, data, storyboard) {
|
||||||
|
var passStoryCheck = true;
|
||||||
|
if (storyboard != null) {
|
||||||
|
var selectStoryValue = storyboard.getFrameValue();
|
||||||
|
var compare = "";
|
||||||
|
storyboard.categoryFields.forEach(function (cat, m) {
|
||||||
|
if (m > 0) {
|
||||||
|
compare += "/";
|
||||||
|
}
|
||||||
|
compare += d[cat];
|
||||||
|
passStoryCheck = (compare == selectStoryValue);
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
if (axis != null && axis != undefined && axis.measure != null && axis.measure != undefined) {
|
||||||
|
if (passStoryCheck) {
|
||||||
|
var retRow = returnData[foundIndex];
|
||||||
|
// Keep a distinct list of values to calculate a distinct count in the case of a non-numeric value being found
|
||||||
|
if (retRow[axis.position + "ValueList"].indexOf(d[axis.measure]) == -1) {
|
||||||
|
retRow[axis.position + "ValueList"].push(d[axis.measure])
|
||||||
|
}
|
||||||
|
// The code above is outside this check for non-numeric values because we might encounter one far down the list, and
|
||||||
|
// want to have a record of all values so far.
|
||||||
|
if (isNaN(parseFloat(d[axis.measure]))) {
|
||||||
|
useCount[axis.position] = true;
|
||||||
|
}
|
||||||
|
// Set the value using the aggregate function method
|
||||||
|
retRow[axis.position + "Value"] = series.aggregate(retRow[axis.position + "Value"], retRow[axis.position + "Count"], d[axis.measure], 1);
|
||||||
|
retRow[axis.position + "Count"]++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Get secondary elements if necessary
|
||||||
|
if (axis != null && axis != undefined && axis._hasCategories() && axis.categoryFields.length > 1 && secondaryElements[axis.position] != undefined) {
|
||||||
|
if (secondaryElements[axis.position].indexOf(d[axis.categoryFields[1]]) == -1) {
|
||||||
|
secondaryElements[axis.position].push(d[axis.categoryFields[1]]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// Update all the axes
|
||||||
|
updateData(series.x, this.data, this.storyboard);
|
||||||
|
updateData(series.y, this.data, this.storyboard);
|
||||||
|
updateData(series.z, this.data, this.storyboard);
|
||||||
|
updateData(series.c, this.data, this.storyboard);
|
||||||
|
}, this);
|
||||||
|
// Get the x and y totals for percentages. This cannot be done in the loop above as we need the data aggregated before we get an abs total.
|
||||||
|
// otherwise it will wrongly account for negatives and positives rolled together.
|
||||||
|
var totals = { x: [], y: [], z: [] };
|
||||||
|
var colorBounds = { min: null, max: null };
|
||||||
|
returnData.forEach(function (ret, i) {
|
||||||
|
if (series.x != null) {
|
||||||
|
if (useCount.x == true) { ret.xValue = ret.xValueList.length; }
|
||||||
|
var tot = (totals.x[ret.xField.join("/")] == null ? 0 : totals.x[ret.xField.join("/")]) + (series.y._hasMeasure() ? Math.abs(ret.yValue) : 0);
|
||||||
|
totals.x[ret.xField.join("/")] = tot;
|
||||||
|
}
|
||||||
|
if (series.y != null) {
|
||||||
|
if (useCount.y == true) { ret.yValue = ret.yValueList.length; }
|
||||||
|
var tot = (totals.y[ret.yField.join("/")] == null ? 0 : totals.y[ret.yField.join("/")]) + (series.x._hasMeasure() ? Math.abs(ret.xValue) : 0);
|
||||||
|
totals.y[ret.yField.join("/")] = tot;
|
||||||
|
}
|
||||||
|
if (series.z != null) {
|
||||||
|
if (useCount.z == true) { ret.zValue = ret.zValueList.length; }
|
||||||
|
var tot = (totals.z[ret.zField.join("/")] == null ? 0 : totals.z[ret.zField.join("/")]) + (series.z._hasMeasure() ? Math.abs(ret.zValue) : 0);
|
||||||
|
totals.z[ret.zField.join("/")] = tot;
|
||||||
|
}
|
||||||
|
if (series.c != null) {
|
||||||
|
if (colorBounds.min == null || ret.cValue < colorBounds.min) { colorBounds.min = ret.cValue; }
|
||||||
|
if (colorBounds.max == null || ret.cValue > colorBounds.max) { colorBounds.max = ret.cValue; }
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
// Before calculating the positions we need to sort elements
|
||||||
|
// TODO - Extend this to be user flexible
|
||||||
|
returnData.sort(function (a, b) {
|
||||||
|
if (a.aggField != b.aggField) { return (a.aggField.join("/") < b.aggField.join("/") ? -1 : 1); }
|
||||||
|
else if (a.xField != b.xField) { return (a.xField.join("/") < b.xField.join("/") ? -1 : 1); }
|
||||||
|
else if (a.yField != b.yField) { return (a.yField.join("/") < b.yField.join("/") ? -1 : 1); }
|
||||||
|
else if (a.zField != b.zField) { return (a.zField.join("/") < b.zField.join("/") ? -1 : 1); }
|
||||||
|
else { return 0; }
|
||||||
|
});
|
||||||
|
// Set all the dimension properties of the data
|
||||||
|
var running = { x: [], y: [], z: [] };
|
||||||
|
var addedCats = [];
|
||||||
|
var catTotals = {};
|
||||||
|
var grandTotals = { x: 0, y: 0, z: 0 };
|
||||||
|
for (var key in totals.x) { if (totals.x.hasOwnProperty(key)) { grandTotals.x += totals.x[key]; } }
|
||||||
|
for (var key in totals.y) { if (totals.y.hasOwnProperty(key)) { grandTotals.y += totals.y[key]; } }
|
||||||
|
for (var key in totals.z) { if (totals.z.hasOwnProperty(key)) { grandTotals.z += totals.z[key]; } }
|
||||||
|
returnData.forEach(function (ret, i) {
|
||||||
|
var getAxisData = function (axis, opp, size) {
|
||||||
|
if (axis != null && axis != undefined) {
|
||||||
|
var pos = axis.position;
|
||||||
|
if (!axis._hasCategories()) {
|
||||||
|
var value = (axis.showPercent ? ret[pos + "Value"] / totals[opp][ret[opp + "Field"].join("/")] : ret[pos + "Value"]);
|
||||||
|
var totalField = ret[opp + "Field"].join("/") + (ret[pos + "Value"] >= 0);
|
||||||
|
var cumValue = running[pos][totalField] = ((running[pos][totalField] == null || pos == "z") ? 0 : running[pos][totalField]) + value;
|
||||||
|
var selectValue = ret[pos + "Bound"] = ret["c" + pos] = (((pos == "x" || pos == "y") && series.stacked) ? cumValue : value);
|
||||||
|
ret[size] = value;
|
||||||
|
ret[pos] = selectValue - (((pos == "x" && value >= 0) || (pos == "y" && value <= 0)) ? value : 0);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (axis._hasMeasure()) {
|
||||||
|
var totalField = ret[axis.position + "Field"].join("/");
|
||||||
|
var value = (axis.showPercent ? totals[axis.position][totalField] / grandTotals[axis.position] : totals[axis.position][totalField]);
|
||||||
|
if (addedCats.indexOf(totalField) == -1) {
|
||||||
|
catTotals[totalField] = value + (addedCats.length > 0 ? catTotals[addedCats[addedCats.length - 1]] : 0);
|
||||||
|
addedCats.push(totalField);
|
||||||
|
}
|
||||||
|
var selectValue = ret[pos + "Bound"] = ret["c" + pos] = (((pos == "x" || pos == "y") && series.stacked) ? catTotals[totalField] : value);
|
||||||
|
ret[size] = value;
|
||||||
|
ret[pos] = selectValue - (((pos == "x" && value >= 0) || (pos == "y" && value <= 0)) ? value : 0);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret[pos] = ret["c" + pos] = ret[pos + "Field"][0];
|
||||||
|
ret[size] = 1;
|
||||||
|
if (secondaryElements[pos] != undefined && secondaryElements[pos] != null && secondaryElements[pos].length >= 2) {
|
||||||
|
ret[pos + "Offset"] = secondaryElements[pos].indexOf(ret[pos + "Field"][1]);
|
||||||
|
ret[size] = 1 / secondaryElements[pos].length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
getAxisData(series.x, "y", "width");
|
||||||
|
getAxisData(series.y, "x", "height");
|
||||||
|
getAxisData(series.z, "z", "r");
|
||||||
|
|
||||||
|
// If there is a color axis
|
||||||
|
if (series.c != null && colorBounds.min != colorBounds.max) {
|
||||||
|
// Initialise the base and target color
|
||||||
|
var baseColor, targetColor;
|
||||||
|
// Limit the bounds of the color value to be within the range. Users may override the axis bounds and this
|
||||||
|
// allows a 2 color scale rather than blending if the min and max are set to 0 and 0.01 for example negative values
|
||||||
|
// and zero value would be 1 color and positive another.
|
||||||
|
ret.cValue = (ret.cValue > colorBounds.max ? colorBounds.max : (ret.cValue < colorBounds.min ? colorBounds.min : ret.cValue));
|
||||||
|
// Calculate the factors for the calculations
|
||||||
|
var scale = d3.scale.linear().range([0, (series.c.colors == null || series.c.colors.length == 1 ? 1 : series.c.colors.length - 1)]).domain([colorBounds.min, colorBounds.max]),
|
||||||
|
colorVal = scale(ret.cValue),
|
||||||
|
floatingPortion = colorVal - Math.floor(colorVal);
|
||||||
|
// If there is a single color defined
|
||||||
|
if (series.c.colors != null && series.c.colors != undefined && series.c.colors.length == 1) {
|
||||||
|
baseColor = d3.rgb(series.c.colors[0]);
|
||||||
|
targetColor = d3.rgb(this.getColor(ret.aggField.slice(-1)[0]).fill);
|
||||||
|
}
|
||||||
|
// If there are multiple colors defined
|
||||||
|
else if (series.c.colors != null && series.c.colors != undefined && series.c.colors.length > 1) {
|
||||||
|
baseColor = d3.rgb(series.c.colors[Math.floor(colorVal)]);
|
||||||
|
targetColor = d3.rgb(series.c.colors[Math.ceil(colorVal)]);
|
||||||
|
}
|
||||||
|
// If there are no colors defined
|
||||||
|
else {
|
||||||
|
baseColor = d3.rgb("white");
|
||||||
|
targetColor = d3.rgb(this.getColor(ret.aggField.slice(-1)[0]).fill);
|
||||||
|
}
|
||||||
|
// Calculate the correct grade of color
|
||||||
|
baseColor.r = Math.floor(baseColor.r + (targetColor.r - baseColor.r) * floatingPortion);
|
||||||
|
baseColor.g = Math.floor(baseColor.g + (targetColor.g - baseColor.g) * floatingPortion);
|
||||||
|
baseColor.b = Math.floor(baseColor.b + (targetColor.b - baseColor.b) * floatingPortion);
|
||||||
|
// Set the colors on the row
|
||||||
|
ret.fill = baseColor.toString();
|
||||||
|
ret.stroke = baseColor.darker(0.5).toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
// populate the data in the series
|
||||||
|
series._positionData = returnData;
|
||||||
|
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,27 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/_registerEventHandlers.js
|
||||||
|
// Register events, handle standard d3 shape events
|
||||||
|
this._registerEventHandlers = function (series) {
|
||||||
|
if (series._eventHandlers != null && series._eventHandlers.length > 0) {
|
||||||
|
series._eventHandlers.forEach(function (thisHandler, i) {
|
||||||
|
if (thisHandler.handler != null && typeof (thisHandler.handler) == "function") {
|
||||||
|
series.shapes.on(thisHandler.event, function (d) {
|
||||||
|
var e = new dimple.eventArgs();
|
||||||
|
if (series.chart.storyboard != null) {
|
||||||
|
e.frameValue = series.chart.storyboard.getFrameValue();
|
||||||
|
}
|
||||||
|
e.seriesValue = d.aggField;
|
||||||
|
e.xValue = d.x;
|
||||||
|
e.yValue = d.y;
|
||||||
|
e.zValue = d.z;
|
||||||
|
e.colorValue = d.cValue;
|
||||||
|
e.seriesShapes = series.shapes;
|
||||||
|
e.selectedShape = d3.select(this);
|
||||||
|
thisHandler.handler(e);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/addAxis.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addAxis
|
||||||
|
this.addAxis = function (position, categoryFields, measure) {
|
||||||
|
// Convert the passed category fields to an array in case a single string is sent
|
||||||
|
if (categoryFields != null && categoryFields != undefined) {
|
||||||
|
categoryFields = [].concat(categoryFields);
|
||||||
|
}
|
||||||
|
// Create the axis object based on the passed parameters
|
||||||
|
var axis = new dimple.axis(
|
||||||
|
this,
|
||||||
|
position,
|
||||||
|
categoryFields,
|
||||||
|
measure);
|
||||||
|
// Add the axis to the array for the chart
|
||||||
|
this.axes.push(axis);
|
||||||
|
// return the axis
|
||||||
|
return axis;
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/addCategoryAxis.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addCategoryAxis
|
||||||
|
this.addCategoryAxis = function (position, categoryFields) {
|
||||||
|
return this.addAxis(position, categoryFields, null);
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/addColorAxis.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addColorAxis
|
||||||
|
this.addColorAxis = function (measure, colors) {
|
||||||
|
var colorAxis = this.addAxis("c", null, measure);
|
||||||
|
colorAxis.colors = (colors == null || colors == undefined ? null : [].concat(colors));
|
||||||
|
return colorAxis;
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
// Source: /src/objects/chart/methods/addLegend.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addLegend
|
||||||
|
this.addLegend = function (x, y, width, height, horizontalAlign, series) {
|
||||||
|
// Use all series by default
|
||||||
|
series = (series == null || series == undefined ? this.series : [].concat(series));
|
||||||
|
horizontalAlign = (horizontalAlign == null || horizontalAlign == undefined ? "left" : horizontalAlign);
|
||||||
|
// Create the legend
|
||||||
|
var legend = new dimple.legend(this, x, y, width, height, horizontalAlign, series);
|
||||||
|
// Add the legend to the array
|
||||||
|
this.legends.push(legend);
|
||||||
|
// Return the legend object
|
||||||
|
return legend;
|
||||||
|
};
|
|
@ -0,0 +1,8 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/addMeasureAxis.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addMeasureAxis
|
||||||
|
this.addMeasureAxis = function (position, measure) {
|
||||||
|
return this.addAxis(position, null, measure);
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/addPctAxis.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addPctAxis
|
||||||
|
this.addPctAxis = function (position, measure) {
|
||||||
|
var pctAxis = this.addMeasureAxis(position, measure);
|
||||||
|
pctAxis.showPercent = true;
|
||||||
|
return pctAxis;
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/addSeries.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addSeries
|
||||||
|
this.addSeries = function (categoryFields, plotFunction, axes) {
|
||||||
|
// Deal with no axes passed
|
||||||
|
if (axes == null) { axes = this.axes; }
|
||||||
|
// Deal with no plot function
|
||||||
|
if (plotFunction == null) { plotFunction = dimple.plot.bubble; }
|
||||||
|
// Axis objects to be picked from the array
|
||||||
|
var xAxis = null, yAxis = null, zAxis = null, colorAxis = null;
|
||||||
|
// Iterate the array and pull out the relevant axes
|
||||||
|
axes.forEach(function (axis, i) {
|
||||||
|
if (axis != null && plotFunction.supportedAxes.indexOf(axis.position) > -1) {
|
||||||
|
if (xAxis == null && axis.position[0] == "x") { xAxis = axis; }
|
||||||
|
else if (yAxis == null && axis.position[0] == "y") { yAxis = axis; }
|
||||||
|
else if (zAxis == null && axis.position[0] == "z") { zAxis = axis; }
|
||||||
|
else if (colorAxis == null && axis.position[0] == "c") { colorAxis = axis; }
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
// Put single values into single value arrays
|
||||||
|
if (categoryFields != null && categoryFields != undefined) { categoryFields = [].concat(categoryFields); }
|
||||||
|
// Create a series object
|
||||||
|
var series = new dimple.series(
|
||||||
|
this,
|
||||||
|
categoryFields,
|
||||||
|
xAxis,
|
||||||
|
yAxis,
|
||||||
|
zAxis,
|
||||||
|
colorAxis,
|
||||||
|
plotFunction,
|
||||||
|
dimple.aggregateMethod.sum,
|
||||||
|
plotFunction.stacked);
|
||||||
|
// Add the series to the chart's array
|
||||||
|
this.series.push(series);
|
||||||
|
// Return the series
|
||||||
|
return series;
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/assignColor.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-assignColor
|
||||||
|
this.assignColor = function (tag, fill, stroke, opacity) {
|
||||||
|
this._assignedColors[tag] = new dimple.color(fill, stroke, opacity);
|
||||||
|
return this._assignedColors[tag];
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/defaultColors.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-defaultColors
|
||||||
|
this.defaultColors = [
|
||||||
|
new dimple.color("#80B1D3"),
|
||||||
|
new dimple.color("#FB8072"),
|
||||||
|
new dimple.color("#FDB462"),
|
||||||
|
new dimple.color("#B3DE69"),
|
||||||
|
new dimple.color("#FFED6F"),
|
||||||
|
new dimple.color("#BC80BD"),
|
||||||
|
new dimple.color("#8DD3C7"),
|
||||||
|
new dimple.color("#CCEBC5"),
|
||||||
|
new dimple.color("#FFFFB3"),
|
||||||
|
new dimple.color("#BEBADA"),
|
||||||
|
new dimple.color("#FCCDE5"),
|
||||||
|
new dimple.color("#D9D9D9")
|
||||||
|
];
|
|
@ -0,0 +1,297 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/draw.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-draw
|
||||||
|
this.draw = function (duration) {
|
||||||
|
// Deal with optional parameter
|
||||||
|
duration = (duration == null || duration == undefined ? 0 : duration);
|
||||||
|
// Catch the first x and y
|
||||||
|
var firstX = null, firstY = null;
|
||||||
|
// Many of the draw methods use positioning data in each series. Therefore we should
|
||||||
|
// decorate the series with it now
|
||||||
|
this._getSeriesData()
|
||||||
|
// Iterate the axes and calculate bounds, this is done within the chart because an
|
||||||
|
// axis' bounds are determined by other axes and the way that series tie them together
|
||||||
|
this.axes.forEach(function (axis, i) {
|
||||||
|
axis._min = 0;
|
||||||
|
axis._max = 0;
|
||||||
|
// Check that the axis has a measure
|
||||||
|
if (axis.measure != null && axis.measure != undefined) {
|
||||||
|
// Is this axis linked to a series
|
||||||
|
var linked = false;
|
||||||
|
// Find any linked series
|
||||||
|
this.series.forEach(function (series, i) {
|
||||||
|
// if this axis is linked
|
||||||
|
if (series[axis.position] == axis) {
|
||||||
|
// Get the bounds
|
||||||
|
var bounds = series._axisBounds(axis.position);
|
||||||
|
if (axis._min > bounds.min) { axis._min = bounds.min; }
|
||||||
|
if (axis._max < bounds.max) { axis._max = bounds.max; }
|
||||||
|
linked = true;
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
// If the axis is not linked, use the data bounds, this is unlikely to be used
|
||||||
|
// in a real context, but when developing it is nice to see axes before any series have
|
||||||
|
// been added.
|
||||||
|
if (!linked) {
|
||||||
|
this.data.forEach(function (d, i) {
|
||||||
|
if (axis._min > d[axis.measure]) { axis._min = d[axis.measure]; }
|
||||||
|
if (axis._max < d[axis.measure]) { axis._max = d[axis.measure]; }
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// A category axis is just set to show the number of categories
|
||||||
|
axis._min = 0;
|
||||||
|
var distinctCats = [];
|
||||||
|
this.data.forEach(function (d, i) {
|
||||||
|
if (distinctCats.indexOf(d[axis.categoryFields[0]]) == -1) {
|
||||||
|
distinctCats.push(d[axis.categoryFields[0]]);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
axis._max = distinctCats.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the axis now we have all information set
|
||||||
|
axis._update();
|
||||||
|
|
||||||
|
// Record the index of the first x and first y axes
|
||||||
|
if (firstX == null && axis.position == "x") {
|
||||||
|
firstX = axis;
|
||||||
|
} else if (firstY == null && axis.position == "y") {
|
||||||
|
firstY = axis;
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
var xGridSet = false;
|
||||||
|
var yGridSet = false;
|
||||||
|
// Iterate the axes again
|
||||||
|
this.axes.forEach(function (axis, i) {
|
||||||
|
// Don't animate axes on first draw
|
||||||
|
var firstDraw = false;
|
||||||
|
if (axis.gridlineShapes == null) {
|
||||||
|
if (axis.showGridlines || (axis.showGridlines == null && !axis._hasCategories() && ((!xGridSet && axis.position == "x") || (!yGridSet && axis.position == "y")))) {
|
||||||
|
// Add a group for the gridlines to allow css formatting
|
||||||
|
axis.gridlineShapes = this.svg.append("g").attr("class", "gridlines")
|
||||||
|
if (axis.position == "x") {
|
||||||
|
xGridSet = true;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
yGridSet = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (axis.position == "x") {
|
||||||
|
xGridSet = true;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
yGridSet = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (axis.shapes == null) {
|
||||||
|
// Add a group for the axes to allow css formatting
|
||||||
|
axis.shapes = this.svg.append("g").attr("class", "axis");
|
||||||
|
firstDraw = true;
|
||||||
|
}
|
||||||
|
var transform = null;
|
||||||
|
var gridSize = 0;
|
||||||
|
var gridTransform = null;
|
||||||
|
// If this is the first x and there is a y axis cross them at zero
|
||||||
|
if (axis == firstX && firstY != null) {
|
||||||
|
transform = "translate(0, " + (firstY.categoryFields == null || firstY.categoryFields.length == 0 ? firstY._scale(0) : this.y + this.height) + ")";
|
||||||
|
gridTransform = "translate(0, " + (axis == firstX ? this.y + this.height : this.y) + ")";
|
||||||
|
gridSize = -this.height;
|
||||||
|
}
|
||||||
|
// If this is the first y and there is an x axis cross them at zero
|
||||||
|
else if (axis == firstY && firstX != null) {
|
||||||
|
transform = "translate(" + (firstX.categoryFields == null || firstX.categoryFields.length == 0 ? firstX._scale(0) : this.x) + ", 0)";
|
||||||
|
gridTransform = "translate(" + (axis == firstY ? this.x : this.x + this.width) + ", 0)";
|
||||||
|
gridSize = -this.width;
|
||||||
|
}
|
||||||
|
// Otherwise set the x translation to use the whole width
|
||||||
|
else if (axis.position == "x") {
|
||||||
|
gridTransform = transform = "translate(0, " + (axis == firstX ? this.y + this.height : this.y) + ")";
|
||||||
|
gridSize = -this.height;
|
||||||
|
}
|
||||||
|
// Or the y translation to use the whole height
|
||||||
|
else if (axis.position == "y") {
|
||||||
|
gridTransform = transform = "translate(" + (axis == firstY ? this.x : this.x + this.width) + ", 0)";
|
||||||
|
gridSize = -this.width;
|
||||||
|
}
|
||||||
|
// Draw the axis
|
||||||
|
// This code might seem unneccesary but even applying a duration of 0 to a transition will cause the code to execute after the
|
||||||
|
// code below and precedence is important here.
|
||||||
|
var handleTrans = function (ob) {
|
||||||
|
if (transform == null || duration == 0 || firstDraw) { return ob; }
|
||||||
|
else { return ob.transition().duration(duration); }
|
||||||
|
}
|
||||||
|
if (transform != null && axis._draw != null) {
|
||||||
|
handleTrans(axis.shapes).call(axis._draw.tickFormat(axis._getFormat())).attr("transform", transform);
|
||||||
|
if (axis.gridlineShapes != null) {
|
||||||
|
handleTrans(axis.gridlineShapes).call(axis._draw.tickSize(gridSize, 0, 0).tickFormat("")).attr("transform", gridTransform);
|
||||||
|
}
|
||||||
|
// Move labels around
|
||||||
|
if (axis.measure == null || axis.measure == undefined) {
|
||||||
|
if (axis.position == "x") {
|
||||||
|
handleTrans(axis.shapes.selectAll(".axis text")).attr("x", (this.width / axis._max) / 2);
|
||||||
|
}
|
||||||
|
else if (axis.position == "y") {
|
||||||
|
handleTrans(axis.shapes.selectAll(".axis text")).attr("y", -1 * (this.height / axis._max) / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (axis.categoryFields != null && axis.categoryFields != undefined && axis.categoryFields.length > 0) {
|
||||||
|
// Off set the labels to counter the transform. This will put the labels along the outside of the chart so they
|
||||||
|
// don't interfere with the chart contents
|
||||||
|
if (axis == firstX && (firstY.categoryFields == null || firstY.categoryFields.length == 0)) {
|
||||||
|
handleTrans(axis.shapes.selectAll(".axis text")).attr("y", this.y + this.height - firstY._scale(0) + 9);
|
||||||
|
}
|
||||||
|
if (axis == firstY && (firstX.categoryFields == null || firstX.categoryFields.length == 0)) {
|
||||||
|
handleTrans(axis.shapes.selectAll(".axis text")).attr("x", -1 * (firstX._scale(0) - this.x) - 9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Set some initial css values
|
||||||
|
if (!this.noFormats) {
|
||||||
|
handleTrans(axis.shapes.selectAll(".axis text"))
|
||||||
|
.style("font-family", "sans-serif")
|
||||||
|
.style("font-size", (this.height / 35 > 10 ? this.height / 35 : 10) + "px");
|
||||||
|
handleTrans(axis.shapes.selectAll(".axis path, .axis line"))
|
||||||
|
.style("fill", "none")
|
||||||
|
.style("stroke", "black")
|
||||||
|
.style("shape-rendering", "crispEdges");
|
||||||
|
if (axis.gridlineShapes != null) {
|
||||||
|
handleTrans(axis.gridlineShapes.selectAll(".gridlines line"))
|
||||||
|
.style("fill", "none")
|
||||||
|
.style("stroke", "lightgray")
|
||||||
|
.style("opacity", 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var rotated = false;
|
||||||
|
// Rotate labels, this can only be done once the formats are set
|
||||||
|
if (axis.measure == null || axis.measure == undefined) {
|
||||||
|
if (axis == firstX) {
|
||||||
|
// If the gaps are narrower than the widest label display all labels horizontally
|
||||||
|
var widest = 0;
|
||||||
|
axis.shapes.selectAll(".axis text").each(function () {
|
||||||
|
var w = this.getComputedTextLength();
|
||||||
|
widest = (w > widest ? w : widest);
|
||||||
|
});
|
||||||
|
if (widest > this.width / axis._max) {
|
||||||
|
rotated = true;
|
||||||
|
var offset = (this.width / axis._max) / 2;
|
||||||
|
axis.shapes.selectAll(".axis text")
|
||||||
|
.style("text-anchor", "start")
|
||||||
|
.each(function () {
|
||||||
|
var rec = this.getBBox();
|
||||||
|
d3.select(this)
|
||||||
|
.attr("transform", "rotate(90," + rec.x + "," + (rec.y + (rec.height / 2)) + ") translate(-5, 0)");
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (axis.position == "x") {
|
||||||
|
// If the gaps are narrower than the widest label display all labels horizontally
|
||||||
|
var widest = 0;
|
||||||
|
axis.shapes.selectAll(".axis text")
|
||||||
|
.each(function () {
|
||||||
|
var w = this.getComputedTextLength();
|
||||||
|
widest = (w > widest ? w : widest);
|
||||||
|
});
|
||||||
|
if (widest > this.width / axis._max) {
|
||||||
|
var offset = (this.width / axis._max) / 2;
|
||||||
|
axis.shapes.selectAll(".axis text")
|
||||||
|
.style("text-anchor", "end")
|
||||||
|
.each(function () {
|
||||||
|
var rec = this.getBBox();
|
||||||
|
d3.select(this)
|
||||||
|
.attr("transform", "rotate(90," + (rec.x + rec.width) + "," + (rec.y + (rec.height / 2)) + ") translate(5, 0)");
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (axis.titleShape == null && axis.shapes != null && axis.shapes.node().firstChild != null) {
|
||||||
|
// Get the maximum edge bounds
|
||||||
|
var box = { l: null, t: null, r: null, b: null };
|
||||||
|
// Get the bounds of the axis objects
|
||||||
|
axis.shapes.selectAll(".axis text")
|
||||||
|
.each(function () {
|
||||||
|
var rec = this.getBBox();
|
||||||
|
box.l = (box.l == null || rec.x < box.l ? rec.x : box.l);
|
||||||
|
box.t = (rotated ? (box.t == null ||rec.y + rec.width < box.t ? rec.y + rec.width : box.t) : (box.t == null || rec.y < box.t ? rec.y : box.t));
|
||||||
|
box.r = (box.r == null || rec.x + rec.width > box.r ? rec.x + rec.width : box.r);
|
||||||
|
box.b = (rotated ? (box.b == null || rec.y + rec.width > box.b ? rec.y + rec.width : box.b) : (box.b == null || rec.y + rec.height > box.b ? rec.y + rec.height : box.b));
|
||||||
|
});
|
||||||
|
var titleX = 0;
|
||||||
|
var titleY = 0;
|
||||||
|
var rotate = "";
|
||||||
|
if (axis.position == "x") {
|
||||||
|
if (axis == firstX) {
|
||||||
|
titleY = this.y + this.height + box.b + 10;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
titleY = this.y + box.l + box.t - 5;
|
||||||
|
|
||||||
|
}
|
||||||
|
titleX = this.x + (this.width / 2);
|
||||||
|
}
|
||||||
|
else if (axis.position == "y") {
|
||||||
|
if (axis == firstY) {
|
||||||
|
titleX = this.x + box.l - 10;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
titleX = this.x + this.width + box.r + 10;
|
||||||
|
}
|
||||||
|
titleY = this.y + (this.height / 2);
|
||||||
|
rotate = "rotate(270, " + titleX + ", " + titleY + ")"
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add a title for the axis
|
||||||
|
axis.titleShape = this.svg.append("text").attr("class", "axis title");
|
||||||
|
var chart = this;
|
||||||
|
axis.titleShape
|
||||||
|
.attr("x", titleX)
|
||||||
|
.attr("y", titleY)
|
||||||
|
.attr("text-anchor", "middle")
|
||||||
|
.attr("transform", rotate)
|
||||||
|
.text((axis.categoryFields == null || axis.categoryFields == undefined || axis.categoryFields.length == 0 ? axis.measure : axis.categoryFields.join("/")))
|
||||||
|
.each(function () {
|
||||||
|
if (!chart.noFormats) {
|
||||||
|
d3.select(this)
|
||||||
|
.style("font-family", "sans-serif")
|
||||||
|
.style("font-size", (chart.height / 35 > 10 ? chart.height / 35 : 10) + "px");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Offset Y position to baseline. This previously used dominant-baseline but this caused
|
||||||
|
// browser inconsistency
|
||||||
|
if (axis == firstX) {
|
||||||
|
axis.titleShape.each(function () {
|
||||||
|
d3.select(this).attr("y", titleY + this.getBBox().height / 1.65);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (axis == firstY) {
|
||||||
|
axis.titleShape.each(function () {
|
||||||
|
d3.select(this).attr("x", titleX + this.getBBox().height / 1.65);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
// Iterate the series
|
||||||
|
this.series.forEach(function (series, i) {
|
||||||
|
series.plot.draw(this, series, duration);
|
||||||
|
this._registerEventHandlers(series);
|
||||||
|
}, this);
|
||||||
|
// Iterate the legends
|
||||||
|
this.legends.forEach(function (legend, i) {
|
||||||
|
legend._draw(duration);
|
||||||
|
}, this);
|
||||||
|
// If the chart has a storyboard
|
||||||
|
if (this.storyboard != null && this.storyboard != undefined) {
|
||||||
|
this.storyboard._drawText();
|
||||||
|
if (this.storyboard.autoplay) {
|
||||||
|
this.storyboard.startAnimation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Return the chart for chaining
|
||||||
|
return this;
|
||||||
|
};
|
|
@ -0,0 +1,14 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/getColor.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-getColor
|
||||||
|
this.getColor = function (tag) {
|
||||||
|
// If no color is assigned, do so here
|
||||||
|
if (this._assignedColors[tag] == null || this._assignedColors[tag] == undefined) {
|
||||||
|
this._assignedColors[tag] = this.defaultColors[this._nextColor];
|
||||||
|
this._nextColor = (this._nextColor + 1) % this.defaultColors.length;
|
||||||
|
}
|
||||||
|
// Return the color
|
||||||
|
return this._assignedColors[tag];
|
||||||
|
};
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/setBounds.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-setBounds
|
||||||
|
this.setBounds = function (x, y, width, height) {
|
||||||
|
// Define the bounds
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.width = width;
|
||||||
|
this.height = height;
|
||||||
|
// Refresh the axes to redraw them against the new bounds
|
||||||
|
this.axes.forEach(function (axis, i) {
|
||||||
|
axis._update();
|
||||||
|
}, this);
|
||||||
|
// return the chart object for method chaining
|
||||||
|
return this;
|
||||||
|
};
|
|
@ -0,0 +1,14 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/chart/methods/setStoryboard.js
|
||||||
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-setStoryboard
|
||||||
|
this.setStoryboard = function (categoryFields, tickHandler) {
|
||||||
|
// Create and assign the storyboard
|
||||||
|
this.storyboard = new dimple.storyboard(this, categoryFields);
|
||||||
|
// Set the event handler
|
||||||
|
if (tickHandler != null && tickHandler != undefined) {
|
||||||
|
this.storyboard.onTick = tickHandler;
|
||||||
|
}
|
||||||
|
// Return the storyboard
|
||||||
|
return this.storyboard;
|
||||||
|
};
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/color/begin.js
|
||||||
|
dimple.color = function (fill, stroke, opacity) {
|
||||||
|
this.fill = fill;
|
||||||
|
this.stroke = (stroke == null || stroke == undefined ? d3.rgb(fill).darker(0.5).toString() : stroke);
|
||||||
|
this.opacity = (opacity == null || opacity == undefined ? 0.8 : opacity);
|
||||||
|
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue