<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE DATA
// -----------------------------
let pattern =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAFJJREFUWEft1MENACAIQ9HuvzQGE406QHvwH0z0hMADVZXWkfrqfUeDd7LzA4nMj6r7y3612d3zNx4GogD3FLAH2AMYwAAGMIABDGAAAxj42sAAIjn2iJSofAQAAAAASUVORK5CYII=';
let 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',
];
let metrics = [
'Schools',
'Hate Crimes',
'Housing',
'Employment',
'Adoption',
'Hospital Visits',
'Marriage',
];
let palette = [
'#7EC2EB',
'#833C99',
'#D1028A',
'#87BC38',
'#0060A8',
'#EFBA4D',
'#CE2C20',
];
let levels = {
'-1': 'Prohibited or banned',
0: 'No law or unclear',
0.5: 'Limited',
1: 'Maximum',
};
// CHART CONFIG
// -----------------------------
let chartConfig = {
backgroundColor: '#fff',
graphset: [{
type: 'radar',
backgroundColor: 'none',
width: '100%',
height: '100%',
x: '0px',
y: '0px',
plot: {
tooltip: {
text: '%plot-text in %scale-key-text: %data-level',
backgroundColor: '#333',
color: '#fff',
fontSize: '13px',
padding: '10px',
},
angleSpace: 0,
animation: {
effect: 'ANIMATION_FADE_IN',
sequence: 'ANIMATION_BY_PLOT',
speed: 50,
},
aspect: 'piano',
borderColor: '#fff',
borderWidth: '1px',
jsRule: 'plot_jsRule(0)',
},
plotarea: {
margin: '10px',
},
scale: {
sizeFactor: 0.9,
},
scaleK: {
values: states,
aspect: 'circle',
guide: {
visible: false,
},
ranged: true,
tick: {
visible: false,
},
},
scaleV: {
offsetStart: '120px',
visible: false,
},
series: [],
},
{
type: 'radar',
backgroundColor: 'none',
width: '100%',
height: '100%',
x: '0px',
y: '0px',
plot: {
angleSpace: 0,
aspect: 'piano',
borderWidth: '0px',
jsRule: 'plot_jsRule(1)',
maxTrackers: 0,
},
plotarea: {
margin: '10px',
},
scale: {
sizeFactor: 0.275,
},
scaleK: {
values: ['Limited', 'Maximum'],
aperture: 90,
guide: {
visible: false,
},
item: {
autoRotate: true,
color: '#000',
fontSize: '10px',
fontWeight: 'bold',
},
ranged: true,
refAngle: 180,
tick: {
visible: false,
},
},
scaleV: {
offsetStart: '10px',
visible: false,
},
labels: [{
alpha: 0.75,
backgroundColor: '#ccc',
backgroundImage: pattern,
flat: true,
offsetX: '-85px',
offsetY: '5px',
width: '10px',
height: '10px',
x: '50%',
y: '50%',
},
{
text: 'Prohibited or banned',
flat: true,
fontSize: '10px',
fontWeight: 'bold',
offsetX: '-70px',
offsetY: '2px',
x: '50%',
y: '50%',
},
{
backgroundColor: '#ccc',
flat: true,
offsetX: '-85px',
offsetY: '20px',
width: '10px',
height: '10px',
x: '50%',
y: '50%',
},
{
text: 'No law or unclear',
flat: true,
fontSize: '10px',
fontWeight: 'bold',
offsetX: '-70px',
offsetY: '17px',
x: '50%',
y: '50%',
},
],
series: [],
},
{
type: 'radar',
backgroundColor: 'none',
width: '100%',
height: '100%',
x: '0px',
y: '0px',
title: {
text: 'Rights by type',
offsetY: '40px',
y: '50%',
},
plotarea: {
margin: '10px',
},
scale: {
sizeFactor: 0.275,
},
scaleK: {
visible: false,
},
scaleV: {
values: metrics,
guide: {
visible: false,
},
item: {
color: '#000',
fontSize: '10px',
fontWeight: 'bold',
},
labels: metrics,
maxItems: metrics.length,
offsetStart: '15px',
offsetEnd: '5px',
refLine: {
visible: false,
},
tick: {
visible: false,
},
},
},
],
};
// HELPER METHODS
// -----------------------------
window.plot_jsRule = (p, chart) => {
let 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 (let m = 0; m < metrics.length; m++) {
let values = [],
dataLevels = [];
for (let s = 0; s < states.length; s++) {
/*
-1 = Prohibited or banned
0 = No law or unclear
0.5 = Limited
1 = Maximum
*/
let 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]);
}
chartConfig.graphset[0].series.push({
values: values,
text: metrics[m],
dataLevel: dataLevels,
});
chartConfig.graphset[1].series.push({
values: [0.5, 1],
text: metrics[m],
});
}
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
height: '550px',
width: '100%',
output: 'svg',
data: chartConfig,
});
</script>
</body>
</html>
// DEFINE DATA
// -----------------------------
let pattern =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAFJJREFUWEft1MENACAIQ9HuvzQGE406QHvwH0z0hMADVZXWkfrqfUeDd7LzA4nMj6r7y3612d3zNx4GogD3FLAH2AMYwAAGMIABDGAAAxj42sAAIjn2iJSofAQAAAAASUVORK5CYII=';
let 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',
];
let metrics = [
'Schools',
'Hate Crimes',
'Housing',
'Employment',
'Adoption',
'Hospital Visits',
'Marriage',
];
let palette = [
'#7EC2EB',
'#833C99',
'#D1028A',
'#87BC38',
'#0060A8',
'#EFBA4D',
'#CE2C20',
];
let levels = {
'-1': 'Prohibited or banned',
0: 'No law or unclear',
0.5: 'Limited',
1: 'Maximum',
};
// CHART CONFIG
// -----------------------------
let chartConfig = {
backgroundColor: '#fff',
graphset: [
{
type: 'radar',
backgroundColor: 'none',
width: '100%',
height: '100%',
x: '0px',
y: '0px',
plot: {
tooltip: {
text: '%plot-text in %scale-key-text: %data-level',
backgroundColor: '#333',
color: '#fff',
fontSize: '13px',
padding: '10px',
},
angleSpace: 0,
animation: {
effect: 'ANIMATION_FADE_IN',
sequence: 'ANIMATION_BY_PLOT',
speed: 50,
},
aspect: 'piano',
borderColor: '#fff',
borderWidth: '1px',
jsRule: 'plot_jsRule(0)',
},
plotarea: {
margin: '10px',
},
scale: {
sizeFactor: 0.9,
},
scaleK: {
values: states,
aspect: 'circle',
guide: {
visible: false,
},
ranged: true,
tick: {
visible: false,
},
},
scaleV: {
offsetStart: '120px',
visible: false,
},
series: [],
},
{
type: 'radar',
backgroundColor: 'none',
width: '100%',
height: '100%',
x: '0px',
y: '0px',
plot: {
angleSpace: 0,
aspect: 'piano',
borderWidth: '0px',
jsRule: 'plot_jsRule(1)',
maxTrackers: 0,
},
plotarea: {
margin: '10px',
},
scale: {
sizeFactor: 0.275,
},
scaleK: {
values: ['Limited', 'Maximum'],
aperture: 90,
guide: {
visible: false,
},
item: {
autoRotate: true,
color: '#000',
fontSize: '10px',
fontWeight: 'bold',
},
ranged: true,
refAngle: 180,
tick: {
visible: false,
},
},
scaleV: {
offsetStart: '10px',
visible: false,
},
labels: [
{
alpha: 0.75,
backgroundColor: '#ccc',
backgroundImage: pattern,
flat: true,
offsetX: '-85px',
offsetY: '5px',
width: '10px',
height: '10px',
x: '50%',
y: '50%',
},
{
text: 'Prohibited or banned',
flat: true,
fontSize: '10px',
fontWeight: 'bold',
offsetX: '-70px',
offsetY: '2px',
x: '50%',
y: '50%',
},
{
backgroundColor: '#ccc',
flat: true,
offsetX: '-85px',
offsetY: '20px',
width: '10px',
height: '10px',
x: '50%',
y: '50%',
},
{
text: 'No law or unclear',
flat: true,
fontSize: '10px',
fontWeight: 'bold',
offsetX: '-70px',
offsetY: '17px',
x: '50%',
y: '50%',
},
],
series: [],
},
{
type: 'radar',
backgroundColor: 'none',
width: '100%',
height: '100%',
x: '0px',
y: '0px',
title: {
text: 'Rights by type',
offsetY: '40px',
y: '50%',
},
plotarea: {
margin: '10px',
},
scale: {
sizeFactor: 0.275,
},
scaleK: {
visible: false,
},
scaleV: {
values: metrics,
guide: {
visible: false,
},
item: {
color: '#000',
fontSize: '10px',
fontWeight: 'bold',
},
labels: metrics,
maxItems: metrics.length,
offsetStart: '15px',
offsetEnd: '5px',
refLine: {
visible: false,
},
tick: {
visible: false,
},
},
},
],
};
// HELPER METHODS
// -----------------------------
window.plot_jsRule = (p, chart) => {
let 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 (let m = 0; m < metrics.length; m++) {
let values = [],
dataLevels = [];
for (let s = 0; s < states.length; s++) {
/*
-1 = Prohibited or banned
0 = No law or unclear
0.5 = Limited
1 = Maximum
*/
let 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]);
}
chartConfig.graphset[0].series.push({
values: values,
text: metrics[m],
dataLevel: dataLevels,
});
chartConfig.graphset[1].series.push({
values: [0.5, 1],
text: metrics[m],
});
}
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
height: '550px',
width: '100%',
output: 'svg',
data: chartConfig,
});
