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.

77 lines
1.8 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. polar: true,
  15. type: 'line'
  16. },
  17. title: {
  18. text: 'Budget vs spending',
  19. x: -80
  20. },
  21. pane: {
  22. size: '80%'
  23. },
  24. xAxis: {
  25. categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
  26. 'Information Technology', 'Administration'],
  27. tickmarkPlacement: 'on',
  28. lineWidth: 0
  29. },
  30. yAxis: {
  31. gridLineInterpolation: 'polygon',
  32. lineWidth: 0,
  33. min: 0
  34. },
  35. tooltip: {
  36. shared: true,
  37. pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
  38. },
  39. legend: {
  40. align: 'right',
  41. verticalAlign: 'top',
  42. y: 70,
  43. layout: 'vertical'
  44. },
  45. series: [{
  46. name: 'Allocated Budget',
  47. data: [43000, 19000, 60000, 35000, 17000, 10000],
  48. pointPlacement: 'on'
  49. }, {
  50. name: 'Actual Spending',
  51. data: [50000, 39000, 42000, 31000, 26000, 14000],
  52. pointPlacement: 'on'
  53. }]
  54. });
  55. });
  56. </script>
  57. </head>
  58. <body>
  59. <script src="../../js/highcharts.js"></script>
  60. <script src="../../js/highcharts-more.js"></script>
  61. <script src="../../js/modules/exporting.js"></script>
  62. <div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
  63. </body>
  64. </html>