From 4e6c5a51afcda46f04f33d869427204ea79d8fdb Mon Sep 17 00:00:00 2001
From: Chris Jackson <chris@cd-jackson.com>
Date: Mon, 3 Nov 2014 12:56:56 +0000
Subject: [PATCH] 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.

---
 examples/graph2d/17_dynamicStyling.html | 43 +++++++++++++++++++++++--
 lib/DOMutil.js                          |  7 ++--
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/examples/graph2d/17_dynamicStyling.html b/examples/graph2d/17_dynamicStyling.html
index 9600a8c7..0bbf26dd 100644
--- a/examples/graph2d/17_dynamicStyling.html
+++ b/examples/graph2d/17_dynamicStyling.html
@@ -110,6 +110,42 @@
                         </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 @@
         dataAxis: {
             showMinorLabels: false,
             icons: true
-        },
-        legend: {left: {position: "top-left"}}
+        }
     };
 
     var groupData = {
@@ -165,7 +200,11 @@
         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
index 38b35c7e..5cc01f6f 100644
--- a/lib/DOMutil.js
+++ b/lib/DOMutil.js
@@ -139,7 +139,6 @@ 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);
@@ -147,8 +146,12 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
     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;
 };