Now that we know how to create a Flot data set, we can now go over how you actually place a data set into a chart. Thankfully, this is very easy to do.
First thing you have to do is create a div with a unique ID.
<div id="placeholder" style="width:600px;height:300px;"></div>
This will become the space that our chart will occupy. Make sure you set the div to your desired size, otherwise your chart will not look the way you intend.
Now lets get to the jQuery code:
<script type="text/javascript">
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
$.plot($("#placeholder"), [ d2 ]);
</script>
You have a basic data set, but the jQuery command places the chart in the div with the id “placeholder”.
In order to see this in action check out the source on a demo page located here.
As you can see using Flot is very easy to do.
