jQuery flot: सभी डेटा को प्रदर्शित करने और Y अक्ष

अभिवादन मैं एक jQuery नौसिखिया और एक मुद्दा है जो सरकारी flot उदाहरण से "मोड़-series.html" का एक संस्करण का उपयोग करता है, 1- ठीक करने के लिए मैं सोच रहा हूँ की कोशिश कर रहा हूँ मंडराना मैं अपने डेटासेट से सभी को प्रदर्शित करने के लिए चयनित प्रदर्शन से इसे कैसे हटा सकता हूं। 2- मेरे विकल्पों को कैसे बदलें ताकि जब माउस बिंदु पर हो, तो यह वाई अक्ष का मान प्रदर्शित करता है?jQuery flot: सभी डेटा को प्रदर्शित करने और Y अक्ष

//My data instance: 
var datasets = { 
     "1st input": { 
      label: "1st input", 
      data: [ 
      [1.250208e+12, 1339], 
      [1.2502944e+12, 1316],  
      [1.2503808e+12, 1379], 
      [1.2504672e+12, 1223], 
      ] 
     }, 
     "2nd input": { 
      label: "2nd input", 
      data: [ 
      [1.2503808e+12, 1324], 

      ] 
     }, 
    }; 


//old one, instead of displaying the selected ones from choiceContainer, I want to display all. 
    function showWhole() { 
     var data = []; 
     choiceContainer.find("option:selected").each(function() { 
      var key = $(this).attr("name"); 
      if (key && datasets[key]) 
       data.push(datasets[key]); 
     }); 

     if (data.length > 0) 
      $.plot($("#placeholder"), data, { 
       yaxis: {}, 
       xaxis: { mode: "time",minTickSize: [1, "day"],timeformat: "%d/%m/%y"},"lines": {"show": "true"},"points": {"show": "true"},clickable:true,hoverable: true 
      }); 
    }

सादर

स्रोत

2009-08-17 Anonymous

मैं FLOT वेबसाइट से मोड़-series.html उदाहरण ले लिया और कुछ परिवर्तन किए। निम्न को एक नई HTML फ़ाइल में कॉपी और पेस्ट करें और इसे चलाएं - फ़ायरफ़ॉक्स में काम करता है, आईई में परीक्षण नहीं किया जाता है।

 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Flot Examples</title> 
    <link href="http://people.iola.dk/olau/flot/examples/layout.css" rel="stylesheet" type="text/css"></link> 
    <!--[if IE]><script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/excanvas.pack.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script> 
    <style> #tooltip { font-size:8pt; } </style> 
</head> 
    <body> 
    <h1>Flot Examples</h1> 

    <div id="placeholder" style="width:600px;height:300px;"></div> 

    <p>Here is an example with real data: military budgets for 
     various countries in constant (2005) million US dollars (source: <a href="http://www.sipri.org/">SIPRI</a>).</p> 


<script id="source" language="javascript" type="text/javascript"> 
$(function() { 
    var datasets = { 
     "usa": { 
      label: "USA", 
      data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]] 
     },   
     "russia": { 
      label: "Russia", 
      data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]] 
     }, 
     "uk": { 
      label: "UK", 
      data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]] 
     }, 
     "germany": { 
      label: "Germany", 
      data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]] 
     }, 
    }; 


    // define an empty array 
    var data = []; 

    // use this existing loop... 
    var i = 0; 
    $.each(datasets, function(key, val) { 
     val.color = i; 
     ++i; 

     // ... and add this line - so the data array is populated (row by row) 
     data.push(datasets[key]); 
    }); 

    // plot the graph with the newly populated data array 
    $.plot($("#placeholder"), data, { 
       yaxis: { min: 0 }, 
       xaxis: { tickDecimals: 0 }, 
       grid: { hoverable: true, clickable: true }, 
       points: { show: true }, 
       lines: { show: true }, 
      }); 


    // add some hovering logic to each point... 
    var previousPoint = null; 
    $("#placeholder").bind("plothover", function (event, pos, item) { 
     $("#x").text(pos.x.toFixed(2)); 
     $("#y").text(pos.y.toFixed(2)); 

      if (item) { 
       if (previousPoint != item.datapoint) { 
        previousPoint = item.datapoint; 
        $("#tooltip").remove(); 
        var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); 
        showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y); 
       } 
      } 
      else { 
       $("#tooltip").remove(); 
       previousPoint = null;    
      } 

    }); 

    // show the tooltip 
    function showTooltip(x, y, contents) { 
     $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y - 35, 
      left: x + 5, 
      border: '1px solid #fdd', 
      padding: '2px', 
      'background-color': '#fee', 
      opacity: 0.80 
     }).appendTo("body").fadeIn(200); 
    } 

}); 
</script> 

</body> 
</html>

स्रोत

2009-08-17 13:51:57 robnardo

वाह, मैं आपकी मदद के लिए बहुत अच्छा हूं, एक आकर्षण की तरह काम करता है! चीयर्स –

अरे पालना, कोई समस्या नहीं है – robnardo

jQuery flot: सभी डेटा को प्रदर्शित करने और Y अक्ष

उत्तर

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