External data to plot with jQuery Flot
Solution 1
I use this to generate automatic updated information website for project progress.
My small example using more than one type of diagram: line and bar.
I find it easier to understand if I have a running example, so here we are:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
</head>
<body>
<h1>Graph</h1>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$.getJSON("barLine.json", function(json) {
//succes - data loaded, now use plot:
var plotarea = $("#placeholder");
var dataBar=json.dataBar;
var dataLine=json.dataLine;
$.plot(plotarea , [
{
data: dataBar,
bars: {show: true}
},
{
data: dataLine,
lines: { show: true, steps: false }
}
]
);
});
});
</script>
<div id="placeholder" style="width:600px;height:300px;"></div>
</body>
</html>
And the data(barLine.json):
{
"label": "Europe (EU27)",
"dataBar": [[1999, 1], [2000, 0.23], [2001, 3], [2002, 4], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]],
"dataLine": [[1999, 2], [2000, 3.23], [2001, 1], [2002, 5], [2003, 2.3], [2004, 6.5], [2005, 4.0], [2006, 3.1], [2007, 0.9], [2008, 6.9], [2009, 9.9] ]
}
Solution 2
Try this:
$(function () {
var data;
var plotarea = $("#placeholder");
$.getJSON("1.json", function(json) {
//succes - data loaded, now use plot:
$.plot(plotarea , data);
});
});
And in your JSON file there is a syntax error (starting with a "[" and ending with a "}". Could you try this:
{ label: "Values",
data: [
[1, 50.026],
[2, 50.028],
[3, 50.029],
[4, 50.026],
[5, 50.025],
[6, 50.016]
]
}
![Nicolaesse](https://i.stack.imgur.com/ijUnZ.jpg?s=256&g=1)
Nicolaesse
Updated on September 20, 2020Comments
-
Nicolaesse almost 4 years
I am trying to use flot plug-in to plot some data which are wrote into a JSON file. It doesn't seem so hard to do but I can't find something that work...can you please help me.
That's the page I've wrote:
$(function () { var data; $.getJSON("1.json", function(json) { var data = json; }); var options = { legend: { show: true, margin: 10, backgroundOpacity: 0.5 }, points: { show: true, radius: 3 }, lines: { show: true } }; var plotarea = $("#placeholder"); $.plot(plotarea , data, options); });
while the 1.json file coitain all of the following:
{ label: "Values", data: [ [1, 50.026], [2, 50.028], [3, 50.029], [4, 50.026], [5, 50.025], [6, 50.016] ] }
@MarcoJohannesen Even if I write "console.log(data)" after the JSON call the script still dowsn't work and no message appear on the screen. Using Chrome utility (I don't remember the name ;-)) I can see that hte file 1.json has been loaded correctly. I think that the problem is that first of all the script is executed and after that the file 1.json is loaded. I've made a little edit on the page. You can see a demo on this page This is the page "1.htm" code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script language="javascript" type="text/javascript" src="jquery.js"></script> <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> </head> <body> <h1>Graph</h1> <div id="placeholder" style="width:600px;height:300px;"></div> <script language="javascript" type="text/javascript"> $(function () { var data; $.getJSON("1.json", function(json) { var data = json; }); console.log(data); var plotarea = $("#placeholder"); $.plot(plotarea , data); }); </script> </body> </html>
and this is the 1.json (I've added the square brackets)
[{ label: "Values", data: [ [1, 50.026], [2, 50.028], [3, 50.029], [4, 50.026], [5, 50.025], [6, 50.016] ] }}
I definitely found a way to make a working page. That's the code I used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script language="javascript" type="text/javascript" src="jquery.js"></script> <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> </head> <body> <h1>Graph</h1> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $.getJSON("1.json", function(json) { //succes - data loaded, now use plot: var plotarea = $("#placeholder"); var data=[json.data]; $.plot(plotarea , data); }); }); </script> <div id="placeholder" style="width:600px;height:300px;"></div> </body> </html>
and that's the json file (taken from the flot official exaples to be sure that is correctly formatted)
{ "label": "Europe (EU27)", "data": [[1999, 1], [2000, 0.23], [2001, 3], [2002, 4], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] }
now I'm going to bed but tomorrow I we should try to add the label to the plot and trying with more than one series of values.
-
Nicolaesse over 12 yearstill not working...I've updated the files on-line so you can try if you have a debugger. I've found something which could be interesting but I can completely understand the script people.iola.dk/olau/flot/examples/ajax.html and burnsforce.com/flot-format-data-flot-readable-json
-
Sboniso Marcus Nzimande almost 9 years$.plot(plotarea , json);