From 620013c99cb113116ceaa32960d1d62b8531d663 Mon Sep 17 00:00:00 2001 From: apawlicka Date: Wed, 24 Jul 2013 11:25:33 +0100 Subject: [PATCH] Added drop line to x- and y-axis and ring around the circle that is shown on hover. Style controlled via CSS. --- site/css/charts.css | 13 ++++ site/js/diabetes_ccg_ranking.js | 121 +++++++++++++++++++++++++++++++- 2 files changed, 133 insertions(+), 1 deletion(-) diff --git a/site/css/charts.css b/site/css/charts.css index f933517..8c797cb 100644 --- a/site/css/charts.css +++ b/site/css/charts.css @@ -99,6 +99,19 @@ circle { fill: #41B6C4; } +circle#ring { + stroke: #41B6C4; + fill: none; + stroke-width: 1; +} + +line#drop { + fill: none; + stroke: #41B6C4; + stroke-width: 2; + stroke-dasharray: 3, 3; +} + div#tooltip { position: absolute; width: auto; diff --git a/site/js/diabetes_ccg_ranking.js b/site/js/diabetes_ccg_ranking.js index fc4de8d..4f0343d 100644 --- a/site/js/diabetes_ccg_ranking.js +++ b/site/js/diabetes_ccg_ranking.js @@ -29,7 +29,8 @@ var diabetes_ccg_ranking_top_10 = function diabetes_ccg_ranking_top_10(div) { var cx = parseFloat(e.selectedShape.attr("cx")), cy = parseFloat(e.selectedShape.attr("cy")), r = parseFloat(e.selectedShape.attr("r")), - fill = e.selectedShape.attr("fill"); + fill = e.selectedShape.attr("fill"), + opacity = e.selectedShape.attr("opacity"); // Set the size and position of the popup var width = 150, @@ -86,6 +87,61 @@ var diabetes_ccg_ranking_top_10 = function diabetes_ccg_ranking_top_10(div) { .text('Prevalence: ' + Math.round(e.seriesValue[3] * 10) / 10 + '%') .style("font-family", "sans-serif") .style("font-size", 10); + + /* Drop line that goes from the circle to x- and y-axis. Shown on hover. */ + var dropDest = myChart.series[0]._dropLineOrigin(), + animDuration = 750; + + if (myChart._tooltipGroup !== null && myChart._tooltipGroup !== undefined) { + myChart._tooltipGroup.remove(); + } + myChart._tooltipGroup = myChart.svg.append("g"); + + // Add a ring around the data point + myChart._tooltipGroup.append("circle") + .attr("id", "ring") + .attr("cx", cx) + .attr("cy", cy) + .attr("r", r) + .attr("opacity", 0) + .transition() + .duration(animDuration / 2) + .ease("linear") + .attr("opacity", 1) + .attr("r", r + 4) + .style("stroke-width", 2); + + // Add a drop line to the y axis + if (dropDest.x !== null) { + myChart._tooltipGroup.append("line") + .attr("id", "drop") + .attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) + .attr("y1", cy) + .attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) + .attr("y2", cy) + .style("opacity", opacity) + .transition() + .delay(animDuration / 2) + .duration(animDuration / 2) + .ease("linear") + .attr("x2", dropDest.x); + } + + // Add a drop line to the y axis + if (dropDest.y !== null) { + myChart._tooltipGroup.append("line") + .attr("id", "drop") + .attr("x1", cx) + .attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4)) + .attr("x2", cx) + .attr("y2", (cy < dropDest.y ? cy + r + 4 : cy - r - 4)) + .style("opacity", opacity) + .transition() + .delay(animDuration / 2) + .duration(animDuration / 2) + .ease("linear") + .attr("y2", dropDest.y); + } } // Event to handle mouse exit @@ -94,6 +150,10 @@ var diabetes_ccg_ranking_top_10 = function diabetes_ccg_ranking_top_10(div) { if (popup !== null) { popup.remove(); } + // Remove the drop line and ring around circle + if (myChart._tooltipGroup !== null && myChart._tooltipGroup !== undefined) { + myChart._tooltipGroup.remove(); + } }; }); } @@ -186,6 +246,61 @@ var diabetes_ccg_ranking_bottom_10 = function diabetes_ccg_ranking_bottom_10(div .text('Prevalence: ' + Math.round(e.seriesValue[3] * 10) / 10 + '%') .style("font-family", "sans-serif") .style("font-size", 10); + + /* Drop line that goes from the circle to x- and y-axis. Shown on hover. */ + var dropDest = myChart.series[0]._dropLineOrigin(), + animDuration = 750; + + if (myChart._tooltipGroup !== null && myChart._tooltipGroup !== undefined) { + myChart._tooltipGroup.remove(); + } + myChart._tooltipGroup = myChart.svg.append("g"); + + // Add a ring around the data point + myChart._tooltipGroup.append("circle") + .attr("id", "ring") + .attr("cx", cx) + .attr("cy", cy) + .attr("r", r) + .attr("opacity", 0) + .transition() + .duration(animDuration / 2) + .ease("linear") + .attr("opacity", 1) + .attr("r", r + 4) + .style("stroke-width", 2); + + // Add a drop line to the y axis + if (dropDest.x !== null) { + myChart._tooltipGroup.append("line") + .attr("id", "drop") + .attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) + .attr("y1", cy) + .attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4)) + .attr("y2", cy) + .style("opacity", opacity) + .transition() + .delay(animDuration / 2) + .duration(animDuration / 2) + .ease("linear") + .attr("x2", dropDest.x); + } + + // Add a drop line to the y axis + if (dropDest.y !== null) { + myChart._tooltipGroup.append("line") + .attr("id", "drop") + .attr("x1", cx) + .attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4)) + .attr("x2", cx) + .attr("y2", (cy < dropDest.y ? cy + r + 4 : cy - r - 4)) + .style("opacity", opacity) + .transition() + .delay(animDuration / 2) + .duration(animDuration / 2) + .ease("linear") + .attr("y2", dropDest.y); + } } // Event to handle mouse exit @@ -194,6 +309,10 @@ var diabetes_ccg_ranking_bottom_10 = function diabetes_ccg_ranking_bottom_10(div if (popup !== null) { popup.remove(); } + // Remove the drop line and ring around circle + if (myChart._tooltipGroup !== null && myChart._tooltipGroup !== undefined) { + myChart._tooltipGroup.remove(); + } }; });