<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" 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;
}
</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
});
});