mirror of https://github.com/vitalif/dimple
Added new example
John Kiernander
parent
36a4e8c18a
commit
fa35b13757
|
|
@ -76,5 +76,11 @@
|
|||
"title":"Waterfall Chart",
|
||||
"shortTitle":"Waterfall",
|
||||
"desc":"Due to the unusual data treatment in a waterfall/staircase chart creating one in dimple requires a little manipulation using a bar chart. To use this template just update the first 5 variables. A simpler template could be created if you aren't concerned with crossing the x axis."
|
||||
},
|
||||
{
|
||||
"id":"advanced_responsive_sizing",
|
||||
"title":"Responsive Sizing",
|
||||
"shortTitle":"Responsive Size",
|
||||
"desc":"Example of the new responsive sizing functionality, meaning charts no longer have to have a fixed pixel size."
|
||||
}
|
||||
]
|
||||
|
|
@ -1098,7 +1098,11 @@ var dimple = {
|
|||
firstY = null,
|
||||
distinctCats,
|
||||
xGridSet = false,
|
||||
yGridSet = false;
|
||||
yGridSet = false,
|
||||
chartX = this._xPixels(),
|
||||
chartY = this._yPixels(),
|
||||
chartWidth = this._widthPixels(),
|
||||
chartHeight = this._heightPixels();
|
||||
|
||||
// Many of the draw methods use positioning data in each series. Therefore we should
|
||||
// decorate the series with it now
|
||||
|
|
@ -1210,19 +1214,19 @@ var dimple = {
|
|||
}
|
||||
// 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._yPixels() + this._heightPixels()) + ")";
|
||||
gridTransform = "translate(0, " + (axis === firstX ? this._yPixels() + this._heightPixels() : this._yPixels()) + ")";
|
||||
gridSize = -this._heightPixels();
|
||||
transform = "translate(0, " + (firstY.categoryFields === null || firstY.categoryFields.length === 0 ? firstY._scale(0) : chartY + chartHeight) + ")";
|
||||
gridTransform = "translate(0, " + (axis === firstX ? chartY + chartHeight : chartY) + ")";
|
||||
gridSize = -chartHeight;
|
||||
} else if (axis === firstY && firstX !== null) {
|
||||
transform = "translate(" + (firstX.categoryFields === null || firstX.categoryFields.length === 0 ? firstX._scale(0) : this._xPixels()) + ", 0)";
|
||||
gridTransform = "translate(" + (axis === firstY ? this._xPixels() : this._xPixels() + this._widthPixels()) + ", 0)";
|
||||
gridSize = -this._widthPixels();
|
||||
transform = "translate(" + (firstX.categoryFields === null || firstX.categoryFields.length === 0 ? firstX._scale(0) : chartX) + ", 0)";
|
||||
gridTransform = "translate(" + (axis === firstY ? chartX : chartX + chartWidth) + ", 0)";
|
||||
gridSize = -chartWidth;
|
||||
} else if (axis.position === "x") {
|
||||
gridTransform = transform = "translate(0, " + (axis === firstX ? this._yPixels() + this._heightPixels() : this._yPixels()) + ")";
|
||||
gridSize = -this._heightPixels();
|
||||
gridTransform = transform = "translate(0, " + (axis === firstX ? chartY + chartHeight : chartY) + ")";
|
||||
gridSize = -chartHeight;
|
||||
} else if (axis.position === "y") {
|
||||
gridTransform = transform = "translate(" + (axis === firstY ? this._xPixels() : this._xPixels() + this._widthPixels()) + ", 0)";
|
||||
gridSize = -this._widthPixels();
|
||||
gridTransform = transform = "translate(" + (axis === firstY ? chartX : chartX + chartWidth) + ", 0)";
|
||||
gridSize = -chartWidth;
|
||||
}
|
||||
// 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
|
||||
|
|
@ -1252,19 +1256,19 @@ var dimple = {
|
|||
// Move labels around
|
||||
if (axis.measure === null || axis.measure === undefined) {
|
||||
if (axis.position === "x") {
|
||||
handleTrans(axis.shapes.selectAll(".axis text")).attr("x", (this._widthPixels() / axis._max) / 2);
|
||||
handleTrans(axis.shapes.selectAll(".axis text")).attr("x", (chartWidth / axis._max) / 2);
|
||||
} else if (axis.position === "y") {
|
||||
handleTrans(axis.shapes.selectAll(".axis text")).attr("y", -1 * (this._heightPixels() / axis._max) / 2);
|
||||
handleTrans(axis.shapes.selectAll(".axis text")).attr("y", -1 * (chartHeight / 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._yPixels() + this._heightPixels() - firstY._scale(0) + 9);
|
||||
handleTrans(axis.shapes.selectAll(".axis text")).attr("y", chartY + chartHeight - 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._xPixels()) - 9);
|
||||
handleTrans(axis.shapes.selectAll(".axis text")).attr("x", -1 * (firstX._scale(0) - chartX) - 9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1272,7 +1276,7 @@ var dimple = {
|
|||
if (!this.noFormats) {
|
||||
handleTrans(axis.shapes.selectAll(".axis text"))
|
||||
.style("font-family", "sans-serif")
|
||||
.style("font-size", (this._heightPixels() / 35 > 10 ? this._heightPixels() / 35 : 10) + "px");
|
||||
.style("font-size", (chartHeight / 35 > 10 ? chartHeight / 35 : 10) + "px");
|
||||
handleTrans(axis.shapes.selectAll(".axis path, .axis line"))
|
||||
.style("fill", "none")
|
||||
.style("stroke", "black")
|
||||
|
|
@ -1293,7 +1297,7 @@ var dimple = {
|
|||
var w = this.getComputedTextLength();
|
||||
widest = (w > widest ? w : widest);
|
||||
});
|
||||
if (widest > this._widthPixels() / axis.shapes.selectAll(".axis text")[0].length) {
|
||||
if (widest > chartWidth / axis.shapes.selectAll(".axis text")[0].length) {
|
||||
rotated = true;
|
||||
axis.shapes.selectAll(".axis text")
|
||||
.style("text-anchor", "start")
|
||||
|
|
@ -1302,6 +1306,12 @@ var dimple = {
|
|||
d3.select(this)
|
||||
.attr("transform", "rotate(90," + rec.x + "," + (rec.y + (rec.height / 2)) + ") translate(-5, 0)");
|
||||
});
|
||||
} else {
|
||||
// For redraw operations we need to clear the transform
|
||||
rotated = false;
|
||||
axis.shapes.selectAll(".axis text")
|
||||
.style("text-anchor", "middle")
|
||||
.attr("transform", null);
|
||||
}
|
||||
} else if (axis.position === "x") {
|
||||
// If the gaps are narrower than the widest label display all labels horizontally
|
||||
|
|
@ -1311,7 +1321,7 @@ var dimple = {
|
|||
var w = this.getComputedTextLength();
|
||||
widest = (w > widest ? w : widest);
|
||||
});
|
||||
if (widest > this._widthPixels() / axis.shapes.selectAll(".axis text")[0].length) {
|
||||
if (widest > chartWidth / axis.shapes.selectAll(".axis text")[0].length) {
|
||||
rotated = true;
|
||||
axis.shapes.selectAll(".axis text")
|
||||
.style("text-anchor", "end")
|
||||
|
|
@ -1320,82 +1330,90 @@ var dimple = {
|
|||
d3.select(this)
|
||||
.attr("transform", "rotate(90," + (rec.x + rec.width) + "," + (rec.y + (rec.height / 2)) + ") translate(5, 0)");
|
||||
});
|
||||
} else {
|
||||
// For redraw operations we need to clear the transform
|
||||
rotated = false;
|
||||
axis.shapes.selectAll(".axis text")
|
||||
.style("text-anchor", "middle")
|
||||
.attr("transform", null);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (axis.titleShape === null && axis.shapes !== null && axis.shapes.node().firstChild !== null) {
|
||||
// Get the bounds of the axis objects
|
||||
axis.shapes.selectAll(".axis text")
|
||||
.each(function () {
|
||||
var rec = this.getBBox();
|
||||
if (box.l === null || -9 - rec.width < box.l) {
|
||||
box.l = -9 - rec.width;
|
||||
}
|
||||
if (box.r === null || rec.x + rec.width > box.r) {
|
||||
box.r = rec.x + rec.width;
|
||||
}
|
||||
if (rotated) {
|
||||
if (box.t === null || rec.y + rec.height - rec.width < box.t) {
|
||||
box.t = rec.y + rec.height - rec.width;
|
||||
}
|
||||
if (box.b === null || rec.height + rec.width > box.b) {
|
||||
box.b = rec.height + rec.width;
|
||||
}
|
||||
} else {
|
||||
if (box.t === null || rec.y < box.t) {
|
||||
box.t = rec.y;
|
||||
}
|
||||
if (box.b === null || 9 + rec.height > box.b) {
|
||||
box.b = 9 + rec.height;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (axis.position === "x") {
|
||||
if (axis === firstX) {
|
||||
titleY = this._yPixels() + this._heightPixels() + box.b + 5;
|
||||
} else {
|
||||
titleY = this._yPixels() + box.t - 10;
|
||||
if (axis.titleShape !== null && axis.titleShape !== undefined) {
|
||||
axis.titleShape.remove();
|
||||
}
|
||||
// Get the bounds of the axis objects
|
||||
axis.shapes.selectAll(".axis text")
|
||||
.each(function () {
|
||||
var rec = this.getBBox();
|
||||
if (box.l === null || -9 - rec.width < box.l) {
|
||||
box.l = -9 - rec.width;
|
||||
}
|
||||
titleX = this._xPixels() + (this._widthPixels() / 2);
|
||||
} else if (axis.position === "y") {
|
||||
if (axis === firstY) {
|
||||
titleX = this._xPixels() + box.l - 10;
|
||||
} else {
|
||||
titleX = this._xPixels() + this._widthPixels() + box.r + 20;
|
||||
if (box.r === null || rec.x + rec.width > box.r) {
|
||||
box.r = rec.x + rec.width;
|
||||
}
|
||||
titleY = this._yPixels() + (this._heightPixels() / 2);
|
||||
rotate = "rotate(270, " + titleX + ", " + titleY + ")";
|
||||
}
|
||||
|
||||
// Add a title for the axis
|
||||
axis.titleShape = this._group.append("text").attr("class", "axis title");
|
||||
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._heightPixels() / 35 > 10 ? chart._heightPixels() / 35 : 10) + "px");
|
||||
if (rotated) {
|
||||
if (box.t === null || rec.y + rec.height - rec.width < box.t) {
|
||||
box.t = rec.y + rec.height - rec.width;
|
||||
}
|
||||
});
|
||||
if (box.b === null || rec.height + rec.width > box.b) {
|
||||
box.b = rec.height + rec.width;
|
||||
}
|
||||
} else {
|
||||
if (box.t === null || rec.y < box.t) {
|
||||
box.t = rec.y;
|
||||
}
|
||||
if (box.b === null || 9 + rec.height > box.b) {
|
||||
box.b = 9 + rec.height;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Offset Y position to baseline. This previously used dominant-baseline but this caused
|
||||
// browser inconsistency
|
||||
if (axis.position === "x") {
|
||||
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);
|
||||
});
|
||||
titleY = chartY + chartHeight + box.b + 5;
|
||||
} else {
|
||||
titleY = chartY + box.t - 10;
|
||||
}
|
||||
titleX = chartX + (chartWidth / 2);
|
||||
} else if (axis.position === "y") {
|
||||
if (axis === firstY) {
|
||||
titleX = chartX + box.l - 10;
|
||||
} else {
|
||||
titleX = chartX + chartWidth + box.r + 20;
|
||||
}
|
||||
titleY = chartY + (chartHeight / 2);
|
||||
rotate = "rotate(270, " + titleX + ", " + titleY + ")";
|
||||
}
|
||||
|
||||
// Add a title for the axis
|
||||
axis.titleShape = this._group.append("text").attr("class", "axis title");
|
||||
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", (chartHeight / 35 > 10 ? chartHeight / 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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,56 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer" style="height:100%">
|
||||
<!-- This button is just used for this example to open a
|
||||
resizable window to see chart code in action -->
|
||||
<button id="showPopup"
|
||||
onclick="window.open('/examples/advanced_responsive_sizing.html')"
|
||||
style="position:relative; margin: -30px -50px; width:100px; top:45%; left:50%;">
|
||||
Click Here To Open Sizable Chart
|
||||
</button>
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.v1.1.0.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
// This code is specific to this examples page, I'm just hiding the
|
||||
// button and drawing the chart if this same code is opened in a popup.
|
||||
if (document.URL.toString().indexOf(
|
||||
"/examples/advanced_responsive_sizing.html") !== -1)
|
||||
{
|
||||
d3.select("#showPopup").remove();
|
||||
|
||||
// Actual example code starts here
|
||||
var myChart;
|
||||
|
||||
// In version 1.1.0 it's possible to initialise any size parameter with a % value as well as pixels
|
||||
var svg = dimple.newSvg("#chartContainer", "95%", "95%");
|
||||
|
||||
// Get data as usual
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
||||
// Create a standard bar chart to show off the code
|
||||
myChart = new dimple.chart(svg, data);
|
||||
|
||||
// Use the new set margins method to set partially fixed and partially proportional to the svg
|
||||
myChart.setMargins("10%", "30px", "10px", "15%");
|
||||
|
||||
// Continue to set up a standard chart
|
||||
myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
|
||||
myChart.addMeasureAxis("y", "Unit Sales");
|
||||
var s = myChart.addSeries("Channel", dimple.plot.bar);
|
||||
myChart.draw();
|
||||
|
||||
});
|
||||
|
||||
// Add a method to draw the chart on resize of the window
|
||||
window.onresize = function () {
|
||||
// As of 1.1.0 the second parameter here allows you to draw without reprocessing
|
||||
// data. This saves a lot on performance when you know the data is static.
|
||||
myChart.draw(0, true);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<div id="chartContainer">
|
||||
<!-- This button is just used for this example to open a resizable window to see chart code in action -->
|
||||
<button id="showPopup"
|
||||
onclick="window.open('/examples/advanced_responsive_sizing.html')"
|
||||
style="position:relative; margin: -20px -50px; width:100px; top:50%; left:50%;">
|
||||
Click Here To Open Chart
|
||||
</button>
|
||||
<script src="/lib/d3.v3.min.js"></script>
|
||||
<script src="/dist/dimple.{version}.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
// This code is specific to this examples page, I'm just hiding the button and drawing the chart if this
|
||||
// same code is opened in a popup.
|
||||
if (document.URL.toString().indexOf("/examples/advanced_responsive_sizing.html") !== -1) {
|
||||
d3.select("#showPopup").remove();
|
||||
|
||||
// Dimple code starts here
|
||||
var myChart;
|
||||
|
||||
// In version 1.1.0 it's possible to initialise any size parameter with a % value as well as pixels
|
||||
var svg = dimple.newSvg("#chartContainer", "95%", "95%");
|
||||
|
||||
// Get data as usual
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
||||
// Create a standard bar chart to show off the code
|
||||
myChart = new dimple.chart(svg, data);
|
||||
|
||||
// Use the new set margins method to set partially fixed and partially proportional to the svg
|
||||
myChart.setMargins("10%", "30px", "10px", "15%");
|
||||
|
||||
// Continue to set up a standard chart
|
||||
myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
|
||||
myChart.addMeasureAxis("y", "Unit Sales");
|
||||
myChart.addSeries("Channel", dimple.plot.bar);
|
||||
myChart.draw();
|
||||
|
||||
});
|
||||
|
||||
// Add a method to draw the chart on resize of the window
|
||||
window.onresize = function () {
|
||||
// As of 1.1.0 the second parameter here allows you to draw without reprocessing
|
||||
// data. This saves a lot on performance when you know the data is static.
|
||||
myChart.draw(0, true);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</div>
|
||||
Loading…
Reference in New Issue