Add style option for data points.

Note that this ought to be renamed to be consistent with other style options but currently 'style' is used to define the shape of the point.
almende · Nov 3, 2014 · 4e6c5a5 · 4e6c5a5
1 parent 09626ac
commit 4e6c5a5
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 4 deletions.
diff --git a/examples/graph2d/17_dynamicStyling.html b/examples/graph2d/17_dynamicStyling.html
@@ -110,6 +110,42 @@ <h2>Graph2d | Dynamic Styling Example</h2>
                         </select>
                     </td>
                 </tr>
+                <tr>
+                    <td>Points Color</td>
+                    <td>
+                        <select id="pointcolor" onchange="updateStyle()">
+                            <option value="stroke:green;">green</option>
+                            <option value="stroke:red;">red</option>
+                            <option value="stroke:blue;" selected="selected">blue</option>
+                            <option value="stroke:black;">black</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Point line thickness</td>
+                    <td>
+                        <select id="pointthickness" onchange="updateStyle()">
+                            <option value="stroke-width:0;">0</option>
+                            <option value="stroke-width:1;">1</option>
+                            <option value="stroke-width:2;" selected="selected">2</option>
+                            <option value="stroke-width:3;">3</option>
+                            <option value="stroke-width:4;">4</option>
+                            <option value="stroke-width:5;">5</option>
+                            <option value="stroke-width:6;">6</option>
+                        </select>
+                    </td>
+                <tr>
+                </tr>
+                  <td>Points Fill Color</td>
+                    <td>
+                        <select id="pointfill" onchange="updateStyle()">
+                            <option value="fill:green;">green</option>
+                            <option value="fill:red;">red</option>
+                            <option value="fill:blue;" selected="selected">blue</option>
+                            <option value="fill:black;">black</option>
+                        </select>
+                    </td>
+                </tr>
             </table>
         </td>
     </tr>
@@ -135,8 +171,7 @@ <h2>Graph2d | Dynamic Styling Example</h2>
         dataAxis: {
             showMinorLabels: false,
             icons: true
-        },
-        legend: {left: {position: "top-left"}}
+        }
     };
 
     var groupData = {
@@ -165,7 +200,11 @@ <h2>Graph2d | Dynamic Styling Example</h2>
         groupData.style += document.getElementById("thickness").value;
 
         groupData.options.drawPoints = {};
+        groupData.options.drawPoints.styles = "";
         groupData.options.drawPoints.style = document.getElementById("points").value;
+        groupData.options.drawPoints.styles += document.getElementById("pointcolor").value;
+        groupData.options.drawPoints.styles += document.getElementById("pointthickness").value;
+        groupData.options.drawPoints.styles += document.getElementById("pointfill").value;
         groupData.options.drawPoints.size = Number(document.getElementById("pointsize").value);
         if (groupData.options.drawPoints.style == "") {
             groupData.options.drawPoints = false;

diff --git a/lib/DOMutil.js b/lib/DOMutil.js
@@ -139,16 +139,19 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
     point.setAttributeNS(null, "cx", x);
     point.setAttributeNS(null, "cy", y);
     point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
-    point.setAttributeNS(null, "class", group.className + " point");
   }
   else {
     point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
     point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
     point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
     point.setAttributeNS(null, "width", group.options.drawPoints.size);
     point.setAttributeNS(null, "height", group.options.drawPoints.size);
-    point.setAttributeNS(null, "class", group.className + " point");
   }
+
+  if(group.options.drawPoints.styles !== undefined) {
+    point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
+  }
+  point.setAttributeNS(null, "class", group.className + " point");
   return point;
 };