Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <title>Scatter Chart</title>
- <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
- <script src="../node_modules/hammerjs/hammer.min.js"></script>
- <script src="../Chart.Zoom.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
- </head>
- <body>
- <div style="width:100%">
- <div>
- <canvas id="canvas"></canvas>
- </div>
- </div>
- <script>
- var randomColor = function(opacity) {
- return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
- };
- var scatterChartData = {
- datasets: [{
- label: "My only dataset",
- data: [{
- x: 0,
- y: 0,
- }, {
- x: 20,
- y: 20,
- }, {
- x: 40,
- y: 0,
- }],
- lineTension: 0,
- }]
- };
- scatterChartData.datasets.forEach(function(dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.1);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myScatter = Chart.Scatter(ctx, {
- data: scatterChartData,
- options: {
- title: {
- display: true,
- text: 'Chart.js Scatter Chart'
- },
- scales: {
- xAxes: [{
- position: 'top',
- gridLines: {
- zeroLineColor: "rgba(0,255,0,1)"
- },
- scaleLabel: {
- display: true,
- labelString: 'x axis'
- },
- ticks: {
- maxRotation: 0,
- reverse: true
- }
- }],
- yAxes: [{
- position: 'right',
- gridLines: {
- zeroLineColor: "rgba(0,255,0,1)"
- },
- scaleLabel: {
- display: true,
- labelString: 'y axis'
- },
- ticks: {
- reverse: true
- }
- }]
- },
- pan: {
- enabled: true,
- mode: 'xy',
- threshold: 10,
- },
- zoom: {
- enabled: true,
- mode: 'xy',
- limits: {
- max: 10,
- min: 0.5
- }
- }
- }
- });
- };
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement