You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

100 lines
3.2 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <hmtl>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>CurvedLines Plugin for flot</title>
  5. <script language="javascript" type="text/javascript" src="../flot/jquery.min.js"></script>
  6. <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]-->
  7. <script language="javascript" type="text/javascript" src="../flot/jquery.flot.min.js"></script>
  8. <script language="javascript" type="text/javascript" src="../flot/jquery.flot.time.min.js"></script>
  9. <script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script>
  10. <script language="JavaScript" type="text/javascript" src="_TestSetup.js"></script>
  11. <link rel="stylesheet" type="text/css" href="_TestSetup.css">
  12. </link>
  13. </head>
  14. <body>
  15. <div id="placeholder" style="width: 800;height: 300;"></div>
  16. <div id="placeholder2" style="width: 800;height: 300;"></div>
  17. <div id="parameters" style="width: 800"></div>
  18. <script id="source" language="javascript" type="text/javascript">
  19. //data
  20. var d1 = [[new Date(1358143200000), 3], [new Date(1358229600000), 4], [new Date(1358316000000), 5], [new Date(1358402400000), 11], [new Date(1358488800000), 10], [new Date(1358748000000), 12], [new Date(1358834400000), 13], [new Date(1358920800000), 5], [new Date(1359007200000), 1], [new Date(1359093600000), 2], [new Date(1359352800000), 1], [new Date(1359439200000), 3], [new Date(1359525600000), 2], [new Date(1359612000000), 1], [new Date(1359698400000), 0], [new Date(1359957600000), 0], [new Date(1360044000000), 0], [new Date(1360130400000), 5], [new Date(1360216800000), 3], [new Date(1360303200000), 3], [new Date(1360562400000), 3], [new Date(1360648800000), 21], [new Date(1360735200000), 2]];
  21. var d2 = [[20, new Date(2000, 1, 1, 10)], [30, new Date(2000, 1, 1, 8)], [50, new Date(2000, 1, 1, 14)], [80, new Date(2000, 1, 1, 22)]];
  22. //general plot options
  23. var options = {
  24. series : {
  25. curvedLines : {
  26. active : true
  27. }
  28. },
  29. xaxis : {
  30. mode : "time",
  31. minTickSize : [1, "hour"]
  32. },
  33. yaxis : {
  34. min : -10,
  35. max : 60
  36. }
  37. };
  38. var options2 = {
  39. series : {
  40. curvedLines : {
  41. active : true
  42. }
  43. },
  44. yaxis : {
  45. mode : "time",
  46. minTickSize : [1, "hour"],
  47. min : (new Date(2000, 1, 1)),
  48. max : (new Date(2000, 1, 2))
  49. },
  50. xaxis : {
  51. min : 10,
  52. max : 90
  53. }
  54. };
  55. //curved line paramters
  56. var defaultParameters = {
  57. apply : true,
  58. legacyOverride : true
  59. }
  60. //plot function
  61. function replot(parameters) {
  62. $.plot($("#placeholder"), [{
  63. data : d1,
  64. lines : {
  65. show : true
  66. },
  67. curvedLines : parameters
  68. }, {
  69. data : d1,
  70. points : {
  71. show : true
  72. }
  73. }], options);
  74. }
  75. function replot2(parameters) {
  76. $.plot($("#placeholder2"), [{
  77. data : d2,
  78. lines : {
  79. show : true,
  80. lineWidth : 3
  81. },
  82. curvedLines : parameters
  83. }, {
  84. data : d2,
  85. points : {
  86. show : true
  87. }
  88. }], options2);
  89. }
  90. //combine everything
  91. TestSetup($("#parameters"), defaultParameters, [replot, replot2])
  92. </script>
  93. </body>
  94. </hmtl>