JustGauge.js Insert Comma

Question

I am struggling to insert a comma into my JustGauge Chart.

So far I have the following code. most of it is working as expected;

window.onload = function() {

  var g1 = new JustGage({
    id: "g1",
    value: 24692,
    min: 0,
    max: 30009,
    title: 'Document Countdown',
    titlePosition: 'above',
    width: 800,
    height: 800,
    pointer: true,
    textRenderer: function(val) {
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    gaugeWidthScale: 1.2,
    noGradient: true,
    customSectors: [{
      color: '#32CD32',
      lo: 0,
      hi: 30009
    }]
  });
}

Fiddle https://jsfiddle.net/johnny_s/xsgpp4ng/1/

The 'textRenderer' part of the above code adds a comma to the 'value', I'm not sure how to do the same with 'max'.

I need to add a comma to the 'max' value - so it's '30,009'. When I try to add it manually the chart won't load.

Any help is appreciated.

Answer 1

This has been a feature request posted as request 193 and has been implemented as an extra property maxTxt in the update of February 3, 2016 and is part of release 1.2.7. Current version is 1.2.9.

Note that several features changed in version 1.2.9 compared to the version you used (1.2.2):

• the structure of the customSectors: it is no longer an array. The array part is now moved into a subproperty ranges
• Support for title has been removed, as this really does not belong to the "core business" of the widget; one can better control the position and style of such a title in the surrounding HTML/CSS.
• There is a bug related to the noGradient setting: issue 270. The suggested fix has not been included in the latest release. Instead of tampering with the library yourself, I would suggest working around that issue by adding a customSectors.length property with a positive value.

I have included these changes also in the updated fiddle which uses version 1.2.9:

var g1 = new JustGage({
      id: "g1", 
      value: 24692,
      min: 0,
      max: 30009,
      maxTxt: "30,009", // <------ add this
      // remove title attributes -- no longer supported
      //title: 'Document Countdown',
      //titlePosition: 'above',
      width: 800,
      height: 400, // <--- reduced to allow title to be closer to gauge
      pointer: true,
      textRenderer: function(val) {
            return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      },
      gaugeWidthScale: 1.2,
      pointerOptions: {
        toplength: -15,
        bottomlength: 10,
        bottomwidth: 12,
        color: '#8e8e93',
        stroke: '#ffffff',
        stroke_width: 3,
        stroke_linecap: 'round'
      },
      noGradient: true,
      customSectors: { // <--- no longer an array...
        ranges: [{ // <--- ... which has moved to this property
          color: '#32CD32',
          lo : 0,
          hi : 30009
        }],
        length: 1 // fixes a bug
      }
}); 

The HTML should contain the title. Something like this:

<div style="display: inline-block">
  <h2 style="text-align:center;">Document Countdown</h2>
  <div id="g1"></div>
</div>

Answer 2

Another way of doing it is add formatNumber: true when you initialize. It will format min max and value. You can also get rid of the textRenderer field.

I updated your fiddle

window.onload = function(){
         var g1 = new JustGage({
          id: "g1", 
          value: 24692, /* <-- just change this to your current value */
          min: 0,
          max: 30009, /* start amount */
          title: 'Document Countdown',
          titlePosition: 'above',
          width: 800,
          height: 800,
          pointer: true,
          formatNumber: true,
          gaugeWidthScale: 1.2,
            pointerOptions: {
            toplength: -15,
            bottomlength: 10,
            bottomwidth: 12,
            color: '#8e8e93',
            stroke: '#ffffff',
            stroke_width: 3,
            stroke_linecap: 'round'
          },
          noGradient: true,
          customSectors: [{
            color: '#32CD32',
            lo: 0,
            hi: 30009
          }]
        });
}