Chart.js: New chart type: Linear gauge

[scottmcculloch]

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

[scottmcculloch]

I hired someone to write a linear gauge chart as a new chart type for Chart.js for a project I'm doing. I'd like to contribute the new linear gauge chart type to the Chart.js project. What's the best way to do this?

I have a github account, and could host it -- but I can't really maintain the code.

I also want to make sure the developer I used gets some credit (i.e., at least a link to his elance.com profile), although I don't expect he wants to be the maintainer either.

Thanks.

[tannerlinsley]

I can host it if you want. I'll make sure that it gets updated and maintained along with Chart.js. If (or as soon as) it's looking great, we'll get it put on the sanctioned chart extensions in the docs.

[scottmcculloch]

Great @tannerlinsley !

What's the best way to get the files to you (the .js file and an example html page) ?

[tannerlinsley]

Zip them up and send them to [email protected]. Be sure to include
all of the credit information as well.
On Mon, Apr 27, 2015 at 12:27 PM Scott McCulloch [email protected]
wrote:

Great @tannerlinsley https://github.com/tannerlinsley !

What's the best way to get the files to you (the .js file and an example
html page) ?

—
Reply to this email directly or view it on GitHub
https://github.com/nnnick/Chart.js/issues/1033#issuecomment-96770672.

[scottmcculloch]

They're on the way.

[tannerlinsley]

Awesome! Thanks

On Mon, Apr 27, 2015 at 12:37 PM Scott McCulloch [email protected]
wrote:

They're on the way.

—
Reply to this email directly or view it on GitHub
https://github.com/nnnick/Chart.js/issues/1033#issuecomment-96774343.

[tannerlinsley]

https://github.com/chartjs/Chart.LinearGauge.js

[scottmcculloch]

Cool - thanks!

[etimberg]

Closing since the linear gauge is hosted in the Chartjs github organization.

[rufasterisco]

https://github.com/chartjs/Chart.LinearGauge.js is not on the official chartjs repository
no mention of any gauge in https://github.com/nnnick/Chart.js/ docs
even searching for gauge that repository shows no results
same with chartjs website
i'm a little confused, i was going to skip chartjs since i was not finding gauges, but at the last click i find them hidden in a different repository...
i guess something went wrong ¯_(ツ)_/¯
r*

[tiesont]

@rufasterisco One of the devs can correct me if I'm wrong, but you won't find it in the repo since it's considered a community extension, rather than a core chart type. I believe there was some discussion on if/where to host officially-recognized extensions, but there currently isn't anything in place for V1 (that I know of, anyway).

[etimberg]

@tiesont is correct, we consider it an extension. There is a list of community extensions at http://www.chartjs.org/docs/#advanced-usage-community-extensions but the linear gauge is not included. At some point we will transition this repo into the chartjs org and it will make it much easier to find those extensions

[rufasterisco]

Thanks for clarifying :)

[cers]

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.

[crouti]

I think here it is : https://github.com/scottmcculloch/Chart.LinearGauge.js