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

New Step Examples

master
johnkiernander 2014-04-23 02:11:35 +01:00
parent adc06cf86d
commit dd751d2c6a
44 changed files with 858 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dist/dimple.v1.2.0.js vendored
View File

@ -2760,9 +2760,10 @@ var dimple = {
coord = function (position, datum) {
var val;
if (series.interpolation === "step" && series[position]._hasCategories()) {
// series.barGap = 0;
// series.clusterBarGap = 0;
val = dimple._helpers[position](datum, chart, series) + (position === "y" ? dimple._helpers.height(datum, chart, series) : 0);
if (series[position].categoryFields.length < 2) {
val += (position === "y" ? 1 : -1) * dimple._helpers[position + "Gap"](chart, series);
}
} else {
val = dimple._helpers["c" + position](datum, chart, series);
}

2
dist/dimple.v1.2.0.min.js vendored
View File

File diff suppressed because one or more lines are too long

22
examples/area_steps_horizontal.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(null, dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.draw();
});
</script>
</div>

23
examples/area_steps_horizontal_grouped.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330)
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

24
examples/area_steps_horizontal_grouped_100pct.html Normal file
View File

@ -0,0 +1,24 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 30, 340, 330);
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

24
examples/area_steps_horizontal_grouped_stacked.html Normal file
View File

@ -0,0 +1,24 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 350, 330)
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

23
examples/area_steps_horizontal_stacked.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

23
examples/area_steps_horizontal_stacked_100pct.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(65, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

22
examples/area_steps_vertical.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries(null, dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.draw();
});
</script>
</div>

23
examples/area_steps_vertical_grouped.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
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");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("Owner", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

24
examples/area_steps_vertical_grouped_100pct.html Normal file
View File

@ -0,0 +1,24 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
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");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

24
examples/area_steps_vertical_grouped_stacked.html Normal file
View File

@ -0,0 +1,24 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
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");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

23
examples/area_steps_vertical_stacked.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

23
examples/area_steps_vertical_stacked_100pct.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330);
myChart.addPctAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

21
examples/steps_horizontal.html Normal file
View File

@ -0,0 +1,21 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(null, dimple.plot.line);
s.interpolation = "step";
myChart.draw();
});
</script>
</div>

22
examples/steps_horizontal_grouped.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330);
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.line);
s.interpolation = "step";
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

23
examples/steps_horizontal_grouped_stacked.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 430, 330);
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(["Brand"], dimple.plot.line);
s.interpolation = "step";
s.barGap = 0.05;
myChart.addLegend(510, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

22
examples/steps_horizontal_stacked.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.line);
s.interpolation = "step";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

21
examples/steps_vertical.html Normal file
View File

@ -0,0 +1,21 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330);
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries(null, dimple.plot.line);
s.interpolation = "step";
myChart.draw();
});
</script>
</div>

22
examples/steps_vertical_grouped.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
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");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("Owner", dimple.plot.line);
s.interpolation = "step";
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

23
examples/steps_vertical_grouped_stacked.html Normal file
View File

@ -0,0 +1,23 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
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");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries(["Brand"], dimple.plot.line);
s.interpolation = "step";
s.barGap = 0.05;
myChart.addLegend(510, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

22
examples/steps_vertical_stacked.html Normal file
View File

@ -0,0 +1,22 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries("Channel", dimple.plot.line);
s.interpolation = "step";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

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

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(null, dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.draw();
});
</script>
</div>

20
examples/templates/area_steps_horizontal_grouped.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330)
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

21
examples/templates/area_steps_horizontal_grouped_100pct.html Normal file
View File

@ -0,0 +1,21 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 30, 340, 330);
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

21
examples/templates/area_steps_horizontal_grouped_stacked.html Normal file
View File

@ -0,0 +1,21 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 350, 330)
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

20
examples/templates/area_steps_horizontal_stacked.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

20
examples/templates/area_steps_horizontal_stacked_100pct.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(65, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

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

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries(null, dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.draw();
});
</script>
</div>

20
examples/templates/area_steps_vertical_grouped.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 30, 470, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("Owner", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

21
examples/templates/area_steps_vertical_grouped_100pct.html Normal file
View File

@ -0,0 +1,21 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 30, 320, 330);
myChart.addPctAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

21
examples/templates/area_steps_vertical_grouped_stacked.html Normal file
View File

@ -0,0 +1,21 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 30, 320, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("SKU", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.barGap = 0.05;
myChart.addLegend(430, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

20
examples/templates/area_steps_vertical_stacked.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

20
examples/templates/area_steps_vertical_stacked_100pct.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330);
myChart.addPctAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries("Channel", dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

18
examples/templates/steps_horizontal.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(null, dimple.plot.line);
s.interpolation = "step";
myChart.draw();
});
</script>
</div>

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

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330);
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.line);
s.interpolation = "step";
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

20
examples/templates/steps_horizontal_grouped_stacked.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 430, 330);
var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
x.addGroupOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries(["Brand"], dimple.plot.line);
s.interpolation = "step";
s.barGap = 0.05;
myChart.addLegend(510, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

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

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.line);
s.interpolation = "step";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

18
examples/templates/steps_vertical.html Normal file
View File

@ -0,0 +1,18 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 485, 330);
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries(null, dimple.plot.line);
s.interpolation = "step";
myChart.draw();
});
</script>
</div>

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

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 30, 470, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries("Owner", dimple.plot.line);
s.interpolation = "step";
s.barGap = 0.05;
myChart.draw();
});
</script>
</div>

20
examples/templates/steps_vertical_grouped_stacked.html Normal file
View File

@ -0,0 +1,20 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 30, 400, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
y.addGroupOrderRule("Date");
var s = myChart.addSeries(["Brand"], dimple.plot.line);
s.interpolation = "step";
s.barGap = 0.05;
myChart.addLegend(510, 20, 100, 300, "left");
myChart.draw();
});
</script>
</div>

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

@ -0,0 +1,19 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 480, 330)
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
var s = myChart.addSeries("Channel", dimple.plot.line);
s.interpolation = "step";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>

5
src/objects/plot/area.js
View File

@ -64,9 +64,10 @@
coord = function (position, datum) {
var val;
if (series.interpolation === "step" && series[position]._hasCategories()) {
// series.barGap = 0;
// series.clusterBarGap = 0;
val = dimple._helpers[position](datum, chart, series) + (position === "y" ? dimple._helpers.height(datum, chart, series) : 0);
if (series[position].categoryFields.length < 2) {
val += (position === "y" ? 1 : -1) * dimple._helpers[position + "Gap"](chart, series);
}
} else {
val = dimple._helpers["c" + position](datum, chart, series);
}

5
tmp/dimple.js
View File

@ -2760,9 +2760,10 @@ var dimple = {
coord = function (position, datum) {
var val;
if (series.interpolation === "step" && series[position]._hasCategories()) {
// series.barGap = 0;
// series.clusterBarGap = 0;
val = dimple._helpers[position](datum, chart, series) + (position === "y" ? dimple._helpers.height(datum, chart, series) : 0);
if (series[position].categoryFields.length < 2) {
val += (position === "y" ? 1 : -1) * dimple._helpers[position + "Gap"](chart, series);
}
} else {
val = dimple._helpers["c" + position](datum, chart, series);
}