Skip to content

Commit

Permalink
Updates to Chart Drawing
Browse files Browse the repository at this point in the history 
Fixes #4 #15 #28 #40
  • Loading branch information
@johnkiernander
johnkiernander committed Jan 28, 2014
1 parent b90908b commit 1bcfcb9
Show file tree
Hide file tree
Showing 9 changed files with 371 additions and 78 deletions.
217 changes: 180 additions & 37 deletions dist/dimple.v1.1.4.js
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions dist/dimple.v1.1.4.min.js
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion examples/bars_horizontal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
myChart.addSeries(null, dimple.plot.bar);
var s1 = myChart.addSeries(null, dimple.plot.bar);
s1.data = data;
var s2 = myChart.addSeries("Test", dimple.plot.bubble);
s2.data = [{"Test":"Lots of words", "Month": 'test', "Unit Sales":-244434}];
myChart.draw();
});
</script>
Expand Down
5 changes: 4 additions & 1 deletion examples/templates/bars_horizontal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
myChart.addMeasureAxis("x", "Unit Sales");
var y = myChart.addCategoryAxis("y", "Month");
y.addOrderRule("Date");
myChart.addSeries(null, dimple.plot.bar);
var s1 = myChart.addSeries(null, dimple.plot.bar);
s1.data = data;
var s2 = myChart.addSeries("Test", dimple.plot.bubble);
s2.data = [{"Test":"Lots of words", "Month": 'test', "Unit Sales":-244434}];
myChart.draw();
});
</script>
Expand Down
10 changes: 9 additions & 1 deletion src/objects/chart/methods/_registerEventHandlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,16 @@
this._registerEventHandlers = function (series) {
if (series._eventHandlers !== null && series._eventHandlers.length > 0) {
series._eventHandlers.forEach(function (thisHandler) {
var shapes = null;
if (thisHandler.handler !== null && typeof (thisHandler.handler) === "function") {
series.shapes.on(thisHandler.event, function (d) {
// Some classes work from markers rather than the shapes (line and area for example)
// in these cases the events should be applied to the markers instead. Issue #15
if (series._markers !== null && series._markers !== undefined) {
shapes = series._markers;
} else {
shapes = series.shapes;
}
shapes.on(thisHandler.event, function (d) {
var e = new dimple.eventArgs();
if (series.chart.storyboard !== null) {
e.frameValue = series.chart.storyboard.getFrameValue();
Expand Down
97 changes: 79 additions & 18 deletions src/objects/plot/area.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
graded = false,
line,
catPoints = {},
markers;
markers,
markerBacks;

if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
Expand Down Expand Up @@ -65,7 +66,7 @@
.data(uniqueValues)
.transition()
.duration(duration)
.attr("class", function (d) { return "series area " + d.replace(" ", ""); })
.attr("class", function (d) { return "series area " + d.split(" ").join("_"); })
.attr("d", function (d) {
var seriesData,
baseline = [],
Expand Down Expand Up @@ -147,43 +148,101 @@
}
});

// Add line markers.
markers = chart._group.selectAll(".markers")
.data(data)
.enter();

// Add a fully opaque white circle first so we don't see a ghost of the line
if (series.lineMarkers) {
markers.append("circle")
if (series._markerBacks === null || series._markerBacks === undefined) {
markerBacks = chart._group.selectAll(".markerBacks").data(data);
} else {
markerBacks = series._markerBacks.data(data, function (d) { return d.key; });
}
// Add
markerBacks
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", "markerBacks")
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 0)
.attr("fill", "white")
.attr("stroke", "none");

// Update
markerBacks
.transition().duration(duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.attr("fill", "white")
.attr("stroke", "none");
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight);
// Remove
markerBacks
.exit()
.transition().duration(duration)
.attr("r", 0)
.each("end", function () {
d3.select(this).remove();
});
series._markerBacks = markerBacks;
}

// Deal with markers in the same way as main series to fix #28
if (series._markers === null || series._markers === undefined) {
markers = chart._group.selectAll(".markers").data(data);
} else {
markers = series._markers.data(data, function (d) { return d.key; });
}


// Add the actual marker. We need to do this even if we aren't displaying them because they
// catch hover events
markers.append("circle")
markers
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", "markers")
.on("mouseover", function (e) {
self.enterEventHandler(e, this, chart, series);
})
.on("mouseleave", function (e) {
self.leaveEventHandler(e, this, chart, series);
})
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 0)
.attr("opacity", function (d) { return (series.lineMarkers ? chart.getColor(d).opacity : 0); })
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});

markers
.transition().duration(duration)
.attr("cx", function (d) { return dimple._helpers.cx(d, chart, series); })
.attr("cy", function (d) { return dimple._helpers.cy(d, chart, series); })
.attr("r", 2 + series.lineWeight)
.attr("opacity", function (d) { return (series.lineMarkers ? chart.getColor(d).opacity : 0); })
.call(function () {
if (!chart.noFormats) {
this.attr("fill", "white")
.style("stroke-width", series.lineWeight)
.attr("stroke", function (d) { return dimple._helpers.stroke(d, chart, series); });
.attr("stroke", function (d) {
return (graded ? dimple._helpers.fill(d, chart, series) : chart.getColor(d.aggField[d.aggField.length - 1]).stroke);
});
}
});

markers
.exit()
.transition().duration(duration)
.attr("r", 0)
.each("end", function () {
d3.select(this).remove();
});

// Save the shapes to the series array
series._markers = markers;
},

// Handle the mouse enter event
Expand Down Expand Up @@ -293,7 +352,8 @@
// Add a group for text
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
box = t.append("rect")
.attr("class", "tooltip");

// Add the series categories
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
Expand Down Expand Up @@ -346,6 +406,7 @@
// Create a text object for every row in the popup
t.selectAll(".textHoverShapes").data(rows).enter()
.append("text")
.attr("class", "tooltip")
.text(function (d) { return d; })
.style("font-family", "sans-serif")
.style("font-size", "10px");
Expand Down
11 changes: 9 additions & 2 deletions src/objects/plot/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,12 @@
.enter()
.append("rect")
.attr("id", function (d) { return d.key; })
.attr("class", function (d) { return className + " bar " + d.aggField.join(" ") + " " + d.xField.join(" ") + " " + d.yField.join(" "); })
.attr("class", function (d) {
return className + " bar " +
d.aggField.join(" ").split(" ").join("_") + " " +
d.xField.join(" ").split(" ").join("_") + " " +
d.yField.join(" ").split(" ").join("_");
})
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
Expand Down Expand Up @@ -175,7 +180,8 @@
// Add a group for text
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
box = t.append("rect")
.attr("class", "tooltip");

// Add the series categories
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
Expand Down Expand Up @@ -223,6 +229,7 @@
// Create a text object for every row in the popup
t.selectAll(".textHoverShapes").data(rows).enter()
.append("text")
.attr("class", "tooltip")
.text(function (d) { return d; })
.style("font-family", "sans-serif")
.style("font-size", "10px");
Expand Down
12 changes: 10 additions & 2 deletions src/objects/plot/bubble.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,13 @@
.enter()
.append("circle")
.attr("id", function (d) { return d.key; })
.attr("class", function (d) { return className + " bubble " + d.aggField.join(" ") + " " + d.xField.join(" ") + " " + d.yField.join(" ") + " " + d.zField.join(" "); })
.attr("class", function (d) {
return className + " bubble " +
d.aggField.join(" ").split(" ").join("_") + " " +
d.xField.join(" ").split(" ").join("_") + " " +
d.yField.join(" ").split(" ").join("_") + " " +
d.zField.join(" ").split(" ").join("_");
})
.attr("cx", function (d) {
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._origin);
})
Expand Down Expand Up @@ -196,7 +202,8 @@
// Add a group for text
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
box = t.append("rect")
.attr("class", "tooltip");

// Add the series categories
if (series.categoryFields !== null && series.categoryFields !== undefined && series.categoryFields.length > 0) {
Expand Down Expand Up @@ -249,6 +256,7 @@
// Create a text object for every row in the popup
t.selectAll(".textHoverShapes").data(rows).enter()
.append("text")
.attr("class", "tooltip")
.text(function (d) { return d; })
.style("font-family", "sans-serif")
.style("font-size", "10px");
Expand Down

0 comments on commit 1bcfcb9

Please sign in to comment.