funnel.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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/funnel.js"></script>
  9. <script src="../responsive.min.js"></script>
  10. <style>
  11. body, html {
  12. height: 100%;
  13. padding: 0;
  14. margin: 0;
  15. }
  16. </style>
  17. <script>
  18. var chart = AmCharts.makeChart("chartdiv", {
  19. "type": "funnel",
  20. "dataProvider": [{
  21. "title": "Website visits",
  22. "value": 200
  23. }, {
  24. "title": "Downloads",
  25. "value": 123
  26. }, {
  27. "title": "Requested price list",
  28. "value": 98
  29. }, {
  30. "title": "Contaced for more info",
  31. "value": 72
  32. }, {
  33. "title": "Purchased",
  34. "value": 35
  35. }, {
  36. "title": "Contacted for support",
  37. "value": 35
  38. }, {
  39. "title": "Purchased additional products",
  40. "value": 26
  41. }],
  42. "balloon": {
  43. "fixedPosition": true
  44. },
  45. "legend": {},
  46. "valueField": "value",
  47. "titleField": "title",
  48. "marginRight": 240,
  49. "marginLeft": 50,
  50. "startX": -500,
  51. "depth3D":100,
  52. "angle":40,
  53. "outlineAlpha":1,
  54. "outlineColor":"#FFFFFF",
  55. "outlineThickness":2,
  56. "labelPosition": "right",
  57. "balloonText": "[[title]]: [[value]]n[[description]]",
  58. "responsive": {
  59. "enabled": true
  60. }
  61. });
  62. </script>
  63. </head>
  64. <body>
  65. <div id="chartdiv" style="width: 100%; height: 100%;"></div>
  66. </body>
  67. </html>