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.

268 lines
9.0 KiB

9 years ago
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Highcharts Example</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  7. <style type="text/css">
  8. ${demo.css}
  9. </style>
  10. <script type="text/javascript">
  11. $(function () {
  12. $('#container').highcharts({
  13. chart: {
  14. backgroundColor: 'white',
  15. events: {
  16. load: function () {
  17. // Draw the flow chart
  18. var ren = this.renderer,
  19. colors = Highcharts.getOptions().colors,
  20. rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
  21. leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];
  22. // Separator, client from service
  23. ren.path(['M', 120, 40, 'L', 120, 330])
  24. .attr({
  25. 'stroke-width': 2,
  26. stroke: 'silver',
  27. dashstyle: 'dash'
  28. })
  29. .add();
  30. // Separator, CLI from service
  31. ren.path(['M', 420, 40, 'L', 420, 330])
  32. .attr({
  33. 'stroke-width': 2,
  34. stroke: 'silver',
  35. dashstyle: 'dash'
  36. })
  37. .add();
  38. // Headers
  39. ren.label('Web client', 20, 40)
  40. .css({
  41. fontWeight: 'bold'
  42. })
  43. .add();
  44. ren.label('Web service / CLI', 220, 40)
  45. .css({
  46. fontWeight: 'bold'
  47. })
  48. .add();
  49. ren.label('Command line client', 440, 40)
  50. .css({
  51. fontWeight: 'bold'
  52. })
  53. .add();
  54. // SaaS client label
  55. ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82)
  56. .attr({
  57. fill: colors[0],
  58. stroke: 'white',
  59. 'stroke-width': 2,
  60. padding: 5,
  61. r: 5
  62. })
  63. .css({
  64. color: 'white'
  65. })
  66. .add()
  67. .shadow(true);
  68. // Arrow from SaaS client to Phantom JS
  69. ren.path(rightArrow)
  70. .attr({
  71. 'stroke-width': 2,
  72. stroke: colors[3]
  73. })
  74. .translate(95, 95)
  75. .add();
  76. ren.label('POST options in JSON', 90, 75)
  77. .css({
  78. fontSize: '10px',
  79. color: colors[3]
  80. })
  81. .add();
  82. ren.label('PhantomJS', 210, 82)
  83. .attr({
  84. r: 5,
  85. width: 100,
  86. fill: colors[1]
  87. })
  88. .css({
  89. color: 'white',
  90. fontWeight: 'bold'
  91. })
  92. .add();
  93. // Arrow from Phantom JS to Batik
  94. ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180])
  95. .attr({
  96. 'stroke-width': 2,
  97. stroke: colors[3]
  98. })
  99. .add();
  100. ren.label('SVG', 255, 120)
  101. .css({
  102. color: colors[3],
  103. fontSize: '10px'
  104. })
  105. .add();
  106. ren.label('Batik', 210, 200)
  107. .attr({
  108. r: 5,
  109. width: 100,
  110. fill: colors[1]
  111. })
  112. .css({
  113. color: 'white',
  114. fontWeight: 'bold'
  115. })
  116. .add();
  117. // Arrow from Batik to SaaS client
  118. ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130,
  119. 'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135])
  120. .attr({
  121. 'stroke-width': 2,
  122. stroke: colors[3]
  123. })
  124. .add();
  125. ren.label('Rasterized image', 100, 110)
  126. .css({
  127. color: colors[3],
  128. fontSize: '10px'
  129. })
  130. .add();
  131. // Browser label
  132. ren.label('Browser<br/>running<br/>Highcharts', 10, 180)
  133. .attr({
  134. fill: colors[0],
  135. stroke: 'white',
  136. 'stroke-width': 2,
  137. padding: 5,
  138. r: 5
  139. })
  140. .css({
  141. color: 'white',
  142. width: '100px'
  143. })
  144. .add()
  145. .shadow(true);
  146. // Arrow from Browser to Batik
  147. ren.path(rightArrow)
  148. .attr({
  149. 'stroke-width': 2,
  150. stroke: colors[1]
  151. })
  152. .translate(95, 205)
  153. .add();
  154. ren.label('POST SVG', 110, 185)
  155. .css({
  156. color: colors[1],
  157. fontSize: '10px'
  158. })
  159. .add();
  160. // Arrow from Batik to Browser
  161. ren.path(leftArrow)
  162. .attr({
  163. 'stroke-width': 2,
  164. stroke: colors[1]
  165. })
  166. .translate(95, 215)
  167. .add();
  168. ren.label('Rasterized image', 100, 215)
  169. .css({
  170. color: colors[1],
  171. fontSize: '10px'
  172. })
  173. .add();
  174. // Script label
  175. ren.label('Script', 450, 82)
  176. .attr({
  177. fill: colors[2],
  178. stroke: 'white',
  179. 'stroke-width': 2,
  180. padding: 5,
  181. r: 5
  182. })
  183. .css({
  184. color: 'white',
  185. width: '100px'
  186. })
  187. .add()
  188. .shadow(true);
  189. // Arrow from Script to PhantomJS
  190. ren.path(leftArrow)
  191. .attr({
  192. 'stroke-width': 2,
  193. stroke: colors[2]
  194. })
  195. .translate(330, 90)
  196. .add();
  197. ren.label('Command', 340, 70)
  198. .css({
  199. color: colors[2],
  200. fontSize: '10px'
  201. })
  202. .add();
  203. // Arrow from PhantomJS to Script
  204. ren.path(rightArrow)
  205. .attr({
  206. 'stroke-width': 2,
  207. stroke: colors[2]
  208. })
  209. .translate(330, 100)
  210. .add();
  211. ren.label('Rasterized image', 330, 100)
  212. .css({
  213. color: colors[2],
  214. fontSize: '10px'
  215. })
  216. .add();
  217. }
  218. }
  219. },
  220. title: {
  221. text: 'Highcharts export server overview',
  222. style: {
  223. color: 'black'
  224. }
  225. }
  226. });
  227. });
  228. </script>
  229. </head>
  230. <body>
  231. <script src="../../js/highcharts.js"></script>
  232. <script src="../../js/modules/exporting.js"></script>
  233. <div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>
  234. </body>
  235. </html>