Browse Source

Added explanatory text for graph3d tooltip demo

codeClimate
Wim Rijnders 8 years ago
parent
commit
44d6d86721
1 changed files with 16 additions and 9 deletions
  1. +16
    -9
      examples/graph3d/11_tooltips.html

+ 16
- 9
examples/graph3d/11_tooltips.html View File

@ -5,6 +5,12 @@
<style> <style>
body {font: 10pt arial;} body {font: 10pt arial;}
div#info {
width : 600px;
text-align: center;
margin-top: 2em;
font-size : 1.2em;
}
</style> </style>
<script type="text/javascript" src="../../dist/vis.js"></script> <script type="text/javascript" src="../../dist/vis.js"></script>
@ -24,11 +30,11 @@
// Create and populate a data table. // Create and populate a data table.
data = new vis.DataSet(); data = new vis.DataSet();
var extra_content = [
'Arbitrary information',
'You can access data from the point source object',
'Tooltip example content',
];
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 // create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps var steps = 5; // number of datapoints will be steps*steps
@ -42,7 +48,7 @@
data.add({x:x, y:y, z: z, style:value, extra: extra_content[(x*y) % extra_content.length]}); data.add({x:x, y:y, z: z, style:value, extra: extra_content[(x*y) % extra_content.length]});
} }
else { else {
data.add({x:x, y:y, z: z, extra: extra_content[(x*y) % extra_content.length]});
data.add({x:x, y:y, z: z, extra: extra_content[(x*y) % extra_content.length]});
} }
} }
} }
@ -61,8 +67,8 @@
//tooltip: true, //tooltip: true,
tooltip: function (point) { tooltip: function (point) {
// parameter point contains properties x, y, z, and data // 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;
// data is the original object passed to the point constructor
return 'value: <b>' + point.z + '</b><br>' + point.data.extra;
}, },
keepAspectRatio: true, keepAspectRatio: true,
@ -106,6 +112,7 @@
<div id="mygraph"></div> <div id="mygraph"></div>
<div id="info"></div>
<div id="info">Hover the mouse cursor over the graph to see tooltips.</div>
</body> </body>
</html> </html>

Loading…
Cancel
Save