#10509

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/funnel.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
     "type": "funnel",
     "theme": "none",
     "dataProvider": [{
         "title": "Website visits",
         "value": 300
     }, {
         "title": "Downloads",
         "value": 123
     }, {
         "title": "Requested prices",
         "value": 98
     }, {
         "title": "Contaced",
         "value": 72
     }, {
         "title": "Purchased",
         "value": 35
     }, {
         "value": 25
     }, {
         "title": "Purchased more",
         "value": 18
     }],
     "titleField": "title",
     "marginRight": 160,
     "marginLeft": 15,
     "labelPosition": "right",
     "funnelAlpha": 0.9,
     "valueField": "value",
     "startX": 0,
     "neckWidth": "40%",
     "startAlpha": 0,
     "outlineThickness":1,
     "neckHeight": "30%",
     "balloonText": "[[title]]:<b>[[value]]</b>",
    "labelFunction": function ( item, text ) {
        if ( '' == item.title ) {
            //item.tick.node.setAttribute("stroke-opacity",0);
            setTimeout(function() {
                item.tick.node.remove();
            },100);
            return '';
        } else {
            return text;
        }
    },
    "balloonFunction": function ( item, text ) {
        if ( '' == item.title )
            return '';
        else
            return text;
    }
 });