Export to GitHub

flotr - issue #199

Mouse tracking on a facebook canvas page


Posted on Aug 16, 2011 by Happy Kangaroo

What steps will reproduce the problem? 1.render flotr in a facebook canvas page using this script:

// note that this is an array of timestamps in milliseconds with stock closing prices for that day. I belive it is only necessary to include a timestamp price pairing for some date within the range and also the current date to observe the error. var closingPricesPlot = [[1313366400000.0, 557.23000000000002], [1313107200000.0, 563.76999999999998], [1313020800000.0, 562.13], [1312934400000.0, 549.00999999999999], [1312848000000.0, 573.40999999999997], [1312761600000.0, 546.01999999999998], [1312502400000.0, 579.03999999999996], [1312416000000.0, 577.51999999999998], [1312329600000.0, 601.16999999999996], [1312243200000.0, 592.39999999999998], [1312156800000.0, 606.76999999999998], [1311897600000.0, 603.69000000000005], [1311811200000.0, 610.94000000000005], [1311724800000.0, 607.22000000000003], [1311638400000.0, 622.51999999999998], [1311552000000.0, 618.98000000000002], [1311292800000.0, 618.23000000000002], [1311206400000.0, 606.99000000000001], [1311120000000.0, 595.35000000000002], [1311033600000.0, 602.54999999999995], [1310947200000.0, 594.94000000000005], [1310688000000.0, 597.62], [1310601600000.0, 528.94000000000005], [1310515200000.0, 538.25999999999999], [1310428800000.0, 534.00999999999999], [1310342400000.0, 527.27999999999997], [1310083200000.0, 531.99000000000001], [1309996800000.0, 546.60000000000002], [1309910400000.0, 535.36000000000001], [1309824000000.0, 532.44000000000005], [1309478400000.0, 521.02999999999997], [1309392000000.0, 506.38], [1309305600000.0, 497.56999999999999], [1309219200000.0, 493.64999999999998], [1309132800000.0, 482.80000000000001], [1308873600000.0, 474.88], [1308787200000.0, 480.22000000000003], [1308700800000.0, 487.0], [1308614400000.0, 493.0], [1308528000000.0, 484.57999999999998], [1308268800000.0, 485.01999999999998], [1308182400000.0, 500.37], [1308096000000.0, 502.94999999999999], [1308009600000.0, 508.37], [1307923200000.0, 504.73000000000002], [1307664000000.0, 509.5], [1307577600000.0, 516.73000000000002], [1307491200000.0, 519.16999999999996], [1307404800000.0, 519.02999999999997], [1307318400000.0, 521.05999999999995], [1307059200000.0, 523.08000000000004], [1306972800000.0, 528.05999999999995], [1306886400000.0, 525.60000000000002], [1306800000000.0, 529.01999999999998], [1306454400000.0, 520.89999999999998], [1306368000000.0, 518.13], [1306281600000.0, 519.66999999999996], [1306195200000.0, 518.25999999999999], [1306108800000.0, 518.38999999999999], [1305849600000.0, 524.02999999999997], [1305763200000.0, 531.25], [1305676800000.0, 529.80999999999995], [1305590400000.0, 530.46000000000004], [1305504000000.0, 518.41999999999996], [1305244800000.0, 529.54999999999995], [1305158400000.0, 535.04999999999995], [1305072000000.0, 535.45000000000005], [1304985600000.0, 542.65999999999997], [1304899200000.0, 537.67999999999995], [1304640000000.0, 535.29999999999995], [1304553600000.0, 534.26999999999998], [1304467200000.0, 535.78999999999996], [1304380800000.0, 533.88999999999999], [1304294400000.0, 538.55999999999995], [1304035200000.0, 544.10000000000002], [1303948800000.0, 537.97000000000003], [1303862400000.0, 537.75999999999999], [1303776000000.0, 532.82000000000005], [1303689600000.0, 525.04999999999995], [1303344000000.0, 525.10000000000002], [1303257600000.0, 525.73000000000002], [1303171200000.0, 521.52999999999997], [1303084800000.0, 526.84000000000003], [1302825600000.0, 530.70000000000005], [1302739200000.0, 578.50999999999999], [1302652800000.0, 576.27999999999997], [1302566400000.0, 570.61000000000001], [1302480000000.0, 577.37], [1302220800000.0, 578.15999999999997], [1302134400000.0, 580.0], [1302048000000.0, 574.17999999999995], [1301961600000.0, 569.09000000000003], [1301875200000.0, 587.67999999999995], [1301616000000.0, 591.79999999999995], [1301529600000.0, 586.75999999999999], [1301443200000.0, 581.84000000000003], [1301356800000.0, 581.73000000000002], [1301270400000.0, 575.36000000000001], [1301011200000.0, 579.74000000000001], [1300924800000.0, 586.88999999999999], [1300838400000.0, 582.15999999999997], [1300752000000.0, 577.32000000000005], [1300665600000.0, 576.5], [1300406400000.0, 561.05999999999995], [1300320000000.0, 561.36000000000001], [1300233600000.0, 557.10000000000002], [1300147200000.0, 569.55999999999995], [1300060800000.0, 569.99000000000001], [1299801600000.0, 576.71000000000004], [1299715200000.0, 580.29999999999995], [1299628800000.0, 591.76999999999998], [1299542400000.0, 592.30999999999995], [1299456000000.0, 591.65999999999997], [1299196800000.0, 600.62], [1299110400000.0, 609.55999999999995], [1299024000000.0, 600.78999999999996], [1298937600000.0, 600.75999999999999], [1298851200000.0, 613.39999999999998], [1298592000000.0, 610.03999999999996], [1298505600000.0, 608.82000000000005], [1298419200000.0, 611.32000000000005], [1298332800000.0, 610.21000000000004], [1297987200000.0, 630.08000000000004], [1297900800000.0, 625.25999999999999], [1297814400000.0, 624.22000000000003], [1297728000000.0, 624.14999999999998], [1297641600000.0, 628.14999999999998], [1297382400000.0, 624.5], [1297296000000.0, 616.44000000000005], [1297209600000.0, 616.5], [1297123200000.0, 618.38], [1297036800000.0, 614.29999999999995], [1296777600000.0, 610.98000000000002], [1296691200000.0, 610.14999999999998], [1296604800000.0, 612.0], [1296518400000.0, 611.03999999999996], [1296432000000.0, 600.36000000000001], [1296172800000.0, 600.99000000000001], [1296086400000.0, 616.78999999999996], [1296000000000.0, 616.5], [1295913600000.0, 619.90999999999997], [1295827200000.0, 611.08000000000004], [1295568000000.0, 611.83000000000004], [1295481600000.0, 626.76999999999998], [1295395200000.0, 631.75], [1295308800000.0, 639.63], [1294963200000.0, 624.17999999999995], [1294876800000.0, 616.69000000000005], [1294790400000.0, 616.87], [1294704000000.0, 616.00999999999999], [1294617600000.0, 614.21000000000004], [1294358400000.0, 616.44000000000005], [1294272000000.0, 613.5], [1294185600000.0, 609.07000000000005], [1294099200000.0, 602.12], [1294012800000.0, 604.35000000000002], [1293753600000.0, 593.97000000000003], [1293667200000.0, 598.86000000000001], [1293580800000.0, 601.0], [1293494400000.0, 598.91999999999996], [1293408000000.0, 602.38], [1293062400000.0, 604.23000000000002], [1292976000000.0, 605.49000000000001], [1292889600000.0, 603.07000000000005], [1292803200000.0, 595.05999999999995], [1292544000000.0, 590.79999999999995], [1292457600000.0, 591.71000000000004], [1292371200000.0, 590.29999999999995], [1292284800000.0, 594.90999999999997], [1292198400000.0, 594.62], [1291939200000.0, 592.21000000000004], [1291852800000.0, 591.5], [1291766400000.0, 590.53999999999996], [1291680000000.0, 587.13999999999999], [1291593600000.0, 578.36000000000001], [1291334400000.0, 573.0], [1291248000000.0, 571.82000000000005], [1291161600000.0, 564.35000000000002], [1291075200000.0, 555.71000000000004], [1290988800000.0, 582.11000000000001], [1290729600000.0, 590.0], [1290556800000.0, 594.97000000000003], [1290470400000.0, 583.00999999999999], [1290384000000.0, 591.22000000000003], [1290124800000.0, 590.83000000000004], [1290038400000.0, 596.55999999999995], [1289952000000.0, 583.54999999999995], [1289865600000.0, 583.72000000000003], [1289779200000.0, 595.47000000000003], [1289520000000.0, 603.28999999999996], [1289433600000.0, 617.19000000000005], [1289347200000.0, 622.88], [1289260800000.0, 624.82000000000005], [1289174400000.0, 626.76999999999998], [1288915200000.0, 625.08000000000004], [1288828800000.0, 624.26999999999998], [1288742400000.0, 620.17999999999995], [1288656000000.0, 615.60000000000002], [1288569600000.0, 615.0], [1288310400000.0, 613.70000000000005], [1288224000000.0, 618.58000000000004], [1288137600000.0, 616.47000000000003], [1288051200000.0, 618.60000000000002], [1287964800000.0, 616.5], [1287705600000.0, 612.52999999999997], [1287619200000.0, 611.99000000000001], [1287532800000.0, 607.98000000000002], [1287446400000.0, 607.83000000000004], [1287360000000.0, 617.71000000000004], [1287100800000.0, 601.45000000000005], [1287014400000.0, 540.92999999999995], [1286928000000.0, 543.29999999999995], [1286841600000.0, 541.38999999999999], [1286755200000.0, 538.84000000000003], [1286496000000.0, 536.35000000000002], [1286409600000.0, 530.00999999999999], [1286323200000.0, 534.35000000000002], [1286236800000.0, 538.23000000000002], [1286150400000.0, 522.35000000000002], [1285891200000.0, 525.62], [1285804800000.0, 525.78999999999996], [1285718400000.0, 527.69000000000005], [1285632000000.0, 527.16999999999996], [1285545600000.0, 530.40999999999997], [1285286400000.0, 527.28999999999996], [1285200000000.0, 513.48000000000002], [1285113600000.0, 516.0], [1285027200000.0, 513.46000000000004], [1284940800000.0, 508.27999999999997], [1284681600000.0, 490.14999999999998], [1284595200000.0, 481.06], [1284508800000.0, 480.63999999999999], [1284422400000.0, 480.43000000000001], [1284336000000.0, 482.26999999999998], [1284076800000.0, 476.13999999999999], [1283990400000.0, 476.18000000000001], [1283904000000.0, 470.57999999999998], [1283817600000.0, 464.39999999999998], [1283731200000.0, 470.30000000000001], [1283472000000.0, 470.30000000000001], [1283385600000.0, 463.18000000000001], [1283299200000.0, 460.33999999999997], [1283212800000.0, 450.01999999999998], [1283126400000.0, 452.69], [1282867200000.0, 458.82999999999998], [1282780800000.0, 450.98000000000002], [1282694400000.0, 454.62], [1282608000000.0, 451.38999999999999], [1282521600000.0, 464.06999999999999], [1282262400000.0, 462.01999999999998], [1282176000000.0, 467.97000000000003], [1282089600000.0, 482.14999999999998], [1282003200000.0, 490.51999999999998]]

// max date
var currentDate = new Date()
var currentDay = currentDate.getDate()
var currentMonth = currentDate.getMonth()
var currentYear = currentDate.getFullYear()

// min date
if (currentMonth <= 3) {
  oldestDay = currentDay
  oldestMonth = 12 + currentMonth - 3
  oldestYear = currentYear - 1
} else {
  oldestDay = currentDay
  oldestMonth = currentMonth - 3
  oldestYear = currentYear
}

maxDate = Date.UTC(currentYear,currentMonth,currentDay)
minDate = Date.UTC(oldestYear,oldestMonth,oldestDay)

document.observe('dom:loaded',function(){

    function xAxisTickFormatter(timestamp)
    {
      d = new Date()
      d.setTime(timestamp)
      month = d.getMonth()
      day = d.getDate()
      return month + "-" + day 
    }

    f = Flotr.draw(
      $('graph'), 
      [ {  data: closingPricesPlot, label: 'someSymbol'} ],
      {
        lines: {
          show:true
        },
        points: {
          show:true
        },
        legend: { 
          show: true, 
          position: 'se'
        },
        xaxis: {
          tickFormatter:xAxisTickFormatter,
          min: minDate,
          max: maxDate 
        },
        mouse: {
          track: true,
          relative: false,
          sensibility: 10
        }


      }
    );
  });
  1. try to hover over a point to get the coordinates
  2. notice that only the last point displayed at the edge of the graph

What is the expected output? What do you see instead?

I expect to see the coordinate values (timestamp,price) displayed, but instead it is not present when looking at any point within the range, and only present when I mouse over an area of the last point which is outside of the graph container (i.e. the circle extends beyond the edge of the graph)

What version of the product are you using? On what operating system? I'm using Flotr 0.2.0 alpha on Debian Linux in Google Chrome version 13.0.782.15 dev

Please provide any additional information below. This can be viewed at http://apps.facebook.com/stock-decider then entering symbol name "goog" and period value "14". Note, though it requires authentication it does not use any data from your account. It is built from the Run With Friends example provided by facebook.

Attached is the django template which renders the graph.

Attachments

Comment #1

Posted on Aug 17, 2011 by Happy Kangaroo

This bug is fixed in svn checkout

Status: New

Labels:
Type-Defect Priority-Medium