Highcharts - nested sliced donut charts - javascript

I'm trying to create a nested pie / donut chart, where the inner ring displays a 'group' (e.g. a car manufacturer) and the outer ring displays a breakdown for that 'group' (e.g. the models made by each manufacturer).
I need the individual segments to be exploded / sliced so that it looks like this:
http://imgur.com/TBtySVa
I have managed to get this working using the sliced and slicedOffset properties (the image above is actually a screenshot of my chart), however this creates strange effects (see the fiddle) when there are fewer 'groups'.
I have put together a fiddle to demonstrate how the chart looks odd when there are fewer groups in the inner ring. It looks really bad when there are only one or two items in the inner ring:
http://jsfiddle.net/danielcrisp/784jzLe2/
I would like to know if there is a better way of achieving the result I require? Probably sliced is not the right way to go as it isn't its intended use. How else can I get a gap between items?
Note: the chart will be displayed over a photo so I can't use borders to create the effect.
Update: It's ok if the spacing between segments is regular, e.g. 10px, unlike the irregular spacing shown in the first screenshot.
Transparent borders should be the perfect solution but they don't mask the segment fill colour unfortunately.
Thank you!

You can add some dummy data points that will be transparent. This solution will need some calculations for good visual results.
jsFiddle: http://jsfiddle.net/25acys4j/4/
Example of transparent slice:
{x: 0,
y: 3,
color: 'rgba(0,0,0,0)'
},

Try to adapt donut chart, and border like this: http://jsfiddle.net/25acys4j/. The border can get a transparent color, when you define it as rgba();

Related

How to place a label in an area outside of an SVG path?

I'm creating an HTML5 canvas mapping app that uses the D3 contour plugin to generate an SVG. I need to label the centroid of certain areas that are outside of a calculated path.
For example, I'd like to place a label inside each of the two blue regions:
The green region is an SVG path calculated by D3, and the blue "water" regions are the background showing through areas not covered by the "land" polygon.
I have used .getBBox() for other polygons that have D3-generated paths, but for these regions, the bounding box is the entire SVG.
This codepen demonstrates placing a label on the "land" section of SVG, using .getBBox() - in this example I would like to place a second label on the blue "water" section in the lower right corner.
Thanks for your advice!
You has a concept error. getBBox works well and do what it must to do:
Step 1: You draw WATER
Step 2: Draw the land contour, layer by layer. (Overlaping WATER)
Step 3: get the LAND boundary box (getBBox). And put the label on the center
Step 4: get the WATER boundary box (getBBox). And put the label on the center
At the end you can't see the WATER label:
Posible solution A: Consider WATER level as another layer (modding your data)
Posible solution B: This is just a thought: you can create a mask from the very low layer and used to mask the WATER box as cookie cutter. I think getBBox will give you the right size the final shape.
Recomendation: Try it on differents browsers. Firefox has a bug with getBBox: You can see it here: https://bugzilla.mozilla.org/show_bug.cgi?id=612118 Not solved yet

d3 scatterplot circles rendering differently on update

Here I have the code for my scatterplot.
https://github.com/laran/eisenhower/blob/master/components/plot/scatterplot.js
This is what the plot looks like when it is initially rendered which is done by calling .setup() and then .update().
This is what the plot looks like after a point is added (data points changed and plot updated).
You'll notice that in addition to there being one more point on the second plot, while the new circle has a black outline, all of the circles that were already there have had their black outline removed.
My question is why do the black circle outlines disappear after update?
And, for bonus points:
After updating one of the data points and calling Application.Plotter.update(), the dots often don't update. Why don't the circles update after changing the data values and calling Application.Plotter.update()?
I have a feeling that there's something of in how I'm calling enter() or exit() on the plot. But I'm not familiar enough with d3 to really understand what I've done wrong.
Thanks!
I fixed the issue by calling .exit().remove() before calling .enter().append().
https://github.com/laran/eisenhower/commit/4a23906f17723449a5f1d4901279d32cbcf26870

d3 venn diagram labels layering

Im using this great article to produce a venn diagram with D3.
http://www.benfrederickson.com/venn-diagrams-with-d3.js/
It looks great but on occasion I get bubbles overlapping the the labels become hidden. Is there a way to make sure the text element is always on top? (see the picture below.. label A needs to be on top of circle B.
I found this good article but im struggling in how to implement this in the venn.
How can I bring a circle to the front with d3?
You should grab the latest code from master: this commit should fix the issue you had there https://github.com/benfred/venn.js/commit/4cb3bbef65b5b3c3ce02aee7d913e8814e898baf
Instead of having the 'A' label be overtop of the 'B' circle - it willnow move the label so that its in the certain of the 'A' region that isn't overlapped with 'B'. Some details are in this issue here: https://github.com/benfred/venn.js/issues/18
You might find it easier to work in actual layers. You can use g elements to create them. For example:
var lowerLayer = svg.append('g');
var upperLayer = svg.append('g');
Now anything you append to upperLayer will appear above anything you append to lowerLayer because the two g elements have been added to the DOM and are in a specific order.
Also check out this answer I wrote up for a similar question.

Google Chart API: Change color on hovering legend

So I have a ColumnChart and one of the built-in functionality is that you can hover over an item (so called category) in the legend of the chart and you get some highlight-border around the corresponding columns in the chart.
Now I have many columns and categories in my chart and a highlighted series/category is very hard to see, because the default behavior just shows a 1px gray border around the columns. My columns are only a few pixels width and I still need to differentiate 10 different categories (=colors). So picking only very light colors (where the border would be easy to spot) is no option. I've found no way of changing:
The style of the highlight-border (primarily the color) or
The color of the columns (fill color) when their respective category is selected in the legend.
Is there some property I can pass to the draw() call of my chart to change the highlighting? Do I have to manually override some events/methods?
Help is highly appreciated!
In the past I used some CSS hacks to change some properties of the generated SVG (path, rect, etc...)
you can play around with advanced selectors and maybe you'll be able to achieve you what you want.
I created a very quick and buggy example, but maybe it will point you on the right direction.
For example:
div.google_chart svg g g g g rect {
stroke-width:0px; fill:red;
}
Hope it helps.

How to create a gradient fill on the inner edge of an object with Raphael?

I have a dynamically generated graph that illustrates the range of items that will fit within a container, relative to the item's width and thickness. I'm trying to show that the items near the edge of the "fit range" might not be as good of a fit as those closer to the middle of the graph. To do this I'd like to fill my shape with green, which has a gradient that turns to yellow around the edges. This yellow area should be of uniform thickness around the entire inside edge, as illustrated in the image below. How might I accomplish this with Raphael? I know how to do a solid fill; the gradient is where I'm having difficulty. Thanks in advance for your help!
In theory it should be possible to do this by slicing the graph into four triangles.
Each triangle can then be filled with a gradient that is mostly your solid color but at one end it turns into your edge color. By setting the right angle on the gradient you can make it look like only the edges on the graph have a different color.
I've created the rectangle above using the following code.
var slice1 = paper.path("M200 200L100 100L300 100").attr({
"fill": "90-#0f0:70-#ff0:95",
});
var slice2 = paper.path("M200 200L300 100L300 300").attr({
"fill": "0-#0f0:70-#ff0:95",
});
var slice3 = paper.path("M200 200L300 300L100 300").attr({
"fill": "270-#0f0:70-#ff0:95",
});
var slice4 = paper.path("M200 200L100 300L100 100").attr({
"fill": "180-#0f0:70-#ff0:95",
});
Your case will be a bit more complex though. You will have to first find the middle of the graph to be able to slice it into triangles. Then you need to find the angle for each of the gradients.
Evening,
It's not as easy as it looks like it should be. Probably due to an issue with how to implement it in VML.
The best I was able to do is to use a slightly larger clone of your target object behind the original, and then use a gradient fill on it.
I've made an example in this fiddle
Hope that helps.
You could use a radial gradient on an overllying ellipse but that will leave a rather large corner of yellow
To find the centre of your object use good old getBBox()

Categories

Resources