serial_json.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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 Data Loader 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="../dataloader.min.js"></script>
  10. <style>
  11. body, html {
  12. font-family: Verdana;
  13. font-size: 12px;
  14. }
  15. #chartdiv {
  16. width: 100%;
  17. height: 500px;
  18. }
  19. </style>
  20. <script>
  21. var chart = AmCharts.makeChart("chartdiv", {
  22. "type": "serial",
  23. "dataLoader": {
  24. "url": "data/serial.csv",
  25. "format": "csv",
  26. "showErrors": true,
  27. "noStyles": true,
  28. "async": true,
  29. "reload": 10,
  30. "timestamp": true,
  31. "delimiter": ",",
  32. "useColumnNames": true
  33. },
  34. "rotate": false,
  35. "marginTop": 10,
  36. "categoryField": "year",
  37. "categoryAxis": {
  38. "gridAlpha": 0.07,
  39. "axisColor": "#DADADA",
  40. "startOnAxis": false,
  41. "title": "Year",
  42. "guides": [{
  43. "category": "2001",
  44. "lineColor": "#CC0000",
  45. "lineAlpha": 1,
  46. "dashLength": 2,
  47. "inside": true,
  48. "labelRotation": 90,
  49. "label": "fines for speeding increased"
  50. }, {
  51. "category": "2007",
  52. "lineColor": "#CC0000",
  53. "lineAlpha": 1,
  54. "dashLength": 2,
  55. "inside": true,
  56. "labelRotation": 90,
  57. "label": "motorcycle fee introduced"
  58. }]
  59. },
  60. "valueAxes": [{
  61. "stackType": "regular",
  62. "gridAlpha": 0.07,
  63. "title": "Traffic incidents"
  64. }],
  65. "graphs": [{
  66. "id": "g1",
  67. "type": "column",
  68. "title": "Cars",
  69. "valueField": "cars",
  70. "bullet": "round",
  71. "lineAlpha": 0,
  72. "fillAlphas": 0.6
  73. }, {
  74. "id": "g2",
  75. "type": "column",
  76. "title": "Motorcycles",
  77. "valueField": "motorcycles",
  78. "lineAlpha": 0,
  79. "fillAlphas": 0.6
  80. }, {
  81. "id": "g3",
  82. "type": "column",
  83. "title": "Bicycles",
  84. "valueField": "bicycles",
  85. "lineAlpha": 0,
  86. "fillAlphas": 0.6
  87. }],
  88. "legend": {
  89. "position": "bottom",
  90. "valueText": "[[value]]",
  91. "valueWidth": 100,
  92. "valueAlign": "left",
  93. "equalWidths": false,
  94. "periodValueText": "total: [[value.sum]]"
  95. },
  96. "chartCursor": {
  97. "cursorAlpha": 0
  98. },
  99. "chartScrollbar": {
  100. "color": "FFFFFF"
  101. }
  102. });
  103. </script>
  104. </head>
  105. <body>
  106. <div id="chartdiv"></div>
  107. </body>
  108. </html>