d3gauge-multicolor is a fork of d3gauge.js that adds the ability to configure any number of specific colour ranges to the ticks as well as adding a positionable title.
d3gauge.js is an add-in for the D3 javascript library for drawing gauges, based on the google charts gauge and this javascript implementation. Every aspect of a d3gauge (sizes, colours, fonts) can be customised by passing an object containing options (see below).
The gauge values can be easily updated, and the needle moves with an 'rubber-band' effect. The gauge is a javascript object, so it is possible to have multiple gauges in one document.
Styles are set by inline style arguments, rather than CSS classes so that (i) multiple gauges can have different styles and (ii) svg gauges can be saved as images using tools like canvg
I have written a more detailed post on how the code works on my blog, here, which includes a live example. There is a also a guide to rasterising the gauge as a png file in the browser here.
The current version of d3gauge works with d3 version 4 and 5. If you need a version that works with d3 version 3 see commit 02d57bcbc5d10bfe853663c9f0b1442d5f63d265
Add the d3gauge.js script to your site, along with the latest version of d3:
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="d3gauge.js" charset="utf-8"></script>
To create a new d3gauge, add a div to your HTML document with a unique id, then call a new gauge object:
<div id="gaugeBox"></div>
then create a new drawGauge object, passing the div id
var gauges = []
gauges[0] = new drawGauge({divID : "gaugeBox"});
This will add a gauge ranging from 0 to 100%, and set the needle at 60%, as an example. The gauge value can then be updated using the updateGauge function within the new gauge object:
var newValue = 10
gauges[0].updateGauge(newValue)
For an example of using the gauge in a web page, see the demo.html file in the repository.
The following options can be set:
- divID - The div in which to place the gauge
- offsetX - The x-offset of the guage in the rendered SVG in pixels
- offsetY - The y-offset of the guage in the rendered SVG in pixels
- minVal - The minimum numeric value on the gauge
- maxVal - The maximum numeric value on the gauge
- tickSpaceMinVal - The numeric spacing of the minor increment ticks
- tickSpaceMajVal - The numeric spacing of the major increment ticks
- needleVal - The initial value of the needle
- titleOffsetX - The x-offset of the title in the rendered SVG in pixels (Default: 0)
- titleOffsetY - The y-offset of the title in the rendered SVG in pixels (Default: 0)
- titleFontSize - The size of the title font(Default: labelFontSize)
- titleTextAnchor - The anchor style of the title (Default: "middle")
- titleFontWeight - The weight of the title font (Default: bold")
- titleFontFamily - The font-family of the title font (Default: "Play")
- titleText - The text to display for the title (Default: "")
- titleCol - The color of the title (Default: "#000")
- dropShadowBlur - Drop shadow gaussian blur amount in pixels (Default: 5)
- dropShadowHeight - Drop shadow height in percentage (Default: "130%")
- dropShadowDistanceX - Shadow distance along the x-axis (Default: 5)
- dropShadowDistanceY - Shadow distance along the y-axis (Default: 5)
- labelFontSize - Size of the tick mark labels in pixels
- labelPadding - Pixels of padding between the tick labels and the ticks
- gaugeUnits - The units text, which is placed at the bottom of the gauge
- labelFontWeight - Font weight for the label
- tickFont - The font of the tick labels
- unitsFont - The font of the units text, at the bottom of the gauge
- unitsFontSize - Size of the units display, same as labelFontSize by default
- unitsFontWeight - Font weight for the units
- gaugeRadius - The radius of the gauge in pixels
- padding - Padding between gauge radius and the outer circle of the gauge, as a % of the gauge radius
- edgeWidth - The thickness of the circle around the edge of the gauge, as a % of the gauge radius
- tickEdgeGap - Spacing between ticks and the outer circle, as a % of the gauge radius
- tickLengthMaj - Length of the major ticks, as a % of the gauge radius
- tickLengthMin - Length of the minor ticks, as a % of the gauge radius
- needleTickGap - Spacing between the major ticks and furthest extent of the needle, as a % of the gauge radius
- needleLengthNeg - Length of the needle section extending beyond the centre of the gauge, as a % of the gauge radius
- pivotRadius - Size of the central 'pivot' circle, on which the needle sits, as a % of the gauge radius
- ticknessGaugeBasis - Scaling factor for thickness metics. The scaling factor is determined as (gaugeRadius / ticknessGaugeBasis)
- needleWidth - Width of the needle in pixels
- tickWidthMaj - Widths of the major tick marks in pixels
- tickWidthMin - Width of the minor tick marks in pixels
- zeroTickAngle - The position angle (in degrees) of the lowest value tick
- maxTickAngle - The position angle (in degrees) of the highest value tick
- zeroNeedleAngle - The lowest needle angle. If a needleVal < minVal is set, then the needle will go to this position.
- maxNeedleAngle - The highest needle angle. If a needleVal > maxVal is set, then the needle will go to this position.
- tickColMaj - Colour of the major ticks
- tickColMin - Colour of the minor ticks
- outerEdgeCol - Colour of the outer circle
- pivotCol - Colour of the central pivot circle
- innerCol - Colour of the gauge face
- unitsLabelCol - The colour of the units text, at the bottom of the gauge
- tickLabelCol - The colour of the tick labels
- needleCol - The colour of the needle
- colRanges - Optional colored ticks for specific ranges. If the needleVal is greater than the provided key in this associative array, the value will be assigned as the color.
colRanges: {
0: "red",
1: "#E2571E",
2: "orange",
3: "yellow",
4: "green",
5: "#96bf33",
6: "blue",
7: "indigo",
8: "violet",
9: "white"
}See demo-multicolor.html for an example.
For more information on how the code works, see this blog post