Fix issue w3c#299

shikhar-scs · Oct 22, 2015 · 7f7e558 · 7f7e558
1 parent 249a405
commit 7f7e558
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 9 deletions.
diff --git a/dist/metricsgraphics.js b/dist/metricsgraphics.js
@@ -2099,9 +2099,7 @@ function markers(args) {
                     if(d.click) {
                         d3.select(this)
                             .style('cursor', 'pointer')
-                            .on('click', function(d) {
-                                d.click();
-                            });
+                            .on('click', d.click);
                     }
                 });
 

diff --git a/dist/metricsgraphics.min.js b/dist/metricsgraphics.min.js
diff --git a/examples/charts/annotations.htm b/examples/charts/annotations.htm
@@ -31,7 +31,46 @@
 
                 </div>
             </div>
-
+
+            <div class='row trunk-section'>
+                <div class='col-lg-7 text-center' id='markers-clickable'></div>
+                <div class='col-lg-5'>
+                    <div class='data-column'><a href='data/some_percentage.json'>data</a></div>
+
+<pre><code class='javascript'>d3.json('data/some_percentage.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+
+    var clicker = function() {
+        window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank');
+    };
+
+    var markers = [{
+        'date': new Date('2014-02-01T00:00:00.000Z'),
+        'label': "Click me",
+        'click': clicker
+    }, {
+        'date': new Date('2014-03-15T00:00:00.000Z'),
+        'label': "Nothing to see here"
+    }];
+
+    MG.data_graphic({
+        title: "Clickable Markers",
+        description: "You can assign arbitrary functions to markers' click events.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        markers: markers,
+        format: 'percentage',
+        target: '#markers-clickable'
+    });
+});</code></pre>
+
+                </div>
+            </div>
+
             <div class='row trunk-section'>
                 <div class='col-lg-7 text-center' id='baselines'></div>
                 <div class='col-lg-5'>
@@ -108,6 +147,31 @@
         format: 'percentage',
         target: '#markers'
     });
+
+    var clicker = function() {
+        window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank');
+    };
+
+    markers = [{
+        'date': new Date('2014-02-01T00:00:00.000Z'),
+        'label': "Click me",
+        'click': clicker
+    }, {
+        'date': new Date('2014-03-15T00:00:00.000Z'),
+        'label': "Nothing to see here"
+    }];
+
+    MG.data_graphic({
+        title: "Clickable Markers",
+        description: "You can assign arbitrary functions to markers' click events.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        markers: markers,
+        format: 'percentage',
+        target: '#markers-clickable'
+    });
 });
 
 d3.json('data/fake_users1.json', function(data) {

diff --git a/src/js/common/markers.js b/src/js/common/markers.js
@@ -46,9 +46,7 @@ function markers(args) {
                     if(d.click) {
                         d3.select(this)
                             .style('cursor', 'pointer')
-                            .on('click', function(d) {
-                                d.click();
-                            });
+                            .on('click', d.click);
                     }
                 });