• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <style>
            * {
                font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
                font-size: 12px;
            }
        </style>
        <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    
    
        <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 style="padding:5px;">
            <select id="n">
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7" selected="selected">7</option>
            </select> elements,
            <select id="a">
                <option value="180">180</option>
                <option value="270">270</option>
                <option value="360" selected="selected">360</option>
            </select> aperture, starting at
            <select id="ra">
                <option value="0">0</option>
                <option value="45">45</option>
                <option value="90">90</option>
                <option value="135">135</option>
                <option value="180">180</option>
                <option value="225">225</option>
                <option value="270" selected="selected">270</option>
                <option value="315">315</option>
            </select> degrees, with
            <select id="an">
                <option value="-1" selected="selected">no animation</option>
                <option value="0">effect 0</option>
                <option value="1">effect 1</option>
                <option value="2">effect 2</option>
                <option value="3">effect 3</option>
                <option value="4">effect 4</option>
            </select>,
            <select id="s">
                <option value="0" selected="selected">non-sequenced</option>
                <option value="1">in sequence</option>
            </select>
            <button id="r">Render</button>
        </div>
    
        <div id="zc"></div>
    
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var aPalette = ['#F4C62B', '#F8931F', '#8CC63E', '#93268F', '#EA1F78', '#828BC4', '#EC7A9C', '#0083CB'];
            var aGradientColors = ['#ECCD63', '#EFB060', '#9FC26E', '#A65FA1', '#E15B96', '#A0A5CB', '#DF97AD', '#459BCA'];
            var aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic10', 'ic06', 'ic07'];
    
            var aText = [
                'Lorem ipsum<br>dolor sit amet',
                'Lorem ipsum<br>dolor sit amet',
                'Lorem ipsum<br>dolor sit amet',
                'Lorem ipsum<br>dolor sit amet',
                'Lorem ipsum<br>dolor sit amet',
                'Lorem ipsum<br>dolor sit amet',
                'Lorem ipsum<br>dolor sit amet'
            ];
    
            var aTooltipText = [
                'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
                'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
            ];
    
            var render = function() {
    
                var cdata = {
                    resources: [{
                        type: 'css',
                        url: 'https://fonts.googleapis.com/css?family=Exo+2'
                    }],
    
                    type: 'pie',
                    plotarea: {
                        margin: 0
                    },
    
                    scaleR: {
                        aperture: parseInt(a.value, 10),
                        refAngle: parseInt(ra.value, 10)
                    },
    
                    plot: {
                        detach: false,
                        borderWidth: 8,
                        borderColor: '#FFF',
                        slice: '30%',
                        pieTransform: 'none',
                        hoverState: {
                            visible: false
                        }
                    },
                    series: []
                };
    
                if (an.value !== '-1') {
                    cdata['plot'].animation = {
                        speed: 200,
                        method: 0,
                        effect: parseInt(an.value, 10),
                        sequence: parseInt(s.value, 10)
                    };
                }
    
                var items = parseInt(n.value, 10);
    
                for (var i = 0; i < items; i++) {
                    var no = i + 1;
                    cdata['series'].push({
                        values: [1],
                        tooltipText: aTooltipText[i],
                        dataNo: ((no <= 9) ? '0' + no : no),
                        valueBox: [{
                                width: 48,
                                height: 48,
                                align: 'center',
                                placement: 'fixed=94%;50%',
                                borderRadius: 48,
                                backgroundColor: aPalette[i],
                                fontSize: 24,
                                shadow: false,
                                color: '#FFF',
                                decimals: 0,
                                fontFamily: '"Exo 2"',
                                text: '%data-no'
                            },
                            {
                                align: 'left',
                                placement: 'fixed=50%;50%;+0',
                                backgroundColor: 'none',
                                shadow: false,
                                fontWeight: 'none',
                                fontFamily: '"Exo 2"',
                                fontSize: 12,
                                text: aText[i]
                            }
                        ],
                        backgroundColor: aPalette[i],
                        gradientColors: [aPalette[i], aPalette[i], aGradientColors[i], aPalette[i], aPalette[i]].join(' '),
                        gradientStops: [0.001, 0.30, 0.4, 0.401, 0.99].join(' ')
                    });
                }
    
                WebFont.load({
                    google: {
                        families: ['Exo 2']
                    },
                    active: function() {
    
                        zingchart.render({
                            id: 'zc',
                            width: 450,
                            height: 450,
                            output: 'svg',
                            data: cdata,
                            events: {
                                animation_end: function(p) {
                                    if (an.value !== '-1') {
                                        addElements(p);
                                    }
                                },
                                load: function(p) {
                                    if (an.value === '-1') {
                                        addElements(p);
                                    }
                                }
                            }
                        });
                    }
                });
            }
    
            window.addEventListener('load', function() {
    
                r.addEventListener('click', function() {
                    render();
                });
                render();
    
    
                window.addElements = function(p) {
                    var iPlots = zingchart.exec(p.id, 'getplotlength');
                    var aObjects = [],
                        oInfo;
    
                    for (var i = 0; i < iPlots; i++) {
                        oInfo = zingchart.exec(p.id, 'getobjectinfo', {
                            object: 'node',
                            plotindex: i,
                            nodeindex: 0
                        });
                    }
    
                    aObjects.push({
                        x: oInfo.x,
                        y: oInfo.y,
                        width: 1.75 * oInfo.slice * oInfo.size,
                        fontFamily: '"Exo 2"',
                        fontSize: 14,
                        align: 'center',
                        fontWeight: 600,
                        color: '#666',
                        anchor: 'c',
                        text: '<span style="font-size:19px;font-weight:900;color:#DE1E19">BUSINESS</span><br><span>INFOGRAPHIC</span>'
                    });
    
                    zingchart.exec(p.id, 'addobject', {
                        type: 'label',
                        data: aObjects
                    });
                };
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    		<style>
    	  * { 
    	    font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans';
    	    font-size:12px;
    	  }
    	</style>
    	<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    	
    	<div style="padding:5px;">
    	<select id="n">
    		<option value="3">3</option>
    		<option value="4">4</option>
    		<option value="5">5</option>
    		<option value="6">6</option>
    		<option value="7" selected="selected">7</option>
    	</select> elements, 
    	<select id="a">
    		<option value="180">180</option>
    		<option value="270">270</option>
    		<option value="360" selected="selected">360</option>
    	</select> aperture, starting at 
    	<select id="ra">
    		<option value="0">0</option>
    		<option value="45">45</option>
    		<option value="90">90</option>
    		<option value="135">135</option>
    		<option value="180">180</option>
    		<option value="225">225</option>
    		<option value="270" selected="selected">270</option>
    		<option value="315">315</option>
    	</select> degrees, with
    	<select id="an">
    		<option value="-1" selected="selected">no animation</option>
    		<option value="0">effect 0</option>
    		<option value="1">effect 1</option>
    		<option value="2">effect 2</option>
    		<option value="3">effect 3</option>
    		<option value="4">effect 4</option>
    	</select>, 
    	<select id="s">
    		<option value="0" selected="selected">non-sequenced</option>
    		<option value="1">in sequence</option>
    	</select>
    	<button id="r">Render</button>
    </div>
    
    <div id="zc"></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 aPalette = ['#F4C62B', '#F8931F', '#8CC63E', '#93268F', '#EA1F78', '#828BC4', '#EC7A9C', '#0083CB'];
    var aGradientColors = ['#ECCD63','#EFB060','#9FC26E','#A65FA1','#E15B96','#A0A5CB','#DF97AD','#459BCA'];
    var aIcons = ['ic00', 'ic01', 'ic02', 'ic03', 'ic04', 'ic10', 'ic06', 'ic07'];
    
    var aText = [
    	'Lorem ipsum<br>dolor sit amet', 
    	'Lorem ipsum<br>dolor sit amet', 
    	'Lorem ipsum<br>dolor sit amet', 
    	'Lorem ipsum<br>dolor sit amet', 
    	'Lorem ipsum<br>dolor sit amet', 
    	'Lorem ipsum<br>dolor sit amet', 
    	'Lorem ipsum<br>dolor sit amet'
    ];
    
    var aTooltipText = [
    	'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum',
    	'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'
    ];
    
    var render = function() {
    
    	var cdata = {
    		resources : [
    			{
    				type : 'css',
    				url : 'https://fonts.googleapis.com/css?family=Exo+2'
    			}
    		],
    		
    		type : 'pie',
    		plotarea : {
    			margin : 0
    		},
    
    		scaleR : {
    			aperture : parseInt(a.value, 10),
    			refAngle : parseInt(ra.value, 10)
    		},
    
    		plot : {
    			detach : false,
    			borderWidth : 8,
    			borderColor : '#FFF',
    			slice : '30%',
    			pieTransform : 'none',
    			hoverState : {
    				visible : false
    			}
    		},
    		series : []
    	};
    
    	if (an.value !== '-1') {
    		cdata['plot'].animation = {
    			speed : 200,
    			method : 0,
    			effect : parseInt(an.value, 10),
    			sequence : parseInt(s.value, 10)
    		};
    	}
    
    	var items = parseInt(n.value, 10);
    
    	for (var i=0;i<items;i++) {
    		var no = i+1;
    		cdata['series'].push({
    			values : [1],
    			tooltipText : aTooltipText[i],
    			dataNo : ((no<=9)?'0'+no:no),
    			valueBox : [
    				{
    					width : 48,
    					height : 48,
    					align : 'center',
    					placement : 'fixed=94%;50%',
    					borderRadius : 48,
    					backgroundColor : aPalette[i],
    					fontSize : 24,
    					shadow : false,
    					color : '#FFF',
    					decimals : 0,
    					fontFamily : '"Exo 2"',
    					text : '%data-no'
    				},
    				{
    					align : 'left',
    					placement : 'fixed=50%;50%;+0',
    					backgroundColor : 'none',
    					shadow : false,
    					fontWeight : 'none',
    					fontFamily : '"Exo 2"',
    					fontSize : 12,
    					text : aText[i]
    				}
    			],
    			backgroundColor : aPalette[i],
    			gradientColors : [aPalette[i], aPalette[i], aGradientColors[i], aPalette[i], aPalette[i]].join(' '),
    			gradientStops : [0.001, 0.30, 0.4, 0.401, 0.99].join(' ')
    		});
    	}
    	
    	WebFont.load({
    		google : {
    			families : ['Exo 2']
    		},
    		active : function() {
    
    			zingchart.render({
    				id : 'zc',
    				width : 450,
    				height : 450,
    				output : 'svg',
    				data : cdata,
    				events : {
    					animation_end : function(p) {
    						if (an.value !== '-1') { 
    							addElements(p);
    						}
    					},
    					load : function(p) {
    						if (an.value === '-1') { 
    							addElements(p);
    						}
    					}
    				}
    			});
    		}
    	});
    }
    
    window.addEventListener('load', function() {
    
    	r.addEventListener('click', function() {
    		render();
    	});
    	render();
    
    
    	window.addElements = function(p) {
    		var iPlots = zingchart.exec(p.id, 'getplotlength');
    		var aObjects = [], oInfo;
    		
    		for (var i=0;i<iPlots;i++) {
    			oInfo = zingchart.exec(p.id, 'getobjectinfo', {
    				object : 'node',
    				plotindex : i,
    				nodeindex : 0
    			});
    		}
    
    		aObjects.push(
    			{
    				x : oInfo.x,
    				y : oInfo.y,
    				width : 1.75*oInfo.slice*oInfo.size,
    				fontFamily : '"Exo 2"',
    				fontSize : 14,
    				align : 'center',
    				fontWeight : 600,
    				color : '#666',
    				anchor : 'c',
    				text : '<span style="font-size:19px;font-weight:900;color:#DE1E19">BUSINESS</span><br><span>INFOGRAPHIC</span>'
    			}
    		);
    
    		zingchart.exec(p.id, 'addobject', {
    			type : 'label',
    			data : aObjects
    		});
    	};
    });