JQPlot - format ticks based off region

Question

How can I format the ticks in my jqplot to handle the change between , and . and " " depending on the region I'm in.

For example.

• European - 1.000,00
• US - 1,000.00
• Other 1 000,00

My example jqplot initialization looks like....

plot3 = $.jqplot('saturationChart', lineArray, 
         { 
          title:m_Language.saturationChartName,
          series:lineColor,
          legend:{show:true, location:'se'},
          // You can specify options for all axes on the plot at once with
          // the axesDefaults object.  Here, we're using a canvas renderer
          // to draw the axis label which allows rotated text.
          axes:{
            xaxis:{
//            label:'Minutes',
              renderer: $.jqplot.LogAxisRenderer,
              tickDistribution:'power',
              labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
              labelOptions: {
                //fontSize: '12pt'
              },
            },
            yaxis:{
//            label:'Megaohms',
              renderer: $.jqplot.LogAxisRenderer,
              tickDistribution:'power',
              labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
              labelOptions: {
                //fontSize: '12pt'
              }
            },
          }
      });

I looked through the documentation but I am not sure what keywords I need to look for... any help would be appreciated

Answer 1

Based on this, you could use a format string like the following:

yaxis: {
    tickOptions: { formatString: "%'.2f" },
    min : 0
}

That format string, along with the value, end up as arguments into a call to $.jqplot.sprintf. You can then set the separators as follows:

$.jqplot.sprintf.thousandsSeparator = ',';
$.jqplot.sprintf.decimalMark = '.';

So this code:

var value = 10000;
$.jqplot.sprintf.thousandsSeparator = '.';
$.jqplot.sprintf.decimalMark = ',';
console.log($.jqplot.sprintf("European %'.2f", value));

$.jqplot.sprintf.thousandsSeparator = ' ';
$.jqplot.sprintf.decimalMark = ',';
console.log($.jqplot.sprintf("Other %'.2f", value));

$.jqplot.sprintf.thousandsSeparator = ',';
$.jqplot.sprintf.decimalMark = '.';
console.log($.jqplot.sprintf("US %'.2f", value));

Will produce this:

European 10,000.00 
Other 10 000,00 
US 10,000.00 

However, see how the European one is the same as the US? When those separator settings are changed, it results in string replacement, hence why the European one ends up like it does: replacing commas with periods and then periods with commas gives you back the original string.

Because of that, you would need to provide a custom tick formatting method so you could apply those settings on-the-fly and then do a string replace:

yaxis: {
    tickOptions: {
        tickOptions: { formatString: "%'.2f" },
        formatter: function(format, value){
            return FormatTick(format, value);
        }
    }
}

....

function FormatTick(format, value) {
    var prevThousandsSeparator = $.jqplot.sprintf.thousandsSeparator;
    var prevDecimalMark = $.jqplot.sprintf.decimalMark;

    $.jqplot.sprintf.thousandsSeparator = '#';
    $.jqplot.sprintf.decimalMark = '_';

    var formattedValue = $.jqplot.sprintf(format, value);
    formattedValue = formattedValue.replace($.jqplot.sprintf.decimalMark, Language.DecimalMark)
        .replace($.jqplot.sprintf.thousandsSeparator, Language.ThousandsSeparator);

    $.jqplot.sprintf.thousandsSeparator = prevThousandsSeparator;
    $.jqplot.sprintf.decimalMark = prevDecimalMark;

    return formattedValue;
}

This means you will also need some convenient mechanism for establishing both the locale of the user and the correct separator characters to use. I save and restore the thousandsSeparator and decimalMark characters in this way just to ensure that setting them in this way does not cause inadvertant problems elsewhere.

Note also that my solution assumes that the # and _ characters will not otherwise be in the value you are wanting to format. If this is not so, modify the separators in the FormatTick method to something more suitable.