Externe Daten in den plot mit jQuery Flot

Ich versuche, mit flot-plug-in plot-Daten, die sind geschrieben in einer JSON-Datei.
Es scheint nicht so schwer zu tun, aber ich kann nicht finden, etwas, das funktioniert...könnt Ihr mir bitte helfen.

Dass ist die Seite, die habe ich schon schrieb:

$(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);  
});

während der 1.json-Datei coitain alle der folgenden:

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

@MarcoJohannesen Auch wenn ich Schreibe "Konsole.log(data)" nach dem JSON-rufen Sie das Skript noch dowsn nicht funktionieren und es wird keine Meldung auf dem Bildschirm erscheinen. Mit Chrome utility (ich erinnere mich nicht den Namen ;-)) ich kann sehen, dass die Datei 1.json ordnungsgemäß geladen wurde. Ich denke, dass das problem ist, dass sich zuerst das script ausgeführt, und danach wird die Datei 1.json geladen wird. Ich habe ein wenig Bearbeiten auf der Seite.
Sie können sehen, eine demo auf dieser Seite
Dies ist die Seite "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>

- und das ist der 1.json (ich habe die eckigen Klammern)

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

Ich auf jeden Fall einen Weg gefunden, um eine funktionierende Seite. Das ist der code, den ich verwendet:

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

- und das ist der json-Datei (aus dem flot offiziellen exaples, um sicher zu sein, dass ist richtig formatiert)

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

nun werde ich zu Bett, aber morgen werde ich wir sollten versuchen, fügen Sie die label auf den Plan und versucht mit mehr als einer Reihe von Werten.

Sie könnten versuchen zu prüfen, was die $.plot liegt immer in den Daten-variable?
wie kann ich das überprüfen?
Welchen browser verwenden Sie? Wenn Sie IE verwenden Entwickler oder Firefox Firebug oder Chrome, Firebug Lite, das Sie tun können-Konsole.log(data); nach der getJSON-Aufruf 🙂
danke für die Antwort. Mit Chrome utility kann ich sehen, dass die json-Datei geladen il zu spät, während das Grundstück ist bereits angelegt. Ich schrieb einige details oben in der ersten Nachricht.

InformationsquelleAutor Nicolaesse | 2011-10-22

Ich diese zu generieren, die automatische Aktualisierung der Informationen der website für den Fortschritt des Projekts.

Meinem kleinen Beispiel mit mehr als einer Art von Diagramm: Linien und Balken.

Ich finde es einfacher zu verstehen, wenn ich ein Beispiel, so sind wir hier:

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

Und die Daten(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] ]
}

InformationsquelleAutor Mark Ross

2

Versuchen Sie dies:
```
$(function () {  
    var data;
    var plotarea = $("#placeholder");

    $.getJSON("1.json", function(json) {
       //succes - data loaded, now use plot:
       $.plot(plotarea , data);  
    });
});
```
Und in Ihrer JSON-Datei liegt ein Syntaxfehler (beginnend mit "[" und endet mit einem "}".
Sie könnten versuchen, diese:
```
{  label: "Values",  
    data:   [   
        [1, 50.026],
        [2, 50.028],
        [3, 50.029],
        [4, 50.026],
        [5, 50.025],
        [6, 50.016]
        ]
}
```
bis nicht funktioniert...ich habe aktualisiert die Dateien on-line, so können Sie versuchen, wenn Sie einen debugger. Ich habe etwas gefunden, was interessant sein könnte, aber ich kann völlig verstehen, das Skript people.iola.dk/olau/flot/examples/ajax.html und burnsforce.com/flot-format-data-flot-readable-json
Ich habe eine funktionierende version...check den post oben
$.plot(plotarea , json);

InformationsquelleAutor Marco Johannesen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.