• 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: 640px;
            }
        </style>
    </head>
    
    <body>
        <div id="zc"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            window.addEventListener('load', function() {
    
                var pattern = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAFJJREFUWEft1MENACAIQ9HuvzQGE406QHvwH0z0hMADVZXWkfrqfUeDd7LzA4nMj6r7y3612d3zNx4GogD3FLAH2AMYwAAGMIABDGAAAxj42sAAIjn2iJSofAQAAAAASUVORK5CYII=';
                var states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];
                var metrics = ['Schools', 'Hate Crimes', 'Housing', 'Employment', 'Adoption', 'Hospital Visits', 'Marriage'];
                var palette = ['#7EC2EB', '#833C99', '#D1028A', '#87BC38', '#0060A8', '#EFBA4D', '#CE2C20'];
                var levels = {
                    '-1': 'Prohibited or banned',
                    '0': 'No law or unclear',
                    '0.5': 'Limited',
                    '1': 'Maximum'
                };
    
                var cdata = {
                    backgroundColor: '#fff',
                    graphset: [{
                            x: 0,
                            y: 0,
                            width: '100%',
                            height: '100%',
                            backgroundColor: 'none',
                            type: 'radar',
                            plotarea: {
                                margin: 10
                            },
                            scale: {
                                sizeFactor: 0.9
                            },
                            scaleV: {
                                offsetStart: 120,
                                visible: false
                            },
                            scaleK: {
                                values: states,
                                aspect: 'circle',
                                ranged: true,
                                guide: {
                                    visible: false
                                },
                                tick: {
                                    visible: false
                                }
                            },
                            plot: {
                                borderWidth: 1,
                                borderColor: '#fff',
                                angleSpace: 0,
                                animation: {
                                    speed: 50,
                                    effect: 1,
                                    sequence: 1
                                },
                                aspect: 'piano',
                                jsRule: 'plot_jsRule(0)'
                            },
                            tooltip: {
                                padding: 10,
                                fontSize: 13,
                                color: '#fff',
                                backgroundColor: '#333',
                                text: '%plot-text in %scale-key-text: %data-level'
                            },
                            series: []
                        },
                        {
                            x: 0,
                            y: 0,
                            width: '100%',
                            height: '100%',
                            backgroundColor: 'none',
                            type: 'radar',
                            plotarea: {
                                margin: 10
                            },
                            scale: {
                                sizeFactor: 0.275
                            },
                            scaleK: {
                                values: ['Limited', 'Maximum'],
                                aperture: 90,
                                refAngle: 180,
                                ranged: true,
                                item: {
                                    fontSize: 10,
                                    fontWeight: 'bold',
                                    autoRotate: true,
                                    color: '#000'
                                },
                                guide: {
                                    visible: false
                                },
                                tick: {
                                    visible: false
                                }
                            },
                            scaleV: {
                                offsetStart: 10,
                                visible: false
                            },
                            plot: {
                                maxTrackers: 0,
                                aspect: 'piano',
                                angleSpace: 0,
                                borderWidth: 0,
                                jsRule: 'plot_jsRule(1)'
                            },
                            series: [],
                            labels: [{
                                    flat: true,
                                    x: '50%',
                                    y: '50%',
                                    offsetY: 5,
                                    offsetX: -85,
                                    backgroundColor: '#ccc',
                                    backgroundImage: pattern,
                                    alpha: 0.75,
                                    width: 10,
                                    height: 10
                                },
                                {
                                    flat: true,
                                    x: '50%',
                                    y: '50%',
                                    fontSize: 10,
                                    fontWeight: 'bold',
                                    offsetY: 2,
                                    offsetX: -70,
                                    text: 'Prohibited or banned'
                                },
                                {
                                    flat: true,
                                    x: '50%',
                                    y: '50%',
                                    offsetY: 20,
                                    offsetX: -85,
                                    backgroundColor: '#ccc',
                                    width: 10,
                                    height: 10
                                },
                                {
                                    flat: true,
                                    x: '50%',
                                    y: '50%',
                                    offsetY: 17,
                                    offsetX: -70,
                                    fontSize: 10,
                                    fontWeight: 'bold',
                                    text: 'No law or unclear'
                                }
                            ]
                        },
                        {
                            x: 0,
                            y: 0,
                            width: '100%',
                            height: '100%',
                            backgroundColor: 'none',
                            type: 'radar',
                            title: {
                                text: 'Rights by type',
                                y: '50%',
                                offsetY: 40
                            },
                            plotarea: {
                                margin: 10
                            },
                            scale: {
                                sizeFactor: 0.275
                            },
                            scaleK: {
                                visible: false,
                            },
                            scaleV: {
                                offsetStart: 15,
                                offsetEnd: 5,
                                values: metrics,
                                labels: metrics,
                                maxItems: metrics.length,
                                itemsOverlap: true,
                                refLine: {
                                    visible: false
                                },
                                item: {
                                    fontSize: 10,
                                    fontWeight: 'bold',
                                    color: '#000'
                                },
                                guide: {
                                    visible: false
                                },
                                tick: {
                                    visible: false
                                }
                            }
                        }
                    ]
                };
    
                window.plot_jsRule = function(p, chart) {
                    var obj = {};
                    switch (p.value) {
                        case -1:
                            obj = {
                                backgroundColor: '#ccc',
                                backgroundImage: pattern,
                                alpha: 0.75
                            };
                            break;
                        case 0:
                            obj = {
                                backgroundColor: '#ccc'
                            };
                            break;
                        case 0.5:
                            obj = {
                                backgroundColor: palette[p.plotindex],
                                alpha: 0.35
                            };
                            break;
                        case 1:
                            obj = {
                                backgroundColor: palette[p.plotindex],
                                alpha: 1
                            };
                            break;
                    }
                    return obj;
                };
    
                for (var m = 0; m < metrics.length; m++) {
                    var values = [],
                        dataLevels = [];
                    for (var s = 0; s < states.length; s++) {
                        /* 
                        	-1  = Prohibited or banned
                        	0   = No law or unclear
                        	0.5 = Limited
                        	1   = Maximum
                        */
                        var r = Math.random(),
                            v = 0;
                        if (r >= 0 && r < 0.2) {
                            v = -1;
                        } else if (r >= 0.2 && r < 0.4) {
                            v = 0;
                        } else if (r >= 0.4 && r < 0.7) {
                            v = 0.5;
                        } else {
                            v = 1;
                        }
                        values.push(v);
                        dataLevels.push(levels[v]);
                    }
                    cdata.graphset[0].series.push({
                        values: values,
                        text: metrics[m],
                        dataLevel: dataLevels
                    });
                    cdata.graphset[1].series.push({
                        values: [0.5, 1],
                        text: metrics[m]
                    });
                }
    
                zingchart.render({
                    id: 'zc',
                    width: 640,
                    height: 640,
                    output: 'svg',
                    data: cdata
                });
    
            });
        </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="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;
    }
    window.addEventListener('load', function() {
    
    var pattern = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAFJJREFUWEft1MENACAIQ9HuvzQGE406QHvwH0z0hMADVZXWkfrqfUeDd7LzA4nMj6r7y3612d3zNx4GogD3FLAH2AMYwAAGMIABDGAAAxj42sAAIjn2iJSofAQAAAAASUVORK5CYII=';
    var states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];
    var metrics = ['Schools', 'Hate Crimes', 'Housing', 'Employment', 'Adoption', 'Hospital Visits', 'Marriage'];
    var palette = ['#7EC2EB', '#833C99', '#D1028A', '#87BC38', '#0060A8', '#EFBA4D', '#CE2C20'];
    var levels = {
    	'-1'  : 'Prohibited or banned',
    	'0'   : 'No law or unclear',
    	'0.5' : 'Limited',
    	'1'   : 'Maximum'
    };
    
    var cdata = {
    	backgroundColor : '#fff',
    	graphset : [
    		{
    			x : 0,
    			y : 0,
    			width : '100%',
    			height : '100%',
    			backgroundColor : 'none',
    			type : 'radar',
    			plotarea : {
    				margin : 10
    			},
    			scale : {
    				sizeFactor : 0.9
    			},
    			scaleV : {
    				offsetStart : 120,
    				visible : false
    			},
    			scaleK : {
    				values : states,
    				aspect : 'circle',
    				ranged : true,
    				guide : {
    					visible : false
    				},
    				tick : {
    					visible : false
    				}
    			},
    			plot : {
    				borderWidth : 1,
    				borderColor : '#fff',
    				angleSpace : 0,
    				animation : {
    				  speed : 50,
    				  effect : 1,
    				  sequence : 1
    				},
    				aspect : 'piano',
    				jsRule : 'plot_jsRule(0)'
    			},
    			tooltip : {
    				padding : 10,
    				fontSize : 13,
    				color : '#fff',
    				backgroundColor : '#333',
    				text : '%plot-text in %scale-key-text: %data-level'
    			},
    			series : []
    		},
    		{
    			x : 0,
    			y : 0,
    			width : '100%',
    			height : '100%',
    			backgroundColor : 'none',
    			type : 'radar',
    			plotarea : {
    				margin : 10
    			},
    			scale : {
    				sizeFactor : 0.275
    			},
    			scaleK : {
    				values : ['Limited', 'Maximum'],
    				aperture : 90,
    				refAngle : 180,
    				ranged : true,
    				item : {
    					fontSize : 10,
    					fontWeight : 'bold',
    					autoRotate : true,
    					color : '#000'
    				},
    				guide : {
    					visible : false
    				},
    				tick : {
    					visible : false
    				}
    			},
    			scaleV : {
    				offsetStart : 10,
    				visible : false
    			},
    			plot : {
    				maxTrackers : 0,
    				aspect : 'piano',
    				angleSpace : 0,
    				borderWidth : 0,
    				jsRule : 'plot_jsRule(1)'
    			},
    			series : [
    			],
    			labels : [
    				{
    					flat : true,
    					x : '50%',
    					y : '50%',
    					offsetY : 5,
    					offsetX : -85,
    					backgroundColor : '#ccc',
    					backgroundImage : pattern,
    					alpha : 0.75,
    					width : 10,
    					height : 10
    				},
    				{
    					flat : true,
    					x : '50%',
    					y : '50%',
    					fontSize : 10,
    					fontWeight : 'bold',
    					offsetY : 2,
    					offsetX : -70,
    					text : 'Prohibited or banned'
    				},
    				{
    					flat : true,
    					x : '50%',
    					y : '50%',
    					offsetY : 20,
    					offsetX : -85,
    					backgroundColor : '#ccc',
    					width : 10,
    					height : 10
    				},
    				{
    					flat : true,
    					x : '50%',
    					y : '50%',
    					offsetY : 17,
    					offsetX : -70,
    					fontSize : 10,
    					fontWeight : 'bold',
    					text : 'No law or unclear'
    				}
    			]
    		},
    		{
    			x : 0,
    			y : 0,
    			width : '100%',
    			height : '100%',
    			backgroundColor : 'none',
    			type : 'radar',
    			title : {
    				text : 'Rights by type',
    				y : '50%',
    				offsetY : 40
    			},
    			plotarea : {
    				margin : 10
    			},
    			scale : {
    				sizeFactor : 0.275
    			},
    			scaleK : {
    				visible : false,
    			},
    			scaleV : {
    				offsetStart : 15,
    				offsetEnd : 5,
    				values : metrics,
    				labels : metrics,
    				maxItems : metrics.length,
    				itemsOverlap : true,
    				refLine : {
    					visible : false
    				},
    				item : {
    					fontSize : 10,
    					fontWeight : 'bold',
    					color : '#000'
    				},
    				guide : {
    					visible : false
    				},
    				tick : {
    					visible : false
    				}
    			}
    		}
    	]
    };
    
    window.plot_jsRule = function(p, chart) {
    	var obj = {};
    	switch (p.value) {
    		case -1:
    			obj = {
    				backgroundColor : '#ccc',
    				backgroundImage : pattern,
    				alpha : 0.75
    			};
    			break;
    		case 0:
    			obj = {
    				backgroundColor : '#ccc'
    			};
    			break;
    		case 0.5:
    			obj = {
    				backgroundColor : palette[p.plotindex],
    				alpha : 0.35
    			};
    			break;
    		case 1:
    			obj = {
    				backgroundColor : palette[p.plotindex],
    				alpha : 1
    			};
    			break;
    	}
    	return obj;
    };
    
    for (var m=0;m<metrics.length;m++) {
    	var values = [], dataLevels = [];
    	for (var s=0;s<states.length;s++) {
    		/* 
    			-1  = Prohibited or banned
    			0   = No law or unclear
    			0.5 = Limited
    			1   = Maximum
    		*/
    		var r = Math.random(), v = 0;
    		if (r >= 0 && r < 0.2) {
    			v = -1;
    		} else if (r >= 0.2 && r < 0.4) {
    			v = 0;
    		} else if (r >= 0.4 && r < 0.7) {
    			v = 0.5;
    		} else {
    			v = 1;
    		}
    		values.push(v);
    		dataLevels.push(levels[v]);
    	}
    	cdata.graphset[0].series.push({
    		values : values,
    		text : metrics[m],
    		dataLevel : dataLevels
    	});
    	cdata.graphset[1].series.push({
    		values : [0.5, 1],
    		text : metrics[m]
    	});
    }
    
    zingchart.render({
    	id : 'zc',
    	width : 640,
    	height : 640,
    	output : 'svg',
    	data : cdata
    });
    
    });