<!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></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
zingchart.loadModules('maps, maps-usa', function(e) {
zingchart.render({
id: 'myChart',
data: {
shapes: [{
type: 'zingchart.maps',
options: {
name: 'usa',
style: {
items: {
//Northeast:
CT: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
ME: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
},
tooltip: {
bold: true,
fontColor: 'red',
callout: true,
calloutHeight: 15,
calloutPosition: 'bottom',
calloutWidth: 0,
calloutTip: {
type: 'circle',
backgroundColor: '#fff',
borderWidth: 2,
borderColor: '#f60',
offsetY: 5,
size: 5,
},
}
},
MA: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
NH: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
RI: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
VT: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
DE: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
NJ: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
NY: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
PA: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
//Midwest:
IL: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
IN: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
MI: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
OH: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
WI: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
IA: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
KS: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
MN: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
MO: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
NE: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
ND: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
SD: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
//South:
FL: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
GA: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
MD: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
NC: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
SC: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
VA: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
DC: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
WV: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
AL: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
KY: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
MS: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
TN: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
AR: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
LA: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
OK: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
TX: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
//West:
AZ: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
CO: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
ID: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
MT: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
NV: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
NM: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
UT: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
WY: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
AK: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
CA: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
HI: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
OR: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
WA: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
}
},
tooltip: {
alpha: 0.5,
backgroundColor: 'white',
borderColor: 'white',
borderRadius: 3,
fontColor: 'black',
fontFamily: 'Georgia',
fontSize: 12,
textAlpha: 1
}
}
}
}]
},
height: 400,
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>
zingchart.loadModules('maps, maps-usa', function(e) {
zingchart.render({
id: 'myChart',
data: {
shapes: [{
type: 'zingchart.maps',
options: {
name: 'usa',
style: {
items: {
//Northeast:
CT: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
ME: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
},
tooltip: {
bold: true,
fontColor: 'red',
callout: true,
calloutHeight: 15,
calloutPosition: 'bottom',
calloutWidth: 0,
calloutTip: {
type: 'circle',
backgroundColor: '#fff',
borderWidth: 2,
borderColor: '#f60',
offsetY: 5,
size: 5,
},
}
},
MA: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
NH: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
RI: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
VT: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
DE: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
NJ: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
NY: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
PA: {
group: 1,
backgroundColor: '#FFCDD2',
hoverState: {
backgroundColor: '#EF9A9A'
}
},
//Midwest:
IL: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
IN: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
MI: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
OH: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
WI: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
IA: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
KS: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
MN: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
MO: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
NE: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
ND: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
SD: {
group: 2,
backgroundColor: '#FFE0B2',
hoverState: {
backgroundColor: '#FFB74D'
}
},
//South:
FL: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
GA: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
MD: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
NC: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
SC: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
VA: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
DC: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
WV: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
AL: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
KY: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
MS: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
TN: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
AR: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
LA: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
OK: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
TX: {
group: 3,
backgroundColor: '#C8E6C9',
hoverState: {
backgroundColor: '#81C784'
}
},
//West:
AZ: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
CO: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
ID: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
MT: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
NV: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
NM: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
UT: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
WY: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
AK: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
CA: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
HI: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
OR: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
},
WA: {
group: 4,
backgroundColor: '#BBDEFB',
hoverState: {
backgroundColor: '#64B5F6'
}
}
},
tooltip: {
alpha: 0.5,
backgroundColor: 'white',
borderColor: 'white',
borderRadius: 3,
fontColor: 'black',
fontFamily: 'Georgia',
fontSize: 12,
textAlpha: 1
}
}
}
}]
},
height: 400,
width: '100%'
});
});