serial2.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  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, maximum-scale=1">
  6. <title>amCharts Responsive Example</title>
  7. <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
  8. <script src="http://www.amcharts.com/lib/3/serial.js"></script>
  9. <script src="http://www.amcharts.com/lib/3/themes/dark.js"></script>
  10. <script src="../responsive.min.js"></script>
  11. <style>
  12. body, html {
  13. height: 100%;
  14. padding: 0;
  15. margin: 0;
  16. }
  17. </style>
  18. <script>
  19. AmCharts.makeChart("chartdiv", {
  20. "type": "serial",
  21. "theme": "dark",
  22. "dataProvider": [{
  23. "year": 2005,
  24. "income": 23.5,
  25. "expenses": 18.1
  26. }, {
  27. "year": 2006,
  28. "income": 26.2,
  29. "expenses": 22.8
  30. }, {
  31. "year": 2007,
  32. "income": 30.1,
  33. "expenses": 23.9
  34. }, {
  35. "year": 2008,
  36. "income": 29.5,
  37. "expenses": 25.1
  38. }, {
  39. "year": 2009,
  40. "income": 24.6,
  41. "expenses": 25
  42. }],
  43. "categoryField": "year",
  44. "startDuration": 1,
  45. "rotate": true,
  46. "categoryAxis": {
  47. "gridPosition": "start"
  48. },
  49. "valueAxes": [{
  50. "position": "top",
  51. "title": "Million USD",
  52. "minorGridEnabled": true
  53. }],
  54. "graphs": [{
  55. "type": "column",
  56. "title": "Income",
  57. "valueField": "income",
  58. "fillAlphas":1,
  59. "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
  60. }, {
  61. "type": "line",
  62. "title": "Expenses",
  63. "valueField": "expenses",
  64. "lineThickness": 2,
  65. "bullet": "round",
  66. "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
  67. }],
  68. "legend": {
  69. "useGraphSettings": true
  70. },
  71. "creditsPosition": "top-right",
  72. "responsive": {
  73. "enabled": true
  74. }
  75. });
  76. </script>
  77. </head>
  78. <body style="background-color:#282828;">
  79. <div id="chartdiv" style="width: 100%; height: 100%;"></div>
  80. </body>
  81. </html>