diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2016-11-07 15:43:13 -0500 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2016-11-07 15:43:13 -0500 |
| commit | 77faead4e948f901fa6ca9951f085bbe045bae68 (patch) | |
| tree | 3f059e5e76ec5c037c7b2c76e53895a8a337fa3e /www/lib/vis/examples/graph3d/11_tooltips.html | |
| parent | 5b80d3916cd91d630a0142f76a87b4863b714203 (diff) | |
Updated vis library to 4.17 and also linked to only graph2d-timeline CSS and JS
Diffstat (limited to 'www/lib/vis/examples/graph3d/11_tooltips.html')
| -rw-r--r-- | www/lib/vis/examples/graph3d/11_tooltips.html | 24 |
1 files changed, 19 insertions, 5 deletions
diff --git a/www/lib/vis/examples/graph3d/11_tooltips.html b/www/lib/vis/examples/graph3d/11_tooltips.html index 6ae32a39..c37b35f4 100644 --- a/www/lib/vis/examples/graph3d/11_tooltips.html +++ b/www/lib/vis/examples/graph3d/11_tooltips.html @@ -5,6 +5,12 @@ <style> body {font: 10pt arial;} + div#info { + width : 600px; + text-align: center; + margin-top: 2em; + font-size : 1.2em; + } </style> <script type="text/javascript" src="../../dist/vis.js"></script> @@ -24,6 +30,11 @@ // Create and populate a data table. data = new vis.DataSet(); + var extra_content = [ + 'Arbitrary information', + 'You can access data from the point source object', + 'Tooltip example content', + ]; // create some nice looking data with sin/cos var steps = 5; // number of datapoints will be steps*steps @@ -34,10 +45,10 @@ var z = custom(x,y); if (withValue) { var value = (y - x); - data.add({x:x, y:y, z: z, style:value}); + data.add({x:x, y:y, z: z, style:value, extra: extra_content[(x*y) % extra_content.length]}); } else { - data.add({x:x, y:y, z: z}); + data.add({x:x, y:y, z: z, extra: extra_content[(x*y) % extra_content.length]}); } } } @@ -48,14 +59,16 @@ height: '600px', style: style, showPerspective: true, + showLegend: true, showGrid: true, showShadow: false, // Option tooltip can be true, false, or a function returning a string with HTML contents //tooltip: true, tooltip: function (point) { - // parameter point contains properties x, y, z - return 'value: <b>' + point.z + '</b>'; + // parameter point contains properties x, y, z, and data + // data is the original object passed to the point constructor + return 'value: <b>' + point.z + '</b><br>' + point.data.extra; }, keepAspectRatio: true, @@ -99,6 +112,7 @@ <div id="mygraph"></div> -<div id="info"></div> +<div id="info">Hover the mouse cursor over the graph to see tooltips.</div> + </body> </html> |
