| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
|   <title>Graph2d | Scatterplot</title> | |
| 
 | |
|   <style type="text/css"> | |
|     body, html { | |
|       font-family: sans-serif; | |
|     } | |
|   </style> | |
| 
 | |
|   <script src="../../dist/vis.js"></script> | |
|   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |
| <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> | |
| <body> | |
| <h2>Graph2d | Scatterplot</h2> | |
| <div style="width:700px; font-size:14px; text-align: justify;"> | |
|     You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. You can use this with the | |
|     <code>style: 'points'</code> option for making a scatterplot! | |
| </div> | |
| <pre class="prettyprint lang-js"> | |
| var options = { | |
|     sort: false, | |
|     sampling:false, | |
|     style:'points' | |
| }; | |
| </pre> | |
| <br /> | |
| <div id="visualization"></div> | |
| 
 | |
| <script type="text/javascript"> | |
| 
 | |
|   var container = document.getElementById('visualization'); | |
|   var items = []; | |
|   for (var i = 0; i < 100; i++) { | |
|       items.push({x: new Date('2014-06-11').valueOf() + Math.floor(Math.random() * 30000), y: 500 + (Math.random() * 100)}); | |
|   } | |
| 
 | |
|   var dataset = new vis.DataSet(items); | |
|   var options = { | |
|       sort: false, | |
|       sampling:false, | |
|       style:'points', | |
|       dataAxis: { | |
|           customRange: { | |
|               left: { | |
|                   min: 300, max: 800 | |
|               } | |
|           } | |
|       }, | |
|       drawPoints: { | |
|           enabled: true, | |
|           size: 6, | |
|           style: 'circle' // square, circle | |
|       }, | |
|       defaultGroup: 'Scatterplot', | |
|       height: '600px' | |
|   }; | |
|   var graph2d = new vis.Graph2d(container, dataset, options); | |
| 
 | |
| </script> | |
| </body> | |
| </html> |