jQuery फ़्लॉट

के साथ साजिश करने के लिए बाहरी डेटा मैं JSON फ़ाइल में लिखे गए कुछ डेटा को साजिश करने के लिए फ़्लोट प्लग-इन का उपयोग करने का प्रयास कर रहा हूं। ऐसा करना मुश्किल नहीं लगता है लेकिन मुझे कुछ ऐसा काम नहीं मिल रहा है ... क्या आप कृपया मेरी मदद कर सकते हैं।jQuery फ़्लॉट

पेज मैंने लिखा गया है कि:

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

जबकि निम्न में से सभी coitain 1.json फ़ाइल:

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

@MarcoJohannesen यहां तक कि अगर मैं लिखना "कंसोल। लॉग (डेटा) "JSON कॉल के बाद स्क्रिप्ट अभी भी काम नहीं करती है और स्क्रीन पर कोई संदेश दिखाई नहीं देता है। क्रोम उपयोगिता का उपयोग करना (मुझे नाम याद नहीं है ;-)) मैं देख सकता हूं कि hte फ़ाइल 1.json सही ढंग से लोड किया गया है। मुझे लगता है कि समस्या यह है कि सभी स्क्रिप्ट का पहला निष्पादित किया जाता है और उसके बाद फ़ाइल 1.json लोड हो जाती है। मैंने पेज पर थोड़ा संपादन किया है। आप a demo on this 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 फ़ाइल (सुनिश्चित करने के लिए flot आधिकारिक exaples से लिया है कि सही स्वरूप में)

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

अब

मैं बिस्तर लेकिन कल मैं करने जा रहा हूँ है हमें साजिश में लेबल जोड़ने और मूल्यों की एक से अधिक श्रृंखला के साथ प्रयास करने का प्रयास करना चाहिए।

स्रोत

2011-10-22 Nicolaesse

आप क्या जाँच करने का प्रयास किया जा सका डेटा वैरिएबल में $ .plot हो रहा है? –

@ मार्को, मैं इसे कैसे देख सकता हूं? – Nicolaesse

आप किस ब्राउज़र का उपयोग कर रहे हैं? यदि आप IE डेवलपर या फ़ायरफ़ॉक्स फ़ायरबग या क्रोम फ़ायरबग लाइट का उपयोग करते हैं, तो आप console.log (डेटा) कर सकते हैं; getJSON कॉल के बाद :) –

मैं इस परियोजना प्रगति के लिए स्वत: अद्यतन जानकारी वेबसाइट उत्पन्न करने के लिए उपयोग करें

मेरे छोटा सा उदाहरण आरेख के एक से अधिक प्रकार का उपयोग:।। रेखा और बार

मैं यह आसान अगर मैं एक चल उदाहरण है समझने के लिए मिल जाए, तो यहाँ हम कर रहे:

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

स्रोत

2012-09-18 14:34:25

इस प्रयास करें:

$(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] 
     ] 
}

स्रोत

2011-11-07 19:36:43

काम नहीं कर रहा है ... मैंने ऑनलाइन फाइलों को अपडेट किया है ताकि आप डीबगर होने पर कोशिश कर सकें। मुझे कुछ ऐसा मिल गया है जो दिलचस्प हो सकता है लेकिन मैं पूरी तरह से स्क्रिप्ट को समझ सकता हूं http://people.iola.dk/olau/flot/examples/ajax.html और http://burnsforce.com/flot-format-data- फ्लोट-पठनीय-जेसन/ – Nicolaesse

मैंने एक वर्किंग वर्जन बनाया है ... – Nicolaesse

$ .plot (plotarea, json) से ऊपर की पोस्ट की जांच करें; –

उत्तर

संबंधित मुद्दे