Dati esterni da tracciare con jQuery Flot

Sto cercando di utilizzare il plug-in flot per tracciare alcuni dati che vengono scritti in un file JSON. Non sembra così difficile da fare ma non riesco a trovare qualcosa che funzioni ... puoi aiutarmi per favore.Dati esterni da tracciare con jQuery Flot

Questo è il cosa ho scritto:

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

mentre il file 1.json coitain tutti i seguenti:

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

@MarcoJohannesen Anche se scrivo "console. log (dati) "dopo la chiamata JSON, lo script continua a non funzionare e nessun messaggio appare sullo schermo. Usando l'utilità di Chrome (non ricordo il nome ;-)) Posso vedere che il file hte 1.json è stato caricato correttamente. Penso che il problema sia che prima di tutto viene eseguito lo script e successivamente viene caricato il file 1.json. Ho fatto un po 'di modifica sulla pagina. Si può vedere a demo on this page Questa è la pagina di codice "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>

e questo è il 1.json (ho aggiunto le parentesi quadre)

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

Ho sicuramente trovato un modo per creare una pagina di lavoro. Questo è il codice che ho usato:

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

e questo è il file JSON (dati tratti dal exaples ufficiali Flot per essere sicuri che sia formattato correttamente)

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

ora vado a letto, ma domani dovremmo provare ad aggiungere l'etichetta alla trama e provare con più di una serie di valori.

fonte

2011-10-22 Nicolaesse

Potresti provare a controllare ciò che il $ .plot sta entrando nella variabile dei dati? –

@Marco, come posso verificarlo? – Nicolaesse

Che browser stai usando? Se si utilizza IE Developer o Firefox Firebug o Chrome Firebug Lite, è possibile eseguire console.log (dati); dopo la chiamata getJSON :) –

io lo uso per generare sito automatica informazioni aggiornate per il progresso del progetto

mio piccolo esempio utilizzando più di un tipo di schema:.. la linea e la barra

Trovo più facile da capire se ho un esempio di esecuzione, quindi eccoci qui:

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

E i dati (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] ] 
}

fonte

2012-09-18 14:34:25

Prova questo:

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

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

E nel file JSON c'è un errore di sintassi (a partire da una "[" e termina con un "}" Potrebbe provare questo:.

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

fonte

2011-11-07 19:36:43

fino a non funzionare ... Ho aggiornato i file on-line in modo da poter provare se si dispone di un debugger. Ho trovato qualcosa che potrebbe essere interessante ma posso capire completamente lo script http://people.iola.dk/olau/flot/examples/ajax.html e http://burnsforce.com/flot-format-data- flot-readable-json/ – Nicolaesse

Ho creato una versione funzionante ... controlla il post sopra – Nicolaesse

$ .plot (plotarea, json); –

Dati esterni da tracciare con jQuery Flot

risposta

Problemi correlati