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.

675 lines
20 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. #result {
  9. text-align: right;
  10. color: gray;
  11. min-height: 2em;
  12. }
  13. #table-sparkline {
  14. margin: 0 auto;
  15. border-collapse: collapse;
  16. }
  17. th {
  18. font-weight: bold;
  19. text-align: left;
  20. }
  21. td, th {
  22. padding: 5px;
  23. border-bottom: 1px solid silver;
  24. height: 20px;
  25. }
  26. thead th {
  27. border-top: 2px solid gray;
  28. border-bottom: 2px solid gray;
  29. }
  30. .highcharts-tooltip>span {
  31. background: white;
  32. border: 1px solid silver;
  33. border-radius: 3px;
  34. box-shadow: 1px 1px 2px #888;
  35. padding: 8px;
  36. }
  37. </style>
  38. <script type="text/javascript">
  39. $(function () {
  40. /**
  41. * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
  42. * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
  43. */
  44. Highcharts.SparkLine = function (options, callback) {
  45. var defaultOptions = {
  46. chart: {
  47. renderTo: (options.chart && options.chart.renderTo) || this,
  48. backgroundColor: null,
  49. borderWidth: 0,
  50. type: 'area',
  51. margin: [2, 0, 2, 0],
  52. width: 120,
  53. height: 20,
  54. style: {
  55. overflow: 'visible'
  56. },
  57. skipClone: true
  58. },
  59. title: {
  60. text: ''
  61. },
  62. credits: {
  63. enabled: false
  64. },
  65. xAxis: {
  66. labels: {
  67. enabled: false
  68. },
  69. title: {
  70. text: null
  71. },
  72. startOnTick: false,
  73. endOnTick: false,
  74. tickPositions: []
  75. },
  76. yAxis: {
  77. endOnTick: false,
  78. startOnTick: false,
  79. labels: {
  80. enabled: false
  81. },
  82. title: {
  83. text: null
  84. },
  85. tickPositions: [0]
  86. },
  87. legend: {
  88. enabled: false
  89. },
  90. tooltip: {
  91. backgroundColor: null,
  92. borderWidth: 0,
  93. shadow: false,
  94. useHTML: true,
  95. hideDelay: 0,
  96. shared: true,
  97. padding: 0,
  98. positioner: function (w, h, point) {
  99. return { x: point.plotX - w / 2, y: point.plotY - h};
  100. }
  101. },
  102. plotOptions: {
  103. series: {
  104. animation: false,
  105. lineWidth: 1,
  106. shadow: false,
  107. states: {
  108. hover: {
  109. lineWidth: 1
  110. }
  111. },
  112. marker: {
  113. radius: 1,
  114. states: {
  115. hover: {
  116. radius: 2
  117. }
  118. }
  119. },
  120. fillOpacity: 0.25
  121. },
  122. column: {
  123. negativeColor: '#910000',
  124. borderColor: 'silver'
  125. }
  126. }
  127. };
  128. options = Highcharts.merge(defaultOptions, options);
  129. return new Highcharts.Chart(options, callback);
  130. };
  131. var start = +new Date(),
  132. $tds = $("td[data-sparkline]"),
  133. fullLen = $tds.length,
  134. n = 0;
  135. // Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
  136. // can take some seconds, so we split the input into chunks and apply them in timeouts
  137. // in order avoid locking up the browser process and allow interaction.
  138. function doChunk() {
  139. var time = +new Date(),
  140. i,
  141. len = $tds.length,
  142. $td,
  143. stringdata,
  144. arr,
  145. data,
  146. chart;
  147. for (i = 0; i < len; i += 1) {
  148. $td = $($tds[i]);
  149. stringdata = $td.data('sparkline');
  150. arr = stringdata.split('; ');
  151. data = $.map(arr[0].split(', '), parseFloat);
  152. chart = {};
  153. if (arr[1]) {
  154. chart.type = arr[1];
  155. }
  156. $td.highcharts('SparkLine', {
  157. series: [{
  158. data: data,
  159. pointStart: 1
  160. }],
  161. tooltip: {
  162. headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
  163. pointFormat: '<b>{point.y}.000</b> USD'
  164. },
  165. chart: chart
  166. });
  167. n += 1;
  168. // If the process takes too much time, run a timeout to allow interaction with the browser
  169. if (new Date() - time > 500) {
  170. $tds.splice(0, i + 1);
  171. setTimeout(doChunk, 0);
  172. break;
  173. }
  174. // Print a feedback on the performance
  175. if (n === fullLen) {
  176. $('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
  177. }
  178. }
  179. }
  180. doChunk();
  181. });
  182. </script>
  183. </head>
  184. <body>
  185. <script src="../../js/highcharts.js"></script>
  186. <div id="result"></div>
  187. <table id="table-sparkline">
  188. <thead>
  189. <tr>
  190. <th>State</th>
  191. <th>Income</th>
  192. <th>Income per quarter</th>
  193. <th>Costs</th>
  194. <th>Costs per quarter</th>
  195. <th>Result</th>
  196. <th>Result per quarter</th>
  197. </tr>
  198. </thead>
  199. <tbody id="tbody-sparkline">
  200. <tr>
  201. <th>Alabama</th>
  202. <td>254</td>
  203. <td data-sparkline="71, 78, 39, 66 "/>
  204. <td>296</td>
  205. <td data-sparkline="68, 52, 80, 96 "/>
  206. <td>-42</td>
  207. <td data-sparkline="3, 26, -41, -30 ; column"/>
  208. </tr>
  209. <tr>
  210. <th>Alaska</th>
  211. <td>246</td>
  212. <td data-sparkline="87, 44, 74, 41 "/>
  213. <td>181</td>
  214. <td data-sparkline="29, 54, 73, 25 "/>
  215. <td>65</td>
  216. <td data-sparkline="58, -10, 1, 16 ; column"/>
  217. </tr>
  218. <tr>
  219. <th>Arizona</th>
  220. <td>101</td>
  221. <td data-sparkline="56, 12, 8, 25 "/>
  222. <td>191</td>
  223. <td data-sparkline="69, 14, 53, 55 "/>
  224. <td>-90</td>
  225. <td data-sparkline="-13, -2, -45, -30 ; column"/>
  226. </tr>
  227. <tr>
  228. <th>Arkansas</th>
  229. <td>303</td>
  230. <td data-sparkline="81, 50, 78, 94 "/>
  231. <td>76</td>
  232. <td data-sparkline="36, 15, 14, 11 "/>
  233. <td>227</td>
  234. <td data-sparkline="45, 35, 64, 83 ; column"/>
  235. </tr>
  236. <tr>
  237. <th>California</th>
  238. <td>200</td>
  239. <td data-sparkline="61, 80, 10, 49 "/>
  240. <td>217</td>
  241. <td data-sparkline="100, 8, 52, 57 "/>
  242. <td>-17</td>
  243. <td data-sparkline="-39, 72, -42, -8 ; column"/>
  244. </tr>
  245. <tr>
  246. <th>Colorado</th>
  247. <td>118</td>
  248. <td data-sparkline="13, 48, 21, 36 "/>
  249. <td>273</td>
  250. <td data-sparkline="98, 86, 8, 81 "/>
  251. <td>-155</td>
  252. <td data-sparkline="-85, -38, 13, -45 ; column"/>
  253. </tr>
  254. <tr>
  255. <th>Connecticut</th>
  256. <td>201</td>
  257. <td data-sparkline="6, 64, 44, 87 "/>
  258. <td>148</td>
  259. <td data-sparkline="60, 13, 73, 2 "/>
  260. <td>53</td>
  261. <td data-sparkline="-54, 51, -29, 85 ; column"/>
  262. </tr>
  263. <tr>
  264. <th>Delaware</th>
  265. <td>161</td>
  266. <td data-sparkline="7, 27, 49, 78 "/>
  267. <td>298</td>
  268. <td data-sparkline="19, 90, 100, 89 "/>
  269. <td>-137</td>
  270. <td data-sparkline="-12, -63, -51, -11 ; column"/>
  271. </tr>
  272. <tr>
  273. <th>District of Columbia</th>
  274. <td>106</td>
  275. <td data-sparkline="18, 39, 27, 22 "/>
  276. <td>185</td>
  277. <td data-sparkline="62, 97, 24, 2 "/>
  278. <td>-79</td>
  279. <td data-sparkline="-44, -58, 3, 20 ; column"/>
  280. </tr>
  281. <tr>
  282. <th>Florida</th>
  283. <td>249</td>
  284. <td data-sparkline="51, 24, 90, 84 "/>
  285. <td>244</td>
  286. <td data-sparkline="47, 40, 74, 83 "/>
  287. <td>5</td>
  288. <td data-sparkline="4, -16, 16, 1 ; column"/>
  289. </tr>
  290. <tr>
  291. <th>Georgia</th>
  292. <td>183</td>
  293. <td data-sparkline="36, 80, 39, 28 "/>
  294. <td>212</td>
  295. <td data-sparkline="43, 25, 52, 92 "/>
  296. <td>-29</td>
  297. <td data-sparkline="-7, 55, -13, -64 ; column"/>
  298. </tr>
  299. <tr>
  300. <th>Hawaii</th>
  301. <td>232</td>
  302. <td data-sparkline="73, 34, 74, 51 "/>
  303. <td>172</td>
  304. <td data-sparkline="1, 83, 49, 39 "/>
  305. <td>60</td>
  306. <td data-sparkline="72, -49, 25, 12 ; column"/>
  307. </tr>
  308. <tr>
  309. <th>Idaho</th>
  310. <td>166</td>
  311. <td data-sparkline="25, 43, 31, 67 "/>
  312. <td>152</td>
  313. <td data-sparkline="30, 30, 75, 17 "/>
  314. <td>14</td>
  315. <td data-sparkline="-5, 13, -44, 50 ; column"/>
  316. </tr>
  317. <tr>
  318. <th>Illinois</th>
  319. <td>336</td>
  320. <td data-sparkline="56, 84, 98, 98 "/>
  321. <td>151</td>
  322. <td data-sparkline="61, 12, 77, 1 "/>
  323. <td>185</td>
  324. <td data-sparkline="-5, 72, 21, 97 ; column"/>
  325. </tr>
  326. <tr>
  327. <th>Indiana</th>
  328. <td>216</td>
  329. <td data-sparkline="52, 87, 64, 13 "/>
  330. <td>216</td>
  331. <td data-sparkline="2, 47, 94, 73 "/>
  332. <td>0</td>
  333. <td data-sparkline="50, 40, -30, -60 ; column"/>
  334. </tr>
  335. <tr>
  336. <th>Iowa</th>
  337. <td>135</td>
  338. <td data-sparkline="41, 45, 19, 30 "/>
  339. <td>159</td>
  340. <td data-sparkline="17, 34, 45, 63 "/>
  341. <td>-24</td>
  342. <td data-sparkline="24, 11, -26, -33 ; column"/>
  343. </tr>
  344. <tr>
  345. <th>Kansas</th>
  346. <td>184</td>
  347. <td data-sparkline="52, 43, 65, 24 "/>
  348. <td>215</td>
  349. <td data-sparkline="20, 42, 97, 56 "/>
  350. <td>-31</td>
  351. <td data-sparkline="32, 1, -32, -32 ; column"/>
  352. </tr>
  353. <tr>
  354. <th>Kentucky</th>
  355. <td>289</td>
  356. <td data-sparkline="85, 74, 98, 32 "/>
  357. <td>219</td>
  358. <td data-sparkline="37, 38, 93, 51 "/>
  359. <td>70</td>
  360. <td data-sparkline="48, 36, 5, -19 ; column"/>
  361. </tr>
  362. <tr>
  363. <th>Louisiana</th>
  364. <td>257</td>
  365. <td data-sparkline="89, 18, 87, 63 "/>
  366. <td>201</td>
  367. <td data-sparkline="19, 54, 35, 93 "/>
  368. <td>56</td>
  369. <td data-sparkline="70, -36, 52, -30 ; column"/>
  370. </tr>
  371. <tr>
  372. <th>Maine</th>
  373. <td>194</td>
  374. <td data-sparkline="17, 68, 61, 48 "/>
  375. <td>133</td>
  376. <td data-sparkline="44, 35, 42, 12 "/>
  377. <td>61</td>
  378. <td data-sparkline="-27, 33, 19, 36 ; column"/>
  379. </tr>
  380. <tr>
  381. <th>Maryland</th>
  382. <td>204</td>
  383. <td data-sparkline="74, 12, 74, 44 "/>
  384. <td>157</td>
  385. <td data-sparkline="65, 58, 22, 12 "/>
  386. <td>47</td>
  387. <td data-sparkline="9, -46, 52, 32 ; column"/>
  388. </tr>
  389. <tr>
  390. <th>Massachusetts</th>
  391. <td>172</td>
  392. <td data-sparkline="44, 35, 69, 24 "/>
  393. <td>115</td>
  394. <td data-sparkline="26, 3, 69, 17 "/>
  395. <td>57</td>
  396. <td data-sparkline="18, 32, 0, 7 ; column"/>
  397. </tr>
  398. <tr>
  399. <th>Michigan</th>
  400. <td>177</td>
  401. <td data-sparkline="99, 26, 13, 39 "/>
  402. <td>185</td>
  403. <td data-sparkline="20, 37, 99, 29 "/>
  404. <td>-8</td>
  405. <td data-sparkline="79, -11, -86, 10 ; column"/>
  406. </tr>
  407. <tr>
  408. <th>Minnesota</th>
  409. <td>99</td>
  410. <td data-sparkline="34, 30, 16, 19 "/>
  411. <td>137</td>
  412. <td data-sparkline="49, 43, 24, 21 "/>
  413. <td>-38</td>
  414. <td data-sparkline="-15, -13, -8, -2 ; column"/>
  415. </tr>
  416. <tr>
  417. <th>Mississippi</th>
  418. <td>205</td>
  419. <td data-sparkline="38, 75, 31, 61 "/>
  420. <td>179</td>
  421. <td data-sparkline="0, 68, 100, 11 "/>
  422. <td>26</td>
  423. <td data-sparkline="38, 7, -69, 50 ; column"/>
  424. </tr>
  425. <tr>
  426. <th>Missouri</th>
  427. <td>135</td>
  428. <td data-sparkline="37, 48, 2, 48 "/>
  429. <td>202</td>
  430. <td data-sparkline="41, 64, 17, 80 "/>
  431. <td>-67</td>
  432. <td data-sparkline="-4, -16, -15, -32 ; column"/>
  433. </tr>
  434. <tr>
  435. <th>Montana</th>
  436. <td>195</td>
  437. <td data-sparkline="48, 81, 38, 28 "/>
  438. <td>237</td>
  439. <td data-sparkline="44, 33, 86, 74 "/>
  440. <td>-42</td>
  441. <td data-sparkline="4, 48, -48, -46 ; column"/>
  442. </tr>
  443. <tr>
  444. <th>Nebraska</th>
  445. <td>286</td>
  446. <td data-sparkline="98, 55, 82, 51 "/>
  447. <td>232</td>
  448. <td data-sparkline="89, 54, 28, 61 "/>
  449. <td>54</td>
  450. <td data-sparkline="9, 1, 54, -10 ; column"/>
  451. </tr>
  452. <tr>
  453. <th>Nevada</th>
  454. <td>221</td>
  455. <td data-sparkline="66, 4, 57, 94 "/>
  456. <td>214</td>
  457. <td data-sparkline="59, 39, 94, 22 "/>
  458. <td>7</td>
  459. <td data-sparkline="7, -35, -37, 72 ; column"/>
  460. </tr>
  461. <tr>
  462. <th>New Hampshire</th>
  463. <td>136</td>
  464. <td data-sparkline="32, 21, 1, 82 "/>
  465. <td>306</td>
  466. <td data-sparkline="88, 85, 65, 68 "/>
  467. <td>-170</td>
  468. <td data-sparkline="-56, -64, -64, 14 ; column"/>
  469. </tr>
  470. <tr>
  471. <th>New Jersey</th>
  472. <td>194</td>
  473. <td data-sparkline="31, 40, 24, 99 "/>
  474. <td>147</td>
  475. <td data-sparkline="7, 45, 12, 83 "/>
  476. <td>47</td>
  477. <td data-sparkline="24, -5, 12, 16 ; column"/>
  478. </tr>
  479. <tr>
  480. <th>New Mexico</th>
  481. <td>207</td>
  482. <td data-sparkline="66, 93, 18, 30 "/>
  483. <td>261</td>
  484. <td data-sparkline="97, 28, 79, 57 "/>
  485. <td>-54</td>
  486. <td data-sparkline="-31, 65, -61, -27 ; column"/>
  487. </tr>
  488. <tr>
  489. <th>New York</th>
  490. <td>316</td>
  491. <td data-sparkline="48, 95, 76, 97 "/>
  492. <td>193</td>
  493. <td data-sparkline="68, 5, 97, 23 "/>
  494. <td>123</td>
  495. <td data-sparkline="-20, 90, -21, 74 ; column"/>
  496. </tr>
  497. <tr>
  498. <th>North Carolina</th>
  499. <td>175</td>
  500. <td data-sparkline="31, 71, 2, 71 "/>
  501. <td>188</td>
  502. <td data-sparkline="93, 5, 81, 9 "/>
  503. <td>-13</td>
  504. <td data-sparkline="-62, 66, -79, 62 ; column"/>
  505. </tr>
  506. <tr>
  507. <th>North Dakota</th>
  508. <td>181</td>
  509. <td data-sparkline="3, 90, 62, 26 "/>
  510. <td>288</td>
  511. <td data-sparkline="70, 63, 82, 73 "/>
  512. <td>-107</td>
  513. <td data-sparkline="-67, 27, -20, -47 ; column"/>
  514. </tr>
  515. <tr>
  516. <th>Ohio</th>
  517. <td>189</td>
  518. <td data-sparkline="70, 50, 6, 63 "/>
  519. <td>163</td>
  520. <td data-sparkline="21, 94, 4, 44 "/>
  521. <td>26</td>
  522. <td data-sparkline="49, -44, 2, 19 ; column"/>
  523. </tr>
  524. <tr>
  525. <th>Oklahoma</th>
  526. <td>188</td>
  527. <td data-sparkline="66, 46, 53, 23 "/>
  528. <td>172</td>
  529. <td data-sparkline="26, 25, 35, 86 "/>
  530. <td>16</td>
  531. <td data-sparkline="40, 21, 18, -63 ; column"/>
  532. </tr>
  533. <tr>
  534. <th>Oregon</th>
  535. <td>165</td>
  536. <td data-sparkline="82, 31, 38, 14 "/>
  537. <td>257</td>
  538. <td data-sparkline="91, 9, 80, 77 "/>
  539. <td>-92</td>
  540. <td data-sparkline="-9, 22, -42, -63 ; column"/>
  541. </tr>
  542. <tr>
  543. <th>Pennsylvania</th>
  544. <td>268</td>
  545. <td data-sparkline="33, 88, 82, 65 "/>
  546. <td>129</td>
  547. <td data-sparkline="30, 29, 41, 29 "/>
  548. <td>139</td>
  549. <td data-sparkline="3, 59, 41, 36 ; column"/>
  550. </tr>
  551. <tr>
  552. <th>Rhode Island</th>
  553. <td>164</td>
  554. <td data-sparkline="8, 86, 32, 38 "/>
  555. <td>182</td>
  556. <td data-sparkline="88, 8, 18, 68 "/>
  557. <td>-18</td>
  558. <td data-sparkline="-80, 78, 14, -30 ; column"/>
  559. </tr>
  560. <tr>
  561. <th>South Carolina</th>
  562. <td>91</td>
  563. <td data-sparkline="24, 18, 0, 49 "/>
  564. <td>193</td>
  565. <td data-sparkline="72, 62, 21, 38 "/>
  566. <td>-102</td>
  567. <td data-sparkline="-48, -44, -21, 11 ; column"/>
  568. </tr>
  569. <tr>
  570. <th>South Dakota</th>
  571. <td>184</td>
  572. <td data-sparkline="73, 17, 64, 30 "/>
  573. <td>221</td>
  574. <td data-sparkline="21, 91, 57, 52 "/>
  575. <td>-37</td>
  576. <td data-sparkline="52, -74, 7, -22 ; column"/>
  577. </tr>
  578. <tr>
  579. <th>Tennessee</th>
  580. <td>233</td>
  581. <td data-sparkline="92, 24, 25, 92 "/>
  582. <td>131</td>
  583. <td data-sparkline="5, 18, 42, 66 "/>
  584. <td>102</td>
  585. <td data-sparkline="87, 6, -17, 26 ; column"/>
  586. </tr>
  587. <tr>
  588. <th>Texas</th>
  589. <td>211</td>
  590. <td data-sparkline="33, 80, 68, 30 "/>
  591. <td>225</td>
  592. <td data-sparkline="86, 58, 36, 45 "/>
  593. <td>-14</td>
  594. <td data-sparkline="-53, 22, 32, -15 ; column"/>
  595. </tr>
  596. <tr>
  597. <th>Utah</th>
  598. <td>362</td>
  599. <td data-sparkline="89, 98, 96, 79 "/>
  600. <td>225</td>
  601. <td data-sparkline="35, 51, 88, 51 "/>
  602. <td>137</td>
  603. <td data-sparkline="54, 47, 8, 28 ; column"/>
  604. </tr>
  605. <tr>
  606. <th>Vermont</th>
  607. <td>119</td>
  608. <td data-sparkline="4, 19, 56, 40 "/>
  609. <td>152</td>
  610. <td data-sparkline="17, 66, 27, 42 "/>
  611. <td>-33</td>
  612. <td data-sparkline="-13, -47, 29, -2 ; column"/>
  613. </tr>
  614. <tr>
  615. <th>Virginia</th>
  616. <td>127</td>
  617. <td data-sparkline="24, 27, 41, 35 "/>
  618. <td>71</td>
  619. <td data-sparkline="30, 2, 36, 3 "/>
  620. <td>56</td>
  621. <td data-sparkline="-6, 25, 5, 32 ; column"/>
  622. </tr>
  623. <tr>
  624. <th>Washington</th>
  625. <td>165</td>
  626. <td data-sparkline="40, 11, 63, 51 "/>
  627. <td>245</td>
  628. <td data-sparkline="46, 41, 94, 64 "/>
  629. <td>-80</td>
  630. <td data-sparkline="-6, -30, -31, -13 ; column"/>
  631. </tr>
  632. <tr>
  633. <th>West Virginia</th>
  634. <td>248</td>
  635. <td data-sparkline="66, 56, 97, 29 "/>
  636. <td>171</td>
  637. <td data-sparkline="65, 53, 37, 16 "/>
  638. <td>77</td>
  639. <td data-sparkline="1, 3, 60, 13 ; column"/>
  640. </tr>
  641. <tr>
  642. <th>Wisconsin</th>
  643. <td>183</td>
  644. <td data-sparkline="24, 55, 21, 83 "/>
  645. <td>224</td>
  646. <td data-sparkline="80, 64, 13, 67 "/>
  647. <td>-41</td>
  648. <td data-sparkline="-56, -9, 8, 16 ; column"/>
  649. </tr>
  650. <tr>
  651. <th>Wyoming</th>
  652. <td>231</td>
  653. <td data-sparkline="52, 49, 97, 33 "/>
  654. <td>251</td>
  655. <td data-sparkline="96, 50, 23, 82 "/>
  656. <td>-20</td>
  657. <td data-sparkline="-44, -1, 74, -49 ; column"/>
  658. </tr>
  659. </tbody>
  660. </table>
  661. </body>
  662. </html>