public/assets/Chart.js-2-1-3/samples/scatter-multi-axis.html

   1 <!doctype html>
   2 <html>
   3
   4 <head>
   5     <title>Scatter Chart Multi Axis</title>
   6     <script src="../dist/Chart.bundle.js"></script>
   7     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   8     <style>
   9     canvas {
  10         -moz-user-select: none;
  11         -webkit-user-select: none;
  12         -ms-user-select: none;
  13     }
  14     </style>
  15 </head>
  16
  17 <body>
  18     <div style="width:75%">
  19         <div>
  20             <canvas id="canvas"></canvas>
  21         </div>
  22     </div>
  23     <button id="randomizeData">Randomize Data</button>
  24     <script>
  25     var randomScalingFactor = function() {
  26         return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
  27     };
  28     var randomColor = function(opacity) {
  29         return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
  30     };
  31
  32     var scatterChartData = {
  33         datasets: [{
  34             label: "My First dataset",
  35             xAxisID: "x-axis-1",
  36             yAxisID: "y-axis-1",
  37                         data: [{
  38                                 x: randomScalingFactor(),
  39                                 y: randomScalingFactor(),
  40                         }, {
  41                                 x: randomScalingFactor(),
  42                                 y: randomScalingFactor(),
  43                         }, {
  44                                 x: randomScalingFactor(),
  45                                 y: randomScalingFactor(),
  46                         }, {
  47                                 x: randomScalingFactor(),
  48                                 y: randomScalingFactor(),
  49                         }, {
  50                                 x: randomScalingFactor(),
  51                                 y: randomScalingFactor(),
  52                         }, {
  53                                 x: randomScalingFactor(),
  54                                 y: randomScalingFactor(),
  55                         }, {
  56                                 x: randomScalingFactor(),
  57                                 y: randomScalingFactor(),
  58                         }]
  59         }, {
  60             label: "My Second dataset",
  61             xAxisID: "x-axis-1",
  62             yAxisID: "y-axis-2",
  63             data: [{
  64                                 x: randomScalingFactor(),
  65                                 y: randomScalingFactor(),
  66                         }, {
  67                                 x: randomScalingFactor(),
  68                                 y: randomScalingFactor(),
  69                         }, {
  70                                 x: randomScalingFactor(),
  71                                 y: randomScalingFactor(),
  72                         }, {
  73                                 x: randomScalingFactor(),
  74                                 y: randomScalingFactor(),
  75                         }, {
  76                                 x: randomScalingFactor(),
  77                                 y: randomScalingFactor(),
  78                         }, {
  79                                 x: randomScalingFactor(),
  80                                 y: randomScalingFactor(),
  81                         }, {
  82                                 x: randomScalingFactor(),
  83                                 y: randomScalingFactor(),
  84                         }]
  85         }]
  86     };
  87
  88     $.each(scatterChartData.datasets, function(i, dataset) {
  89         dataset.borderColor = randomColor(0.4);
  90         dataset.backgroundColor = randomColor(0.1);
  91         dataset.pointBorderColor = randomColor(0.7);
  92         dataset.pointBackgroundColor = randomColor(0.5);
  93         dataset.pointBorderWidth = 1;
  94     });
  95
  96     window.onload = function() {
  97         var ctx = document.getElementById("canvas").getContext("2d");
  98         window.myScatter = Chart.Scatter(ctx, {
  99                 data: scatterChartData,
 100                 options: {
 101                     responsive: true,
 102                     hoverMode: 'single',
 103                 title: {
 104                         display: true,
 105                         text: 'Chart.js Scatter Chart - Multi Axis'
 106                     },
 107                     scales: {
 108                         xAxes: [{
 109                                 position: "bottom",
 110                                 gridLines: {
 111                                         zeroLineColor: "rgba(0,0,0,1)"
 112                                 }
 113                         }],
 114                         yAxes: [{
 115                                 type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
 116                                 display: true,
 117                                 position: "left",
 118                                 id: "y-axis-1",
 119                             }, {
 120                                 type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
 121                                 display: true,
 122                                 position: "right",
 123                                 reverse: true,
 124                                 id: "y-axis-2",
 125
 126                                 // grid line settings
 127                                 gridLines: {
 128                                     drawOnChartArea: false, // only want the grid lines for one axis to show up
 129                                 },
 130                             }],
 131                     }
 132                 }
 133         });
 134     };
 135
 136     $('#randomizeData').click(function() {
 137         scatterChartData.datasets[0].data = [{
 138                         x: randomScalingFactor(),
 139                         y: randomScalingFactor(),
 140                 }, {
 141                         x: randomScalingFactor(),
 142                         y: randomScalingFactor(),
 143                 }, {
 144                         x: randomScalingFactor(),
 145                         y: randomScalingFactor(),
 146                 }, {
 147                         x: randomScalingFactor(),
 148                         y: randomScalingFactor(),
 149                 }, {
 150                         x: randomScalingFactor(),
 151                         y: randomScalingFactor(),
 152                 }, {
 153                         x: randomScalingFactor(),
 154                         y: randomScalingFactor(),
 155                 }, {
 156                         x: randomScalingFactor(),
 157                         y: randomScalingFactor(),
 158                 }];
 159         scatterChartData.datasets[1].data = [{
 160                         x: randomScalingFactor(),
 161                         y: randomScalingFactor(),
 162                 }, {
 163                         x: randomScalingFactor(),
 164                         y: randomScalingFactor(),
 165                 }, {
 166                         x: randomScalingFactor(),
 167                         y: randomScalingFactor(),
 168                 }, {
 169                         x: randomScalingFactor(),
 170                         y: randomScalingFactor(),
 171                 }, {
 172                         x: randomScalingFactor(),
 173                         y: randomScalingFactor(),
 174                 }, {
 175                         x: randomScalingFactor(),
 176                         y: randomScalingFactor(),
 177                 }, {
 178                         x: randomScalingFactor(),
 179                         y: randomScalingFactor(),
 180                 }];
 181         window.myScatter.update();
 182     });
 183     </script>
 184 </body>
 185
 186 </html>