added docs, removed logs, added extra comments.

HISTORY.md

@@ -11,6 +11,7 @@ http://visjs.org
 
 - Added visible property to the groups.
 - Added getLegend() method.
+- Added isGroupVisible() method.
 
 ### Timeline
 

docs/graph2d.html

@@ -713,6 +713,13 @@ Graph2d.clear({options: true}); // clear options only
         </td>
     </tr>
 
+    <tr>
+        <td>isGroupVisible(groupId)</td>
+        <td>Boolean</td>
+        <td>This checks if the visible option of the supplied group (by ID) is true or false.
+        </td>
+    </tr>
+
     <tr>
         <td>setGroups(groups)</td>
         <td>none</td>

examples/graph2d/09_external_legend.html

@@ -290,54 +290,77 @@
     var graph2d = new vis.Graph2d(container, items, options, groups);
 
 
-function populateExternalLegend() {
-    var groupsData = groups.get();
-    var legendDiv = document.getElementById("Legend");
-    legendDiv.innerHTML = "";
-
-    for (var i = 0; i < groupsData.length; i++) {
-        var containerDiv = document.createElement("div");
-        var iconDiv = document.createElement("div");
-        var descriptionDiv = document.createElement("div");
-
-        containerDiv.className = 'legendElementContainer';
-        containerDiv.id = groupsData[i].id + "_legendContainer"
-        iconDiv.className = "iconContainer";
-        descriptionDiv.className = "descriptionContainer";
-
-        var legend = graph2d.getLegend(groupsData[i].id,30,30);
-        legend.icon.setAttributeNS(null, "class", "legendIcon");
-        iconDiv.appendChild(legend.icon);
-        descriptionDiv.innerHTML = legend.label;
-        console.log(legend)
-        if (legend.orientation == 'left') {
-            descriptionDiv.style.textAlign = "left";
-            containerDiv.appendChild(iconDiv);
-            containerDiv.appendChild(descriptionDiv);
-        }
-        else {
-            descriptionDiv.style.textAlign = "right";
-            containerDiv.appendChild(descriptionDiv);
-            containerDiv.appendChild(iconDiv);
+    /**
+     * this function fills the external legend with content using the getLegend() function.
+     */
+    function populateExternalLegend() {
+        var groupsData = groups.get();
+        var legendDiv = document.getElementById("Legend");
+        legendDiv.innerHTML = "";
+
+        // get for all groups:
+        for (var i = 0; i < groupsData.length; i++) {
+            // create divs
+            var containerDiv = document.createElement("div");
+            var iconDiv = document.createElement("div");
+            var descriptionDiv = document.createElement("div");
+
+            // give divs classes and Ids where necessary
+            containerDiv.className = 'legendElementContainer';
+            containerDiv.id = groupsData[i].id + "_legendContainer"
+            iconDiv.className = "iconContainer";
+            descriptionDiv.className = "descriptionContainer";
+
+            // get the legend for this group.
+            var legend = graph2d.getLegend(groupsData[i].id,30,30);
+
+            // append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
+            // icons with the same classes if they are using the default ones.
+            legend.icon.setAttributeNS(null, "class", "legendIcon");
+
+            // append the legend to the corresponding divs
+            iconDiv.appendChild(legend.icon);
+            descriptionDiv.innerHTML = legend.label;
+
+            // determine the order for left and right orientation
+            if (legend.orientation == 'left') {
+                descriptionDiv.style.textAlign = "left";
+                containerDiv.appendChild(iconDiv);
+                containerDiv.appendChild(descriptionDiv);
+            }
+            else {
+                descriptionDiv.style.textAlign = "right";
+                containerDiv.appendChild(descriptionDiv);
+                containerDiv.appendChild(iconDiv);
+            }
+
+            // append to the legend container div
+            legendDiv.appendChild(containerDiv);
+
+            // bind click event to this legend element.
+            containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
         }
-        legendDiv.appendChild(containerDiv);
-        containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
     }
-}
 
-function toggleGraph(groupId) {
-    var container = document.getElementById(groupId + "_legendContainer")
-    if (graph2d.isGroupVisible(groupId) == true) {
-        groups.update({id:groupId, visible:false});
-        container.className = container.className + " hidden";
-    }
-    else {
-        groups.update({id:groupId, visible:true});
-        container.className = container.className.replace("hidden","");
+    /**
+     * This function switchs the visible option of the selected group on an off.
+     * @param groupId
+     */
+    function toggleGraph(groupId) {
+        // get the container that was clicked on.
+        var container = document.getElementById(groupId + "_legendContainer")
+        // if visible, hide
+        if (graph2d.isGroupVisible(groupId) == true) {
+            groups.update({id:groupId, visible:false});
+            container.className = container.className + " hidden";
+        }
+        else { // if invisible, show
+            groups.update({id:groupId, visible:true});
+            container.className = container.className.replace("hidden","");
+        }
     }
-}
 
-populateExternalLegend()
+    populateExternalLegend()
 
 </script>
 </body>

lib/timeline/Graph2d.js

@@ -219,7 +219,7 @@ Graph2d.prototype.setGroups = function(groups) {
 };
 
 /**
- *
+ * Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
  * @param groupId
  * @param width
  * @param height
@@ -235,6 +235,11 @@ Graph2d.prototype.getLegend = function(groupId, width, height) {
   }
 }
 
+/**
+ * This checks if the visible option of the supplied group (by ID) is true or false.
+ * @param groupId
+ * @returns {*}
+ */
 Graph2d.prototype.isGroupVisible = function(groupId) {
   if (this.linegraph.groups[groupId] !== undefined) {
     return this.linegraph.groups[groupId].visible;

lib/timeline/component/LineGraph.js

@@ -683,7 +683,6 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
         }
       }
     }
-    console.log(yAxisRightUsed)
     if (yAxisLeftUsed == true) {
       this.yAxisLeft.setRange(minLeft, maxLeft);
     }