WebExtras

jQuery Flot Bindings

Assembly
WebExtras.dll
Namespace
WebExtras.JQFlot
Dependancies
  • Appropriate third party libraries
  • webextras.bootstrap.css
Steps involved in creating a Flot graph
  • Creating the graph options
  • Creating graph data
  • Creating the graph series
  • Rendering the graph

In order to draw axis labels you need jquery.flot.axislabels.js.

Drawing axis labels

Axis labels can be drawn by setting the appropriate properties of the WebExtras.JQFlot.SubOptions.AxisOptions class. 

  AxisOptions axisOpt = new AxisOptions
  {
    axisLabel = "my axis label"
  };

Axis label options

Option Type Default Description
axisLabel string Empty string Axis label to be shown
axisLabelColor string Color of grid Axis label color to be used
axisLabelPadding integer 2 Padding, in pixels, between the tick labels and the axis label
axisLabelUseCanvas boolean None Flag indicating whether to use the HTML5 Canvas element to render the axis labels
axisLabelUseHtml boolean true Flag indicating whether to use HTML and CSS transformations to render the axis labels
axisLabelFontSizePixels int 14 Font size in pixels for the axis label. This option is only available if 'axisLabelUseCanvas' is set to true.
axisLabelFontFamily string sans-serif Font family for the axis label. This option is only available if 'axisLabelUseCanvas' is set to true.
Note: This plugin only works with Flot v0.7 and above since internally, it no longer takes into account the name of the axis (i.e. yaxis, y2axis, etc.) but rather looks at the 'position' variable, which Flot automatically sets if it is not provided.