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

Slightly modifying our series and options we get...


  FlotSeries serie1 = new FlotSeries
  {
    label = "Serie1",
    data = 24.2658                    // Note that this is a single double value as opposed to an 2d array    
  };
  FlotSeries serie2 = new FlotSeries
  {
    label = "Serie2",
    data = 86.1                       // Note that this is a single double value as opposed to an 2d array    
  };
  FlotSeries serie3 = new FlotSeries
  {
    label = "Serie3",
    data = 91.0254                    // Note that this is a single double value as opposed to an 2d array    
  };

  // Since we are drawing a pie we must supply each slice as a separate serie
  FlotSeries[] series = new FlotSeries[] { serie1, serie2, serie3 };

  FlotOptions options = new FlotOptions
  {
    series = new SeriesOptions
    {
      pie = new PieGraph { show = true }    // This will denote that you want a Pie graph
    }
  }
  

And we have a pie graph...