javascriptflotr2

What is "editor-render-0" in flotr


I am seeing a flotr example where (document.getElementById("editor-render-0") is used at the end phase of the coding. I am not getting why "editor-render-0" is used ans what is it. Please explain this it will helps me to understand the whole coding of the flotr.

This is a function where "editor-render-0" is used-

(function basic(container) {

  var
    d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
    d2 = [],                                // Second data series
    i, graph;

  // Generate first data set
  for (i = 0; i < 14; i += 0.5) {
    d2.push([i, Math.sin(i)]);
  }

  // Draw Graph
  graph = Flotr.draw(container, [ d1, d2 ], {
    xaxis: {
      minorTickFreq: 4
    }, 
    grid: {
      minorVerticalLines: true
    }
  });
})(document.getElementById("editor-render-0"));

Solution

  • This isn't really anything specific to flotr. This is what's called an "Immediately Executing Function" or "Immediately Invoked Function Expression" (IIFE).

    There are several reasons to use IIFEs:

    The first is that any variables defined inside the function (in this case "d1", "d2", "i", and "graph"). This keeps those variables from polluting the global scope.

    The second reason/benefit is encapsulation of external variables. When the function is invoked, you're passing in the result of document.getElementById("editor-render-0") (presumably a div with id "editor-render-0").

    Instead, they could have written this:

    var
      container = document.getElementById("editor-render-0");
      d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
      d2 = [],                                // Second data series
      i, graph;
    
    // Generate first data set
    for (i = 0; i < 14; i += 0.5) {
      d2.push([i, Math.sin(i)]);
    }
    
    // Draw Graph
    graph = Flotr.draw(container, [ d1, d2 ], {
      xaxis: {
        minorTickFreq: 4
      }, 
      grid: {
        minorVerticalLines: true
      }
    });
    

    This is almost equivalent to the original example, except that in this code sample the "container", "d1", "d2", "i", and "graph" variables would be defined on the global scope.

    This is a code snippet that would be exactly equivalent in behavior.

    (function() {
      var
        container = document.getElementById("editor-render-0");
        d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
        d2 = [],                                // Second data series
        i, graph;
    
      // Generate first data set
      for (i = 0; i < 14; i += 0.5) {
        d2.push([i, Math.sin(i)]);
      }
    
      // Draw Graph
      graph = Flotr.draw(container, [ d1, d2 ], {
        xaxis: {
          minorTickFreq: 4
        }, 
        grid: {
          minorVerticalLines: true
        }
      });
    })();