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 curved line graphs you need jquery.flot.curvedlines.js i.e the curved line graph plugin.

Slightly modifying our series and options we get...


  FlotSeries serie = new FlotSeries
  {
    label = "Sample Curved Line Graph",
    data = graphData,
    curvedLines = new CurvedLineGraph { show = true }                 // This will denote that you want a curved Line graph
  };

  FlotOptions options = new FlotOptions
  {
    xaxis = new AxisOptions(),
    yaxis = new AxisOptions(),
    grid = new GridOptions { borderWidth = 1 },
    series = new SeriesOptions
    {
      curvedLines = new CurvedLineOptions { show = true }                       // This actitvates the curved lines plugin
    }
  };

And we have a curved graph...