Setting up the a custom formatter

In order to allow you to create custom data formatters i.e any function definitions available in the Flot library, WebExtras provides the WebExtras.Core.JsFunc class.

Let's setup a custom tick formatter as shown in the Flot API here for our X axis.

Markup

  // Lets setup the X axis's tick formatter
  FlotOptions options = new FlotOptions
  {
    xaxis = new AxisOptions
    {
      tickDecimals = 2,
      tickFormatter = new JsFunc
      {
        ParameterNames = new string[] { "val", "axis" },
        Body = "return val.toFixed(axis.tickDecimals);"
      }
    }
  };
  

All the remaining process remains the same i.e creating the series and any other options you want.

Output

  // This is how our Flot options will get serialized down
  options = {
    "xaxis": {
      "tickFormatter": function (val, axis) { return val.toFixed(axis.tickDecimals); },
      "tickDecimals": 2
    }
  };    
  

And the actual graph