Comma Separated Numbers For an Axis in Flot

Kyle Brandt picture Kyle Brandt · May 11, 2011 · Viewed 8.9k times · Source

Is there a way to have Flot make axis numbers be comma-separated?

So for example, instead of 1000000 have 1,000,000

Answer

rusty picture rusty · May 11, 2011

You can do that by using the tickFormatter property of the axis.

xaxis: {
  tickFormatter: function(val, axis) {
    // insert comma logic here and return the string
  }
}

Source: http://people.iola.dk/olau/flot/API.txt (under "Customizing the axes")

This page has a function to format numbers with commas: http://www.mredkj.com/javascript/nfbasic.html

For Example on the yaxis:

    $(function () {  
            var plotarea = $("#plotarea");
            $.plot( plotarea , [data], {
                            xaxis: {mode: "time", timeformat: "%m/%d %H:%M:%S"},
                            yaxis: {tickFormatter: function numberWithCommas(x) {
                                      return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
                                }
                            },
                            points: { show: true },
                            lines: { show: true, fill: true }

                    } );
    });