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.

129 lines
3.9 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  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. <title>amCharts examples</title>
  6. <link rel="stylesheet" href="style.css" type="text/css">
  7. <script src="../amcharts/amcharts.js" type="text/javascript"></script>
  8. <script src="../amcharts/serial.js" type="text/javascript"></script>
  9. <script>
  10. var chart;
  11. var chartData = [
  12. {
  13. "country": "USA",
  14. "visits": 4025
  15. },
  16. {
  17. "country": "China",
  18. "visits": 1882
  19. },
  20. {
  21. "country": "Japan",
  22. "visits": 1809
  23. },
  24. {
  25. "country": "Germany",
  26. "visits": 1322
  27. },
  28. {
  29. "country": "UK",
  30. "visits": 1122
  31. },
  32. {
  33. "country": "France",
  34. "visits": 1114
  35. },
  36. {
  37. "country": "India",
  38. "visits": 984
  39. },
  40. {
  41. "country": "Spain",
  42. "visits": 711
  43. },
  44. {
  45. "country": "Netherlands",
  46. "visits": 665
  47. },
  48. {
  49. "country": "Russia",
  50. "visits": 580
  51. },
  52. {
  53. "country": "South Korea",
  54. "visits": 443
  55. },
  56. {
  57. "country": "Canada",
  58. "visits": 441
  59. },
  60. {
  61. "country": "Brazil",
  62. "visits": 395
  63. },
  64. {
  65. "country": "Italy",
  66. "visits": 386
  67. },
  68. {
  69. "country": "Australia",
  70. "visits": 384
  71. },
  72. {
  73. "country": "Taiwan",
  74. "visits": 338
  75. },
  76. {
  77. "country": "Poland",
  78. "visits": 328
  79. }
  80. ];
  81. AmCharts.ready(function () {
  82. // SERIAL CHART
  83. chart = new AmCharts.AmSerialChart();
  84. chart.dataProvider = chartData;
  85. chart.categoryField = "country";
  86. chart.startDuration = 1;
  87. // AXES
  88. // category
  89. var categoryAxis = chart.categoryAxis;
  90. categoryAxis.labelRotation = 90;
  91. categoryAxis.gridPosition = "start";
  92. // value
  93. // in case you don't want to change default settings of value axis,
  94. // you don't need to create it, as one value axis is created automatically.
  95. // GRAPH
  96. var graph = new AmCharts.AmGraph();
  97. graph.valueField = "visits";
  98. graph.balloonText = "[[category]]: <b>[[value]]</b>";
  99. graph.type = "column";
  100. graph.lineAlpha = 0;
  101. graph.fillAlphas = 0.8;
  102. chart.addGraph(graph);
  103. // CURSOR
  104. var chartCursor = new AmCharts.ChartCursor();
  105. chartCursor.cursorAlpha = 0;
  106. chartCursor.zoomable = false;
  107. chartCursor.categoryBalloonEnabled = false;
  108. chart.addChartCursor(chartCursor);
  109. chart.creditsPosition = "top-right";
  110. chart.write("chartdiv");
  111. });
  112. </script>
  113. </head>
  114. <body>
  115. <div id="chartdiv" style="width: 100%; height: 400px;"></div>
  116. </body>
  117. </html>