• 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>
            @import 'https://fonts.googleapis.com/css?family=Open+Sans';
    
            html,
            body {
                width: 100%;
                height: 100%;
            }
    
            #myChart {
                width: 100%;
                height: 100%;
                min-height: 250px;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                type: "pie",
                plot: {
                    borderColor: "#2B313B",
                    borderWidth: 5,
                    // slice: 90,
                    valueBox: {
                        placement: 'out',
                        text: '%t\n%npv%',
                        fontFamily: "Open Sans"
                    },
                    tooltip: {
                        fontSize: '18',
                        fontFamily: "Open Sans",
                        padding: "5 10",
                        text: "%npv%"
                    },
                    animation: {
                        effect: 2,
                        method: 5,
                        speed: 900,
                        sequence: 1,
                        delay: 3000
                    }
                },
                source: {
                    text: 'gs.statcounter.com',
                    fontColor: "#8e99a9",
                    fontFamily: "Open Sans"
                },
                title: {
                    fontColor: "#8e99a9",
                    text: 'Global Browser Usage',
                    align: "left",
                    offsetX: 10,
                    fontFamily: "Open Sans",
                    fontSize: 25
                },
                subtitle: {
                    offsetX: 10,
                    offsetY: 10,
                    fontColor: "#8e99a9",
                    fontFamily: "Open Sans",
                    fontSize: "16",
                    text: 'May 2016',
                    align: "left"
                },
                plotarea: {
                    margin: "20 0 0 0"
                },
                series: [{
                        values: [11.38],
                        text: "Internet Explorer",
                        backgroundColor: '#50ADF5',
                    },
                    {
                        values: [56.94],
                        text: "Chrome",
                        backgroundColor: '#FF7965',
                        detached: true
                    },
                    {
                        values: [14.52],
                        text: 'Firefox',
                        backgroundColor: '#FFCB45',
                        detached: true
                    },
                    {
                        text: 'Safari',
                        values: [9.69],
                        backgroundColor: '#6877e5'
                    },
                    {
                        text: 'Other',
                        values: [7.48],
                        backgroundColor: '#6FB07F'
                    }
                ]
            };
    
            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/">Charts by ZingChart</a></div>
    	</body>
    </html>
    @import 'https://fonts.googleapis.com/css?family=Open+Sans';
    
    html,body {
      width:100%;
      height:100%;
    }
    #myChart {
      width:100%;
      height:100%;
      min-height:250px;
    }
    .zc-ref {
      display: none;
    }
    var myConfig = {
     	type: "pie", 
     	plot: {
     	  borderColor: "#2B313B",
     	  borderWidth: 5,
     	  // slice: 90,
     	  valueBox: {
     	    placement: 'out',
     	    text: '%t\n%npv%',
     	    fontFamily: "Open Sans"
     	  },
     	  tooltip:{
     	    fontSize: '18',
     	    fontFamily: "Open Sans",
     	    padding: "5 10",
     	    text: "%npv%"
     	  },
     	  animation:{
          effect: 2, 
          method: 5,
          speed: 900,
          sequence: 1,
          delay: 3000
        }
     	},
     	source: {
     	  text: 'gs.statcounter.com',
     	  fontColor: "#8e99a9",
     	  fontFamily: "Open Sans"
     	},
     	title: {
     	  fontColor: "#8e99a9",
     	  text: 'Global Browser Usage',
     	  align: "left",
     	  offsetX: 10,
     	  fontFamily: "Open Sans",
     	  fontSize: 25
     	},
     	subtitle: {
     	  offsetX: 10,
     	  offsetY: 10,
     	  fontColor: "#8e99a9",
     	  fontFamily: "Open Sans",
     	  fontSize: "16",
     	  text: 'May 2016',
     	  align: "left"
     	},
     	plotarea: {
     	  margin: "20 0 0 0"  
     	},
    	series : [
    		{
    			values : [11.38],
    			text: "Internet Explorer",
    		  backgroundColor: '#50ADF5',
    		},
    		{
    		  values: [56.94],
    		  text: "Chrome",
    		  backgroundColor: '#FF7965',
    		  detached:true
    		},
    		{
    		  values: [14.52],
    		  text: 'Firefox',
    		  backgroundColor: '#FFCB45',
    		  detached:true
    		},
    		{
    		  text: 'Safari',
    		  values: [9.69],
    		  backgroundColor: '#6877e5'
    		},
    		{
    		  text: 'Other',
    		  values: [7.48],
    		  backgroundColor: '#6FB07F'
    		}
    	]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: '100%', 
    	width: '100%' 
    });