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.

90 lines
2.7 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="../flot/jquery.flot.navigate.min.js"></script>
  10. <script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script>
  11. <script language="JavaScript" type="text/javascript" src="_TestSetup.js"></script>
  12. <link rel="stylesheet" type="text/css" href="_TestSetup.css">
  13. </link>
  14. </head>
  15. <body>
  16. <div id="placeholder" style="width: 800;height: 400;"></div>
  17. <div id="parameters" style="width: 800"></div>
  18. <script id="source" language="javascript" type="text/javascript">
  19. $(function() {
  20. //data
  21. var dataSet = [[1385490600000, 150], [1386009000000, 450], [1392834600000, 444], [1393266600000, 100], [1393353000000, 147], [1393439400000, 105], [1393525800000, 179.5], [1393612200000, 85], [1393871400000, 107.5]];
  22. //general plot options
  23. var options = {
  24. series : {
  25. curvedLines : {
  26. active : true
  27. }
  28. },
  29. xaxis : {
  30. mode : "time",
  31. tickSize : [1, "day"],
  32. timezone : "browser",
  33. timeformat : "%m/%d%a",
  34. min : 1393396200000,
  35. max : 1394073000000,
  36. tickLength : 0,
  37. panRange : [1378809000000, 1394505000000],
  38. dayNames : ["S", "M", "T", "W", "T", "F", "S"]
  39. },
  40. yaxis : {
  41. panRange : [0, 500],
  42. ticks : ['0', '70', '130', '180', '200', '300', '400', '500'],
  43. tickLength : 0,
  44. tickDecimals : 0
  45. },
  46. pan : {
  47. interactive : true
  48. }
  49. }
  50. //curved line paramters
  51. var defaultParameters = {
  52. apply : true,
  53. legacyOverride : {
  54. fitPointDist : 86400,
  55. curvePointFactor : 40,
  56. fit : true
  57. }
  58. };
  59. //plot function
  60. function replot(parameters) {
  61. $.plot($("#placeholder"), [{
  62. data : dataSet,
  63. lines : {
  64. show : true,
  65. },
  66. curvedLines : parameters
  67. }, {
  68. data : dataSet,
  69. points : {
  70. show : true,
  71. },
  72. curvedLines : parameters
  73. }, {
  74. data : dataSet,
  75. points : {
  76. show : true
  77. }
  78. }], options);
  79. }
  80. //combine everything
  81. TestSetup($("#parameters"), defaultParameters, [replot])
  82. });
  83. </script>
  84. </body>
  85. </hmtl>