Datos externos para trazar con jQuery Flot

Estoy tratando de usar el plugin de flot para trazar algunos datos que se escriben en un archivo JSON. No parece tan difícil de hacer pero no puedo encontrar algo que funcione ... ¿pueden ayudarme por favor?Datos externos para trazar con jQuery Flot

Esa es la que he escrito:

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

mientras que el archivo 1.json coitain todo lo siguiente:

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

@MarcoJohannesen Incluso si escribo "consola. log (data) "después de la llamada JSON, el script aún no ha funcionado y no aparece ningún mensaje en la pantalla. Usando la utilidad Chrome (no recuerdo el nombre ;-)) Puedo ver que el archivo 1.json se ha cargado correctamente. Creo que el problema es que primero se ejecuta el script y luego se carga el archivo 1.json. He hecho una pequeña edición en la página. Se puede ver a demo on this page Esta es la página de códigos "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>

y esta es la 1.json (He añadido los corchetes)

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

Definitivamente encontré la manera de hacer una página de trabajo. Ese es el código que he utilizado:

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

y eso es el archivo JSON (tomado de los exaples oficiales Flot para asegurarse de que tiene el formato correcto)

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

ahora voy a la cama pero mañana deberíamos tratar de agregar la etiqueta a la gráfica e intentar con más de una serie de valores.

Fuente

2011-10-22 Nicolaesse

podría usted trata de leer lo que el $ .plot está entrando en la variable de datos? –

@Marco, ¿cómo puedo verificar esto? – Nicolaesse

¿Qué navegador estás usando? Si usa IE Developer o Firefox Firebug o Chrome Firebug Lite, puede hacer console.log (data); después de la llamada getJSON :) –

Utilizo esto para generar el sitio web de información actualizada automáticamente para el progreso del proyecto

Mi pequeño ejemplo usando más de un tipo de diagrama: línea y barra

Me resulta más fácil de entender si tengo un ejemplo en funcionamiento, así que aquí estamos:

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

Y los datos (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] ] 
}

Fuente

2012-09-18 14:34:25

Prueba esto:

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

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

Y en su archivo JSON hay un error de sintaxis (comenzando con un "[" y terminando con un "}" Podría intentar esto:.

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

Fuente

2011-11-07 19:36:43

hasta que no funcione ... He actualizado los archivos en línea para que pueda probar si tiene un depurador. He encontrado algo que podría ser interesante, pero puedo entender completamente el guión http://people.iola.dk/olau/flot/examples/ajax.html y http://burnsforce.com/flot-format-data- flot-readdable-json/ – Nicolaesse

He creado una versión funcional ... verifique la publicación anterior – Nicolaesse

$ .plot (plotarea, json); –

Datos externos para trazar con jQuery Flot

Respuesta

Cuestiones relacionadas