• 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"
                    }
                },
                "plot": {
                    "value-box": {
                        "text": "%v",
                        "placement": "in",
                        "font-color": "gray",
                        "font-family": "Georgia",
                        "font-size": 12,
                        "font-weight": "normal"
                    },
                    "min-exit": "10%",
                    "hover-state": {
                        "background-color": "purple",
                        "border-color": "gray",
                        "border-width": 3,
                        "line-style": "dashdot"
                    },
                    "tooltip": {
                        "text": "Value: %v<br>Text: %t<br>Percentage (relative to sum of all values): %node-percent-value%<br>Percentage (relative to previous node): %output-percent-value%",
                        "font-family": "Georgia",
                        "font-size": 12
                    }
                },
                "series": [{
                        "values": [101],
                        "text": "Site Visits",
                        "background-color": "red"
                    },
                    {
                        "values": [90],
                        "text": "Trial Downloads",
                        "background-color": "orange"
                    },
                    {
                        "values": [60],
                        "text": "Quote Requests",
                        "background-color": "yellow"
                    },
                    {
                        "values": [30],
                        "text": "Sales",
                        "background-color": "green"
                    },
                    {
                        "values": [15],
                        "text": "Renewals",
                        "background-color": "blue"
                    }
                ]
            };
    
            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"
        }
      },
      "plot":{
        "value-box":{
          "text":"%v",
          "placement":"in",
          "font-color":"gray",
          "font-family":"Georgia",
          "font-size":12,
          "font-weight":"normal"
        },
        "min-exit":"10%",
        "hover-state":{
          "background-color": "purple",
          "border-color":"gray",
          "border-width":3,
          "line-style":"dashdot"
        },
        "tooltip":{
          "text":"Value: %v<br>Text: %t<br>Percentage (relative to sum of all values): %node-percent-value%<br>Percentage (relative to previous node): %output-percent-value%",
          "font-family":"Georgia",
          "font-size":12
        }
      },
      "series":[
        {
          "values":[101],
          "text":"Site Visits",
          "background-color":"red"
        },
        {
          "values":[90],
          "text":"Trial Downloads",
          "background-color":"orange"
        },
        {
          "values":[60],
          "text":"Quote Requests",
          "background-color":"yellow"
        },
        {
          "values":[30],
          "text":"Sales",
          "background-color":"green"
        },
        {
          "values":[15],
          "text":"Renewals",
          "background-color":"blue"
        }
      ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height : "100%", 
    	width: "100%" 
    });