serial2.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <!-- AmCharts includes -->
  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. <!-- Export plugin includes and styles -->
  11. <script src="../export.js"></script>
  12. <link type="text/css" href="../export.css" rel="stylesheet">
  13. <style>
  14. body, html {
  15. height: 100%;
  16. padding: 0;
  17. margin: 0;
  18. overflow: hidden;
  19. background-color: #282828;
  20. font-size: 11px;
  21. font-family: Verdana;
  22. }
  23. #chartdiv {
  24. width: 100%;
  25. height: 100%;
  26. }
  27. </style>
  28. <script type="text/javascript">
  29. var chart = AmCharts.makeChart( "chartdiv", {
  30. "type": "serial",
  31. "theme": "dark",
  32. "dataProvider": [ {
  33. "year": 2005,
  34. "income": 23.5,
  35. "expenses": 18.1
  36. }, {
  37. "year": 2006,
  38. "income": 26.2,
  39. "expenses": 22.8
  40. }, {
  41. "year": 2007,
  42. "income": 30.1,
  43. "expenses": 23.9
  44. }, {
  45. "year": 2008,
  46. "income": 29.5,
  47. "expenses": 25.1
  48. }, {
  49. "year": 2009,
  50. "income": 24.6,
  51. "expenses": 25
  52. } ],
  53. "categoryField": "year",
  54. "startDuration": 1,
  55. "rotate": true,
  56. "categoryAxis": {
  57. "gridPosition": "start"
  58. },
  59. "valueAxes": [ {
  60. "position": "bottom",
  61. "title": "Million USD",
  62. "minorGridEnabled": true
  63. } ],
  64. "graphs": [ {
  65. "type": "column",
  66. "title": "Income",
  67. "valueField": "income",
  68. "fillAlphas": 1,
  69. "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
  70. }, {
  71. "type": "line",
  72. "title": "Expenses",
  73. "valueField": "expenses",
  74. "lineThickness": 2,
  75. "bullet": "round",
  76. "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
  77. } ],
  78. "legend": {
  79. "useGraphSettings": true
  80. },
  81. "creditsPosition": "top-right",
  82. "export": {
  83. "enabled": true,
  84. "fileName": "exportedChart",
  85. // set background color for exported image
  86. "backgroundColor": "#282828"
  87. }
  88. } );
  89. </script>
  90. </head>
  91. <body>
  92. <div id="chartdiv"></div>
  93. </body>
  94. </html>