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