index.htm 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Highcharts Example</title>
  7. <style type="text/css">
  8. </style>
  9. </head>
  10. <body>
  11. <script src="../../code/highcharts.js"></script>
  12. <script src="../../code/modules/data.js"></script>
  13. <script src="../../code/modules/exporting.js"></script>
  14. <script src="../../code/modules/export-data.js"></script>
  15. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  16. <table id="datatable">
  17. <thead>
  18. <tr>
  19. <th></th>
  20. <th>Jane</th>
  21. <th>John</th>
  22. </tr>
  23. </thead>
  24. <tbody>
  25. <tr>
  26. <th>Apples</th>
  27. <td>3</td>
  28. <td>4</td>
  29. </tr>
  30. <tr>
  31. <th>Pears</th>
  32. <td>2</td>
  33. <td>0</td>
  34. </tr>
  35. <tr>
  36. <th>Plums</th>
  37. <td>5</td>
  38. <td>11</td>
  39. </tr>
  40. <tr>
  41. <th>Bananas</th>
  42. <td>1</td>
  43. <td>1</td>
  44. </tr>
  45. <tr>
  46. <th>Oranges</th>
  47. <td>2</td>
  48. <td>4</td>
  49. </tr>
  50. </tbody>
  51. </table>
  52. <script type="text/javascript">
  53. Highcharts.chart('container', {
  54. data: {
  55. table: 'datatable'
  56. },
  57. chart: {
  58. type: 'column'
  59. },
  60. title: {
  61. text: 'Data extracted from a HTML table in the page'
  62. },
  63. yAxis: {
  64. allowDecimals: false,
  65. title: {
  66. text: 'Units'
  67. }
  68. },
  69. tooltip: {
  70. formatter: function () {
  71. return '<b>' + this.series.name + '</b><br/>' +
  72. this.point.y + ' ' + this.point.name.toLowerCase();
  73. }
  74. }
  75. });
  76. </script>
  77. </body>
  78. </html>