Creating the Flot options

Flot graph options are created by instantiating the WebExtras.JQFlot.FlotOptions class.

  FlotOptions options = new FlotOptions
  {
    xaxis = new AxisOptions(),                  // Initialise X axis
    yaxis = new AxisOptions(),                  // Initialise Y axis
    grid = new GridOptions { borderWidth = 1 }  // Initialise grid. By default no grid is shown
  };
  

Creating the graph data

Flot rendering data is a 2 dimensional numeric array. This can be of any numeric type int, decimal, float or double. In order to compensate for numerals WebExtras uses the biggest of the numeral types provided by .NET - double

  List<double[]> graphData = new List<double[]>();
  
  // Notice that each individual array added to the 'graphData' variable has 2 columns
  // The first column is your X co-ordinate and the second is your Y co-ordinate

  graphData.Add(new double[] { 1, 5 });                            
  graphData.Add(new double[] { 2, 10 });

  // ... and so on
  

Creating the Flot series to be plotted

A Flot series is creating by instantiating the WebExtras.JQFlot.FlotSeries class

  FlotSeries linegraph = new FlotSeries
  {
    label = "Sample Line Graph",
    data = graphData,
    lines = new LineGraph { show = true }                 // This will denote that you want a Line graph
  };
  

Creating the Flot Chart

All the things we have done so far now get bundled into a Flot chart by instantiating the WebExtras.JQFlot.FlotChart object.

  // Notice that the 'chartSeries' property is an array, giving the flexibility of rendering multiple series in the same graph
  FlotChart chart = new FlotChart
  {
    chartOptions = options,
    chartSeries = new FlotSeries[] { linegraph }          
  };
  

Now in your HTML

Now that all C# bindings are done, it is time to render our graph. This can be done with a little bit of Javascript.

  // Don't forget the square brackets when adding the graph serie  
  $.plot($('#line-graph'), [chart.chartSeries[0].ToString()], chart.chartOptions.ToString());
  

And finally the output...