New chart type: Linear gauge

I’m in need of a chart type that currently isn’t available with chart.js… and while I’d love to create it and contribute it to the project, my skills aren’t up to the task. So, I’m hoping someone here would be willing to take it on for a small fee. Anyone interested please contact me directly so we can coordinate — I can’t really afford to have multiple people deliver a linear gauge all expecting payment!

My hope is that someone will be able to create a linear gauge chart type which can then be contributed back to the chart.js project… and that will meet the needs I have for a project I’m working on currently (i.e., I don’t have a long timeline for this).

The ideal linear gauge would have many of the same options as those examples settable per chart:

  • geometry (horizontal/vertical)
  • range (startValue/endValue)
  • axis color
  • axis width (should include ability to set to 0 so no axis line is displayed)
  • tick marks interval
  • tick mark labels
  • value indicator
    • at least including options for a ‘range’ indicator or a ‘point’ indicator
    • shapes of the ‘point’ indicator are less important, although size is probably important
  • value indicator offset (from center of the axis line)
  • value indicator color
    • value color ranges would be good for the range indicator type
  • tooltips (like current chart.js charts)
    • ideally tooltips would also allow some if/else statements so tooltips could change depending on value
  • legend
  • chart title
  • ability to place an image in the background (see example linked to below)

Having the ability to display more than one value on a single chart might also be useful (but probably isn’t critical) — see http://tapintu.net/testing/trimergence/s-e-graphic.html

http://tapintu.net/testing/trimergence/s-e-graphic4.html — this one shows the two “subvalues” from the above chart separated out into their own linear gauge charts.

For all of those examples I used the devexpress trial to create a vertical linear gauge where I made all but the value indicators invisible and then placed an image behind the chart (i.e., background image on the div with the chart).
Here are some examples of the linear gauge charts of the devexpress commercial package which are along the lines of what I’m hoping for:
http://js.devexpress.com/Demos/WidgetsGallery/#demo/gaugeslineargaugeslineargaugebasicelementsscalecustomtickinterval/generic/light/default
http://js.devexpress.com/Demos/WidgetsGallery/#demo/gaugeslineargaugeslineargaugebasicelementsbasevalueforrangebar/generic/light/default
http://js.devexpress.com/Demos/WidgetsGallery/#demo/gaugeslineargaugeslineargaugebasicelementsscalecustomtickvalues/generic/light/default

Author: Fantashit

1 thought on “New chart type: Linear gauge

  1. Does anyone know if there is a similar extension compatible with Chart.js v2? If not, then it might be worth (re-)considering including this chart type in the actual project.

Comments are closed.