tracking.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /*=========================================================================================
  2. File Name: tracking.js
  3. Description: Flot tracking chart
  4. ----------------------------------------------------------------------------------------
  5. Item Name: Robust - Responsive Admin Theme
  6. Version: 1.2
  7. Author: PIXINVENT
  8. Author URL: http://www.themeforest.net/user/pixinvent
  9. ==========================================================================================*/
  10. // Tracking chart
  11. // ------------------------------
  12. $(window).on("load", function(){
  13. var sin = [], cos = [];
  14. for (var i = 0; i < 14; i += 0.1) {
  15. sin.push([i, Math.sin(i)]);
  16. cos.push([i, Math.cos(i)]);
  17. }
  18. plot = $.plot("#tracking", [
  19. { data: sin, label: "sin(x) = -0.00"},
  20. { data: cos, label: "cos(x) = -0.00" }
  21. ], {
  22. series: {
  23. lines: {
  24. show: true
  25. }
  26. },
  27. crosshair: {
  28. mode: "x"
  29. },
  30. grid: {
  31. borderWidth: 1,
  32. borderColor: 'transparent',
  33. color: '#999',
  34. minBorderMargin: 20,
  35. labelMargin: 10,
  36. margin: {
  37. top: 8,
  38. bottom: 20,
  39. left: 20
  40. },
  41. hoverable: true,
  42. autoHighlight: false
  43. },
  44. xaxis: {
  45. tickLength: 0,
  46. tickDecimals: 0,
  47. },
  48. yaxis: {
  49. min: -1.2,
  50. max: 1.2
  51. },
  52. colors: ['#00bfc7','#E91E63']
  53. });
  54. var legends = $("#tracking .legendLabel");
  55. legends.each(function () {
  56. // fix the widths so they don't jump around
  57. $(this).css('width', $(this).width());
  58. });
  59. var updateLegendTimeout = null;
  60. var latestPosition = null;
  61. function updateLegend() {
  62. updateLegendTimeout = null;
  63. var pos = latestPosition;
  64. var axes = plot.getAxes();
  65. if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
  66. pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
  67. return;
  68. }
  69. var i, j, dataset = plot.getData();
  70. for (i = 0; i < dataset.length; ++i) {
  71. var series = dataset[i];
  72. // Find the nearest points, x-wise
  73. for (j = 0; j < series.data.length; ++j) {
  74. if (series.data[j][0] > pos.x) {
  75. break;
  76. }
  77. }
  78. // Now Interpolate
  79. var y,
  80. p1 = series.data[j - 1],
  81. p2 = series.data[j];
  82. if (p1 == null) {
  83. y = p2[1];
  84. } else if (p2 == null) {
  85. y = p1[1];
  86. } else {
  87. y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
  88. }
  89. legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
  90. }
  91. }
  92. $("#tracking").bind("plothover", function (event, pos, item) {
  93. latestPosition = pos;
  94. if (!updateLegendTimeout) {
  95. updateLegendTimeout = setTimeout(updateLegend, 50);
  96. }
  97. });
  98. });