funnel.html 1.8 KB

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