• 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 {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #myChart {
            height: 100%;
            width: 100%;
            min-height: 150px;
        }

        .zc-ref {
            display: none;
        }

        zing-grid[loading] {
            height: 450px;
        }
    </style>
</head>

<body>
    <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
            "type": "venn",
            "series": [{
                    "values": [100],
                    "join": [15]
                },
                {
                    "values": [100],
                    "join": [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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>
    html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}
    var myConfig = {
  "type":"venn",
  "series":[
    {
      "values":[100],
      "join":[15]
    },
    {
      "values":[100],
      "join":[15]
    }
  ]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: "100%", 
	width: "100%" 
});