Creating semi circular a Gauge using NVd3

Question

I have a project in which I am using nvd3.js and want to create a semi-circular gauge. How do I create it?

I did try to use guage.js for the same but the problem I am facing there is that I cannot add customized/tags labels for the gauge that are of string type and I could not find a way around the problem. Any help is appreciated.

Answer 1

This is what I came up with. It's not perfect, the tooltips are rather meaningless. Also I've been trying to come up with a gradient fill to give it a 3D look, but haven't managed to yet.

   <div style="height: 200px; width: 350px;">
      <div style="height: 350px; width: 350px;">
         <svg id="gaugeContainer"></svg>
      </div>
   </div>
   <script>

    //d3.json("/api/gauge", updateChart);

    updateChart({ "max": 100, "current": 90 });

    function updateChart(data) {
        var containerSvg = "gaugeContainer";
        var height = 350;
        var width = 350;

        // The first graph section always starts at 0 degrees, but we
        // want it to be horizontal so we rotate the whole thing -90 
        // degrees, then correct the labels.

        // The formula for needle angle is ((current/max) * 180) - 90
        // current / max will always be 1.0 or less, 
        // the fraction of max that the needle indicates,
        // * 180 converts to degrees and -90 compensates for rotation.
        var indicatorAngle = ((data.current / data.max) * 180) - 90;

        var colors = ["green", "orange", "red", "white"];

        // Apparently after 4 sections are defined, the fifth one is 
        // dead, as in not graphed.  We play a little trick, defining a 
        // very small white section so we can display
        // the max value at the end of its visible range.
        // The key values could just as easily be strings.
        var graphData = [
            { key: Math.round((data.max / 8) * 1), y: 1 },
            { key: Math.round((data.max / 8) * 3), y: 1 },
            { key: Math.round((data.max / 8) * 6), y: 2 },
            { key: Math.round((data.max / 8) * 8), y: 0.2 },
            { key: "", y: 3.8 }
        ];

        var arcRadius = [
            { inner: 0.6, outer: 1 },
            { inner: 0.6, outer: 1 },
            { inner: 0.6, outer: 1 },
            { inner: 0.6, outer: 1 }
        ];

        nv.addGraph(function () {
            var chart = nv.models.pieChart()
                .x(function (d) { return d.key })
                .y(function (d) { return d.y })
                .donut(true)
                .showTooltipPercent(false)
                .width(width)
                .height(height)
                .color(colors)
                .arcsRadius(arcRadius)
                .donutLabelsOutside(true)
                .showLegend(false)
                .growOnHover(false)
                .labelSunbeamLayout(false);

            d3.select("#" + containerSvg)
                .datum(graphData)
                .transition().duration(1)
                .attr('width', width)
                .attr('height', height)
                .attr("transform", "rotate(-90)")
                .call(chart);
            // draw needle
            d3.select("#" + containerSvg)
                .append("path")
                .attr("class", "line")
                .attr("fill", "none")
                .style("stroke", "gray")
                .style("stroke-width", "1")
                .attr("d", "M0, -3 L153, 0 0,3 Z")
                .attr("transform", "translate(175,179) rotate(" + indicatorAngle + ")");

            d3.select("#" + containerSvg)
                .append("circle")
                .attr("r", "6")
                .attr("cx", "0")
                .attr("cy", "0")
                .style("stroke", "gray")
                .style("stroke-width", "1")
                .attr("transform", "translate(175,179) rotate(" + indicatorAngle + ")");
            // correct text rotation
            d3.select("#" + containerSvg).selectAll("text")
                .attr("transform", "rotate(90)");

            return chart;
        });
    }

</script>