Flot plothover not working in bottom right corner

Question

Showing my graph works fine but the mouse over on dots is only on the top 30% and left 10% side of graph, am I doing something wrong?

This code is fired by multiple buttons and updates, am I updating it the wrong way?

 function loadGraph(myArr, percent) { var graphData = [{ color: '#00FF00', data: [] }, { color: '#FF0000', data: [] }, { color: '#FFFF00', data: [] }]; var avgPrices = []; for (var i = 0; i < 10; i++) { var date = new Date(myArr.items[myArr.items.length - (i + 1)].date).getTime(); if (lines.min == true) { graphData[0].data[i] = [date, myArr.items[myArr.items.length - (i + 1)].lowPrice] }; if (lines.max == true) { graphData[1].data[i] = [date, myArr.items[myArr.items.length - (i + 1)].highPrice] }; if (lines.avg == true || percent) { graphData[2].data[i] = [date, myArr.items[myArr.items.length - (i + 1)].avgPrice] }; avgPrices.push(myArr.items[myArr.items.length - (i + 1)].avgPrice); } var plotBox = $('#graph-lines'); var plot = $.plot(plotBox, graphData, { series: { points: { show: true, radius: 5 }, lines: { show: true }, shadowSize: 0 }, grid: { color: '#00cece', borderColor: 'transparent', borderWidth: 0, hoverable: true }, xaxis: { mode: "time" }, yaxis: { tickFormatter: function(val, axis) { if (percent) { return (val * 100).toFixed(1) + '%' } else { return val.toFixed(2) } }, } }); var previousPoint = null; plotBox.bind('plothover', function(event, pos, item) { console.log('hovering!'); if (item) { if (previousPoint !== item.dataIndex) { previousPoint = item.dataIndex; $('#tooltip').remove(); var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; var date = new Date(item.datapoint[0]); var x = monthNames[date.getMonth()] + " " + date.getDate() + " - " + date.getFullYear(), y = item.datapoint[1]; showTooltip(item.pageX, item.pageY, y + ' Interstellar Kredit (ISK) at ' + x); } } else { $('#tooltip').remove(); previousPoint = null; } }); }; 

Answer 1

Have you checked the debugger to see if you get an error before you get the the code that shows the tooltip? I don't see how the browser gets past the for loop; it looks to me like you should be getting index out of bounds errors.

Try changing your if-statements in the following way for all three if-statements.

if (lines.avg == true || percent) {
            graphData[2].data.push([date, myArr.items[myArr.items.length - (i + 1)].avgPrice]);
        }

In the code above, I have moved the semicolon inside the then block. Also, I am pushing the point onto the array instead of accessing the indice(the array looks to be empty where you are trying to access it).