scatter-logX.html 3.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Scatter Chart</title>
  5. <script src="../dist/Chart.bundle.js"></script>
  6. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  7. <style>
  8. canvas {
  9. -moz-user-select: none;
  10. -webkit-user-select: none;
  11. -ms-user-select: none;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div style="width:75%">
  17. <div>
  18. <canvas id="canvas"></canvas>
  19. </div>
  20. </div>
  21. <script>
  22. var randomScalingFactor = function() {
  23. return Math.round(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
  24. };
  25. var randomColor = function(opacity) {
  26. return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
  27. };
  28. var scatterChartData = {
  29. datasets: [{
  30. label: "V(node2)",
  31. data: [{
  32. x: 1,
  33. y: -1.711e-2,
  34. }, {
  35. x: 1.26,
  36. y: -2.708e-2,
  37. }, {
  38. x: 1.58,
  39. y: -4.285e-2,
  40. }, {
  41. x: 2.0,
  42. y: -6.772e-2,
  43. }, {
  44. x: 2.51,
  45. y: -1.068e-1,
  46. }, {
  47. x: 3.16,
  48. y: -1.681e-1,
  49. }, {
  50. x: 3.98,
  51. y: -2.635e-1,
  52. }, {
  53. x: 5.01,
  54. y: -4.106e-1,
  55. }, {
  56. x: 6.31,
  57. y: -6.339e-1,
  58. }, {
  59. x: 7.94,
  60. y: -9.659e-1,
  61. }, {
  62. x: 10.00,
  63. y: -1.445,
  64. }, {
  65. x: 12.6,
  66. y: -2.110,
  67. }, {
  68. x: 15.8,
  69. y: -2.992,
  70. }, {
  71. x: 20.0,
  72. y: -4.102,
  73. }, {
  74. x: 25.1,
  75. y: -5.429,
  76. }, {
  77. x: 31.6,
  78. y: -6.944,
  79. }, {
  80. x: 39.8,
  81. y: -8.607,
  82. }, {
  83. x: 50.1,
  84. y: -1.038e1,
  85. }, {
  86. x: 63.1,
  87. y: -1.223e1,
  88. }, {
  89. x: 79.4,
  90. y: -1.413e1,
  91. }, {
  92. x: 100.00,
  93. y: -1.607e1,
  94. }, {
  95. x: 126,
  96. y: -1.803e1,
  97. }, {
  98. x: 158,
  99. y: -2e1,
  100. }, {
  101. x: 200,
  102. y: -2.199e1,
  103. }, {
  104. x: 251,
  105. y: -2.398e1,
  106. }, {
  107. x: 316,
  108. y: -2.597e1,
  109. }, {
  110. x: 398,
  111. y: -2.797e1,
  112. }, {
  113. x: 501,
  114. y: -2.996e1,
  115. }, {
  116. x: 631,
  117. y: -3.196e1,
  118. }, {
  119. x: 794,
  120. y: -3.396e1,
  121. }, {
  122. x: 1000,
  123. y: -3.596e1,
  124. },]
  125. }]
  126. };
  127. $.each(scatterChartData.datasets, function(i, dataset) {
  128. dataset.borderColor = randomColor(0.4);
  129. dataset.backgroundColor = randomColor(0.1);
  130. dataset.pointBorderColor = randomColor(0.7);
  131. dataset.pointBackgroundColor = randomColor(0.5);
  132. dataset.pointBorderWidth = 1;
  133. });
  134. window.onload = function() {
  135. var ctx = document.getElementById("canvas").getContext("2d");
  136. window.myScatter = Chart.Scatter(ctx, {
  137. data: scatterChartData,
  138. options: {
  139. title: {
  140. display: true,
  141. text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
  142. },
  143. scales: {
  144. xAxes: [{
  145. type: 'logarithmic',
  146. position: 'bottom',
  147. ticks: {
  148. userCallback: function(tick) {
  149. var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
  150. if (remain === 1 || remain === 2 || remain === 5) {
  151. return tick.toString() + "Hz";
  152. }
  153. return '';
  154. },
  155. },
  156. scaleLabel: {
  157. labelString: 'Frequency',
  158. display: true,
  159. }
  160. }],
  161. yAxes: [{
  162. type: 'linear',
  163. ticks: {
  164. userCallback: function(tick) {
  165. return tick.toString() + "dB";
  166. }
  167. },
  168. scaleLabel: {
  169. labelString: 'Voltage',
  170. display: true
  171. }
  172. }]
  173. }
  174. }
  175. });
  176. };
  177. </script>
  178. </body>
  179. </html>