|
@ -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> |