Geek Answers Handbook

External print data using jQuery Flot

I am trying to use a plugin to print some data that is written to a JSON file. It is not so difficult to do, but I can not find something that works ... can you help me.

This is the page I 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 contains 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 calling the JSON script, it still does not work and a message does not appear on the screen. Using the Chrome utility (I don’t remember the name ;-)) I see that the hte 1.json file is loaded correctly. I think the problem is that the script is executed first, after which the 1.json file is loaded. I made a small change to the page. You can see the demo on this page. This is the code for page 1.htm:

<!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>

1.json( )

[{  label: "Values",  
    data:   [   
        [1, 50.026],
        [2, 50.028],
        [3, 50.029],
        [4, 50.026],
        [5, 50.025],
        [6, 50.016]
        ]
}}

. , :

<!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>

json ( , , )

{
    "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]]
}

, .

+5
2

- .

, : .

, , :

<!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>

(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] ]
}
+6

:

$(function () {  
    var data;
    var plotarea = $("#placeholder");

    $.getJSON("1.json", function(json) {
       //succes - data loaded, now use plot:
       $.plot(plotarea , data);  
    });
});

JSON ( "[" "}". :

{  label: "Values",  
    data:   [   
        [1, 50.026],
        [2, 50.028],
        [3, 50.029],
        [4, 50.026],
        [5, 50.025],
        [6, 50.016]
        ]
}
+2

More articles:


All Articles