CODEWITHSUNDEEP
javascripthtmld3.js
user3169698
user3169698

Reputation: 153

D3 Gauge Chart with Labels

I have seen a variety of charts in d3 and gotten most of them working. I've seen sectioned gauges, a 180 degree gauge that changes colors (best one so far), and a spedometer style gauge chart.

What I'm looking for, within the realm of d3 or any javascript really, is a d3 gauge chart that has 'section labels' of a sort.

For example: I have a 180 degree gauge chart with a percentage from 0 to 100. Between 0 and 33%, the label text No Risk to be above that section, while 34% to 66% should have the text Some Risk above it, and 67% to 100% section should have the text Total Risk above it, or something similar.

My question is, does anyone know of a premade gauge chart that can do that, or would cheating in the labels work better? Would making a Pie Chart with labels and drawing my own needle be the better option?

Due to further research, I was able to find the following: http://tributary.io/inlet/5273835

I might be able to draw a needle on this style of chart. However, I don't know how to bring the text our of the section and hover just outside of the chart. Any ideas?

Upvotes: 0

Views: 5604

Answers (1)

McTalian
McTalian

Reputation: 395

This is a very rough solution, but it could work for your particular application.

I am fairly new to d3 myself.

http://codepen.io/anon/pen/KrBJn

Obviously this is all hard coded, I'm sure there is a more elegant solution for positioning.

chart.append("text")
    .attr("dy", "-5em")
    .attr("dx", "-11.5em")
    .attr("text-anchor", "left")
    .text("No Risk");

  chart.append("text")
    .attr("dy", "-11em")
    .attr("dx", "0em")
    .attr("text-anchor", "middle")
    .text("Some Risk");

  chart.append("text")
    .attr("dy", "-5em")
    .attr("dx", "9em")
    .attr("text-anchor", "right")
    .text("Total Risk");

Upvotes: 2

Related Questions