Home/ Questions/Q 8543111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T12:13:33+00:00

I am trying to use flot plug-in to plot some data which are wrote

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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] ]
}
    • 0