• 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: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                type: "pie",
                title: {
                    text: "Deliveries by County",
                },
                legend: {
                    layout: "h",
                    align: "center",
                    verticalAlign: "bottom",
                    toggleAction: "remove",
                    header: {
                        text: "County",
                    },
                    shadow: 0
                },
                plotarea: {
                    y: 150
                },
                plot: {
                    refAngle: 180,
                    size: 250,
                    valueBox: {
                        placement: "in",
                        offsetR: 20
                    }
                },
                scaleR: {
                    aperture: 180
                },
                tooltip: {
                    text: "%t<br>Deliveries: %v<br>Percent of Shirt %npv%",
                    textAlign: "left",
                    shadow: 0,
                    borderRadius: 4,
                    borderWidth: 2,
                    borderColor: "#fff"
                },
                series: [{
                        values: [2645],
                        text: "Los Angeles",
                        backgroundColor: "#2870B1"
                    },
                    {
                        values: [2568],
                        text: "Riverside",
                        backgroundColor: "#BB1FA8"
                    },
                    {
                        values: [1831],
                        text: "San Diego",
                        backgroundColor: "#7E971D"
                    },
    
                    {
                        values: [1111],
                        text: "Orange",
                        backgroundColor: "#FFA72A"
    
                    },
                    {
                        values: [1026],
                        text: "Ventura",
                        backgroundColor: "#54004A"
                    }
                ]
            };
    
            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: "pie",
     	title : {
     	  text : "Deliveries by County",
     	},
     	legend:{
     	  layout: "h",
     	  align: "center",
     	  verticalAlign: "bottom",
     	  toggleAction: "remove",
     	  header: {
     	    text: "County",
     	  },
     	  shadow:0
     	},
     	plotarea: {
     	  y: 150
     	},
     	plot: {
     	  refAngle: 180,
     	  size: 250,
     	  valueBox: {
     	    placement: "in",
     	    offsetR: 20
     	  }
     	},
     	scaleR: {
     	  aperture:180
     	},
     	tooltip : {
     	  text: "%t<br>Deliveries: %v<br>Percent of Shirt %npv%",
     	  textAlign: "left",
     	  shadow: 0,
     	  borderRadius: 4,
     	  borderWidth: 2,
     	  borderColor: "#fff"
     	},
    	series : [
    	  {
    			values : [2645],
    			text: "Los Angeles",
    			backgroundColor:"#2870B1"
    		},
    		{
    			values : [2568],
    			text: "Riverside",
    			backgroundColor:"#BB1FA8"
    		},
    		{
    			values : [1831],
    			text: "San Diego",
    			backgroundColor:"#7E971D"
    		},
    		
    		{
    			values : [1111],
    			text: "Orange",
    			backgroundColor:"#FFA72A"
    			
    		},
    		{
    			values : [1026],
    			text: "Ventura",
    			backgroundColor:"#54004A"
    		}
    	]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: '100%', 
    	width: '100%' 
    });