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"));
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
}
});
})();