Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

graph.js

By: a guest on Jun 15th, 2012  |  syntax: JavaScript  |  size: 2.99 KB  |  hits: 34  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /*
  2.  * JavaScript code for drawing FLOT graph. Still testing this!!!
  3.  */
  4.  
  5. $(function () {
  6.     var placeholder = $('#placeholder');
  7.     var options = {
  8.             series: { lines: { show: true }, shadowSize: 1 },
  9.             xaxis:  { ticks: 10},
  10.             xaxis:  { mode: 'time'},
  11.             yaxis:  {  ticks: 10 },
  12.             zoom:   { interactive: true },
  13.             pan:    { interactive: true },
  14.             grid:   { hoverable: true, clickable: true },
  15.             legend: { position: 'nw' }
  16.         };
  17.  
  18.     // hard-code color indices to prevent them from shifting as
  19.     // countries are turned on/off
  20.     var i = 0;
  21.     $.each(datasets, function(key, val) {
  22.         val.color = i;
  23.         ++i;
  24.     });
  25.    
  26.     // insert checkboxes in page
  27.     var choiceContainer = $("#choices");
  28.     $.each(datasets, function(key, val) {
  29.         choiceContainer.append('<br/><input type="checkbox" name="'+key+'"checked="checked" id="id'+key+'">'
  30.                               +'<label for="id'+key+'">'+val.label+'</label>');
  31.     });
  32.     choiceContainer.find("input").click(plotAccordingToChoices);
  33.  
  34.     function plotAccordingToChoices() {
  35.         var data = [];
  36.  
  37.         choiceContainer.find("input:checked").each(function () {
  38.             var key = $(this).attr("name");
  39.             if (key && datasets[key])
  40.                 data.push(datasets[key]);
  41.         });
  42.  
  43.         if (data.length > 0)
  44.             $.plot($("#placeholder"), data, options);
  45.     }
  46.        
  47.     function showTooltip(x, y, contents) {
  48.         $('<div id="tooltip">' + contents + '</div>').css( {
  49.             position: 'absolute',
  50.             display: 'none',
  51.             top: y + 2,
  52.             left: x + 5,
  53.             border: '2px solid #fcc',
  54.             padding: '0px',
  55.             'background-color': '#fee',
  56.             opacity: 0.70
  57.         }).appendTo("body").fadeIn(500);
  58.     }
  59.  
  60.     var previousPoint = null;
  61.     var click = 0;
  62.     $("#placeholder").bind( "plotclick", function (event, pos, item) {
  63.         $("#x").text(pos.x.toFixed(2));
  64.         $("#y").text(pos.y.toFixed(2));
  65.         if (item) {
  66.             $("#tooltip").remove();
  67.             var x = item.datapoint[0].toFixed(2),
  68.             y = item.datapoint[1].toFixed(2);
  69.             if (previousPoint === null) {
  70.                 previousPoint = item;
  71.                 showTooltip(item.pageX, item.pageY,
  72.                 item.series.label + ": " + x + "= " + y);
  73.                 click = 1;
  74.             }
  75.             else if (previousPoint.datapoint[0] != item.datapoint[0]||
  76.                      previousPoint.datapoint[1] != item.datapoint[1]||
  77.                     click===0) {
  78.                 showTooltip(item.pageX, item.pageY,
  79.                 item.series.label + ": " + x + "= " + y);
  80.                 click = 1;
  81.                 previousPoint = item;
  82.             }  
  83.             else
  84.                 click=0;
  85.         }
  86.     });
  87.  
  88.     plotAccordingToChoices();
  89.     $('#whole').click(function () {
  90.     plotAccordingToChoices();
  91.     });
  92. });
create a new version of this paste RAW Paste Data