How can I reposition tooltips used to display information about highlighted points after zooming in on a flot graph?

user3735633

Currently, I have a system that creates lockable points by using the flot plotclick event and the item that is created by the event. I store each item in an array initialized like so:

for (var i = 1; i < 5; i++){
   lockedPoints["Series " + i] = [];
}

The graph supports three locked points per series. I am using jquery.flot.selection.js to work as a zooming feature. I modify the data when zooming so that the amount of visible points is infinite.

This is the function used to determine the data points to graph:

function createData(kElement, a0Element){
   var data = [];
   var k;
   var a0;
   var result;

   k = kElement.value;
   a0 = a0Element.value;

   if (document.getElementById("logCheck").value == "On"){
      logarithmic = true;
   }
   else{
      logarithmic = false;
   }

   for (var i = minX; i <= maxX; i += (maxX - minX) / 1000){
      result = a0 * Math.pow(Math.E, (-k * i));

      if (logarithmic){
         result = Math.log(result);
         data.push([i, result]);
      }
      else{
         data.push([i, result]);
      }

      if (result > maxValue){
         maxValue = result;
      }

      if (result < minValue && result > -400){
         minValue = result;
      }
   }

   return data;
}

I use this function to perform the zoom effect:

$(this).bind("plotselected", function(event, ranges){
  if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
     ranges.xaxis.to = ranges.xaxis.from + 0.00001;
  }

  if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
     ranges.yaxis.to = ranges.yaxis.from + 0.00001;
  }

  minX = ranges.xaxis.from;
  maxX = ranges.xaxis.to;

  dataSets = [];
  dataSets = chart.getData();

  var count = 0;

  for (var i = 0; i < 4; i++){
     var k = document.getElementById("kValue" + (i + 1));
     var a0 = document.getElementById("a0Value" + (i + 1));
     var onOff = document.getElementById("switch" + (i + 1));

     if (onOff.name == "on"){
        dataSets[count].data.push(createData(k, a0));
        count++;
     }
  }

  if (ranges.yaxis.from > ranges.yaxis.to){
     maxValue = ranges.yaxis.from;
     minValue = ranges.yaxis.to;
  }
  else{
     maxValue = ranges.yaxis.to;
     minValue = ranges.yaxis.from;
  }

  options = chart.getOptions();
  options.xaxes[0].min = minX;
  options.xaxes[0].max = maxX;
  options.yaxes[0].min = minValue;
  options.yaxes[0].max = maxValue;


  if ($("#xAxisLabel").html() == "time (hours)"){                 //adjust tickFormatter for different labels
     options.xaxis.tickFormatter = function (value) {
        return (value / 3600).toFixed(2);
     };
  }
  else if ($("#xAxisLabel").html() == "time (minutes)"){
     options.xaxis.tickFormatter = function (value) {
        return (value / 60).toFixed(2);
     };
  }
  else{
     options.xaxis.tickFormatter = function (value) {
        return (value).toFixed(2);
     };
  }

  chart.setData(dataSets);
  chart.setupGrid();
  chart.draw();
  chart.clearSelection(true);
  relocateLockedTips();             //not functional. Goal is to make a function that can move tooltips accordingly
});

I append tooltips to the document body with the id of "lockedPoint" + item.dataIndex, and I allow the user to remove a locked point if the plotclick event fits these qualifications:

I check all values of i up to the amount of locked points in each series.

Math.abs(lockedPoints[item.series.label][i].pageX - item.pageX) < 10
    && Math.abs(lockedPoints[item.series.label][i].pageY - item.pageY) < 10

Is there a way that I can update my array of lockedPoints after zooming, so I can reposition my tooltips using pageX and pageY? The pageX and pageY both change when I redraw the plot, so I was wondering if there is some sort of method to determine if a point is highlighted (this would allow me to "relock" the points, storing new pageX and new pageY). I looked into the jquery.flot.js code, and I see they store highlight variables in an array, but the highlights stored are not the same type of object returned by a plotclick event.

Before zooming:

Pre-zoom

After zooming:

Post-zoom

Notice how the tooltip remains in place after zoom.

Any help on this matter would be greatly appreciated. Thanks!

Raidri supports Monica

You can do something like this:

function relocateLockedTips(dataSets) {

    // get coordinates from graph, replace "graph" with your id
    var graphX = $('#graph').offset().left;
    var graphY = $('#graph').offset().top;

    // loop over all data series
    for (var i = 0; i < lockedPoints.length; i++) {

        // loop over locked points for this series
        for (var j = lockedPoints[i].length -1; j >= 0; j--) {
            var point = lockedPoints[i][j];

            // if point is out of zoom range, remove it
            if (point.datapoint[0] < minX ||
                point.datapoint[0] > maxX ||
                point.datapoint[1] < minValue ||
                point.datapoint[1] > maxValue) {

                $('#lockedPoint' + point.dataIndex).remove();
                lockedPoints[i].splice(j);
            }
            else {
                // move tooltip to new coordinates
                var newCoords = {
                    left: graphX + dataSets[i].xaxis.p2c(point.datapoint[0]),
                    top:  graphY + dataSets[i].yaxis.p2c(point.datapoint[1])
                };
                $('#lockedPoint' + point.dataIndex).offset(newCoords);
            }
        }
    }
}

PS: Shouldn't the tooltip id also include the seriesIndex? As it is now the tooltip for a point from another series with the same dataIndex could overwrite an existing tooltip.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How can I reposition tooltips used to display information about highlighted points after zooming in on a flot graph?

From Dev

How can I plot only points (not lines) with flot?

From Dev

How can I modify the color used for Flot zoom selection?

From Dev

How can I reposition this dialog?

From Dev

How can I reposition a partition?

From Dev

Flot tooltips appear on line graph but not bar chart

From Dev

Flot tooltips appear on line graph but not bar chart

From Dev

ASP.NET.MVC 5 How can i display information about who created an element?

From Dev

Attaching contextMenu to flot graph points

From Dev

ArangoDB, How can I display graph?

From Dev

ArangoDB, How can I display graph?

From Dev

Graph display issue using flot

From Dev

how to display information about the error?

From Dev

How can I catch all tooltips from my application & display it in Status bar in WinForms

From Dev

How can I detect whether a UIWebView is zooming?

From Dev

How can I show the plot points in Oxyplot for a line Graph?

From Dev

How do I put a box around my Flot graph?

From Dev

How can I extract information about SSL encryption on a particular domain

From Dev

How can I log information about global variables whenever these are created?

From Dev

How can I get the information about an individual IM in the Slack API?

From Dev

How can I log information about global variables whenever these are created?

From Dev

How can I find out information about a service?

From Dev

How can I create a view with information about the next or previous record?

From Dev

How can I create tooltips on tabs?

From Dev

How can I graph side-by-side (multiple series) bar graphs within a category using flot's categories plugin?

From Dev

How can I reposition an ImageView without losing Auto Layout?

From Dev

Plone/form.SchemaForm - How can I reposition a button in a SchemaForm?

From Dev

Plone/form.SchemaForm - How can I reposition a button in a SchemaForm?

From Dev

How can I find sum of highlighted cells?

Related Related

  1. 1

    How can I reposition tooltips used to display information about highlighted points after zooming in on a flot graph?

  2. 2

    How can I plot only points (not lines) with flot?

  3. 3

    How can I modify the color used for Flot zoom selection?

  4. 4

    How can I reposition this dialog?

  5. 5

    How can I reposition a partition?

  6. 6

    Flot tooltips appear on line graph but not bar chart

  7. 7

    Flot tooltips appear on line graph but not bar chart

  8. 8

    ASP.NET.MVC 5 How can i display information about who created an element?

  9. 9

    Attaching contextMenu to flot graph points

  10. 10

    ArangoDB, How can I display graph?

  11. 11

    ArangoDB, How can I display graph?

  12. 12

    Graph display issue using flot

  13. 13

    how to display information about the error?

  14. 14

    How can I catch all tooltips from my application & display it in Status bar in WinForms

  15. 15

    How can I detect whether a UIWebView is zooming?

  16. 16

    How can I show the plot points in Oxyplot for a line Graph?

  17. 17

    How do I put a box around my Flot graph?

  18. 18

    How can I extract information about SSL encryption on a particular domain

  19. 19

    How can I log information about global variables whenever these are created?

  20. 20

    How can I get the information about an individual IM in the Slack API?

  21. 21

    How can I log information about global variables whenever these are created?

  22. 22

    How can I find out information about a service?

  23. 23

    How can I create a view with information about the next or previous record?

  24. 24

    How can I create tooltips on tabs?

  25. 25

    How can I graph side-by-side (multiple series) bar graphs within a category using flot's categories plugin?

  26. 26

    How can I reposition an ImageView without losing Auto Layout?

  27. 27

    Plone/form.SchemaForm - How can I reposition a button in a SchemaForm?

  28. 28

    Plone/form.SchemaForm - How can I reposition a button in a SchemaForm?

  29. 29

    How can I find sum of highlighted cells?

HotTag

Archive