• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body,
            #myChart {
                height: 100%;
                width: 100%;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "type": "funnel",
                "scale-y": {
                    "placement": "opposite",
                    "labels": ["Site Visits", "Trial Downloads", "Quote Requests", "Sales", "Renewals"],
                    "item": {
                        "font-color": "#999999",
                        "font-family": "Georgia"
                    },
                    "guide": {
                        "line-color": "none",
                        "items": [{
                                "background-color": "#fff"
                            },
                            {
                                "background-color": "#e5faff"
                            },
                            {
                                "background-color": "#b3efff"
                            },
                            {
                                "background-color": "#66e0ff"
                            },
                            {
                                "background-color": "#00ccff"
                            }
                        ]
                    }
                },
                "plot": {
                    "min-exit": "10%"
                },
                "series": [{
                        "values": [101]
                    },
                    {
                        "values": [90]
                    },
                    {
                        "values": [60]
                    },
                    {
                        "values": [30]
                    },
                    {
                        "values": [15]
                    }
                ]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: "100%",
                width: "100%"
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id='myChart'></div>
    	</body>
    </html>
    html,body,#myChart{height: 100%;width: 100%;}
    var myConfig = {
      "type":"funnel",
      "scale-y":{
        "placement":"opposite",
        "labels":["Site Visits","Trial Downloads","Quote Requests","Sales","Renewals"],
        "item":{
          "font-color":"#999999",
          "font-family":"Georgia"
        },
        "guide":{
          "line-color":"none",
          "items":[
            {"background-color":"#fff"},
            {"background-color":"#e5faff"},
            {"background-color":"#b3efff"},
            {"background-color":"#66e0ff"},
            {"background-color":"#00ccff"}
          ]
        }
      },
      "plot":{
        "min-exit":"10%"
      },
      "series":[
        {"values":[101]},
        {"values":[90]},
        {"values":[60]},
        {"values":[30]},
        {"values":[15]}
      ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height : "100%", 
    	width: "100%" 
    });