Additional work on #490. Passing in strings works as expected. Need t…

…o come up with an example for functions.
metricsgraphics · Oct 15, 2015 · cd85b77 · cd85b77
1 parent f501bb2
commit cd85b77
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/examples/charts/rollovers.htm b/examples/charts/rollovers.htm
@@ -118,11 +118,54 @@
                 </div>
             </div>
 
+
+            <div class='row trunk-section'>
+                <div class='col-lg-7 text-center' id='y-formatting'></div>
+                <div class='col-lg-5'>
+                    <div class='data-column'><a href='data/fake_users2.json'>data</a></div>
+
+<pre><code class='javascript'>
+d3.json('data/float.json', function(data) {
+
+    data = MG.convert.date(data, 'date');
+    // check out https://github.com/mbostock/d3/wiki/Formatting for number formatting 
+    //and https://github.com/mbostock/d3/wiki/Time-Formatting for time formatting options.
+
+    MG.data_graphic({
+        title: "Rollover Formatting With Strings",
+        description: "Metrics Graphics comes with two arguments: y_rollover_format and x_rollover_format. These arguments take either strings or functions. Strings are formatted according to D3's number format, or D3's time formatting, if the accessor pulls out Date objects.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        y_rollover_format: '%d',
+        x_rollover_format: '%e of %b? Well, ',
+        target: '#y-formatting'
+    });
+})
+</code></pre>
+
+                </div>
+            </div>
+
+
 <script>
 MG._hooks = {};
 d3.json('data/float.json', function(data) {
     data = MG.convert.date(data, 'date');
 
+     MG.data_graphic({
+        title: "Rollover Formatting With Strings",
+        description: "Metrics Graphics comes with two arguments: y_rollover_format and x_rollover_format. These arguments take either strings or functions. Strings are formatted according to D3's number format, or D3's time formatting, if the accessor pulls out Date objects.",
+        data: data,
+        width: 600,
+        height: 200,
+        right: 40,
+        y_rollover_format: '%d',
+        x_rollover_format: '%e of %b? Well, ',
+        target: '#y-formatting'
+    });
+
     MG.data_graphic({
         title: "Changing Precision 1",
         description: "We can change the precision if the axis data type is a float. We can also change both the formatting, or hide the rollover text altogether. Here we set <i>decimals: 3</i> to get three decimals in the rollover for percentages.",

diff --git a/src/js/charts/line.js b/src/js/charts/line.js
diff --git a/src/js/common/data_graphic.js b/src/js/common/data_graphic.js
@@ -56,6 +56,8 @@ MG.data_graphic = function(args) {
         yax_units: '',
         x_rug: false,
         y_rug: false,
+        x_rollover_format: null,               //
+        y_rollover_format: null,               //
         transition_on_update: true,
         mouseover: null,
         show_rollover_text: true,