This example shows you how to use JSON data with Flotr. The canvas container is hidden when the page is
loaded. By pressing the button a GET request is send to json.txt.
This returns a JSON string with data for three series. When the returned json is a valid object, the
canvas container is shown and the graph is rendered with Flotr.draw(). Here's the requested json:
{
series:[{
data:[[0,1],[1,4],[2,3],[3,6],[4,4.5]],
points:{show:true},
lines:{show:true}
},
[[0,0.5],[1,0.6],[2,1.8],[3,0.9],[4,2]],
[[0,1.5],[1,2],[2,4.5],[3,3.5],[4,5.5]]
],
options:{
mouse:{track:true},
xaxis:{noTicks:10, tickDecimals:1}
}
}
Let me give you one advise about JSON. To make sure you receive the data in the right format, use the Firefox extension Firebug
to console.log (print) the response. With Firebug you can examine the Ajax request and it's response.
Also, it's worth reading Introduction to JSON on PrototypeJS.org.
Finished? Go to the example index page or the Flotr Documentation Pages.