<!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>
.zc-body {
background: #fff;
}
.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"];
let electionResults = [{
'name': 'AL',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'AK',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'AZ',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'AR',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'CA',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'CO',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'CT',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'DE',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'FL',
'winningVotes': 11,
'totalVotes': 12
}, {
'name': 'GA',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'HI',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'ID',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'IL',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'IN',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'IA',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'KS',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'KY',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'LA',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'ME',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'MD',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'MA',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'MI',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'MN',
'winningVotes': 6,
'totalVotes': 12
}, {
'name': 'MS',
'winningVotes': 7,
'totalVotes': 12
}, {}, {
'name': 'MO',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'MT',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'NE',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'NV',
'winningVotes': 11,
'totalVotes': 12
}, {
'name': 'NH',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'NJ',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'NM',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'NY',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'NC',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'ND',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'OH',
'winningVotes': 12,
'totalVotes': 12
}, {
'name': 'OK',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'OR',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'PA',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'RI',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'SC',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'SD',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'TN',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'TX',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'UT',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'VT',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'VA',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'WA',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'WV',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'WI',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'WY',
'winningVotes': 7,
'totalVotes': 12
}];
let stateNames = {
'AL': 'Alabama',
'AK': 'Alaska',
'AS': 'American Samoa',
'AZ': 'Arizona',
'AR': 'Arkansas',
'CA': 'California',
'CO': 'Colorado',
'CT': 'Connecticut',
'DE': 'Delaware',
'DC': 'District Of Columbia',
'FM': 'Federated States Of Micronesia',
'FL': 'Florida',
'GA': 'Georgia',
'GU': 'Guam',
'HI': 'Hawaii',
'ID': 'Idaho',
'IL': 'Illinois',
'IN': 'Indiana',
'IA': 'Iowa',
'KS': 'Kansas',
'KY': 'Kentucky',
'LA': 'Louisiana',
'ME': 'Maine',
'MH': 'Marshall Islands',
'MD': 'Maryland',
'MA': 'Massachusetts',
'MI': 'Michigan',
'MN': 'Minnesota',
'MS': 'Mississippi',
'MO': 'Missouri',
'MT': 'Montana',
'NE': 'Nebraska',
'NV': 'Nevada',
'NH': 'New Hampshire',
'NJ': 'New Jersey',
'NM': 'New Mexico',
'NY': 'New York',
'NC': 'North Carolina',
'ND': 'North Dakota',
'MP': 'Northern Mariana Islands',
'OH': 'Ohio',
'OK': 'Oklahoma',
'OR': 'Oregon',
'PW': 'Palau',
'PA': 'Pennsylvania',
'PR': 'Puerto Rico',
'RI': 'Rhode Island',
'SC': 'South Carolina',
'SD': 'South Dakota',
'TN': 'Tennessee',
'TX': 'Texas',
'UT': 'Utah',
'VT': 'Vermont',
'VI': 'Virgin Islands',
'VA': 'Virginia',
'WA': 'Washington',
'WV': 'West Virginia',
'WI': 'Wisconsin',
'WY': 'Wyoming'
}
let colorGradient = ['#feebe2', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177'];
function setResults() {
let stateResults = {};
electionResults.forEach(function(state) {
let stateName = state.name;
let colorIndex = state.winningVotes;
let styleObject = {
backgroundColor: colorGradient[colorIndex - 6],
group: colorIndex - 5,
label: {
fontSize: '14px'
},
tooltip: {
text: stateNames[stateName] + ' voted for the elected president in ' + Math.floor((state.winningVotes / state.totalVotes) * 100) + '% of the past 12 elections',
fontSize: '18px',
textAlign: 'left',
width: '200px',
wrapText: true
}
};
stateResults[stateName] = styleObject;
});
return {
backgroundColor: '#FFF',
gui: {
watermark: {
position: 'tr'
}
},
globals: {
fontFamily: 'Open Sans Condensed',
shadow: false
},
title: {
text: 'Likelihood of a State Voting for the Elected President',
backgroundColor: '#FFF',
color: '#333',
fontSize: '24px',
textAlign: 'left',
x: '10px',
y: '10px'
},
subtitle: {
text: 'Based off the past 12 elections (1960-2012)*',
fontSize: '16px',
color: '#333',
textAlign: 'left',
x: '10px',
y: '40px'
},
labels: [{
text: '* The 1960 presidential election was the first in which Hawaii and Alaska voted.',
fontSize: '14px',
paddingTop: '40px',
y: '470px',
x: '355px'
}],
legend: {
backgroundColor: 'none',
borderWidth: 0,
offsetY: '-10px',
toggleAction: 'none',
verticalAlign: 'bottom',
item: {
fontSize: '16px'
},
marker: {
type: 'rectangle',
width: '20px',
height: '10px',
}
},
series: [ // render legend items
{
legendItem: {
text: '50%'
},
legendMarker: {
backgroundColor: '#feebe2',
}
},
{
legendItem: {
text: '58%'
},
legendMarker: {
backgroundColor: '#fcc5c0',
}
},
{
legendItem: {
text: '66%'
},
legendMarker: {
backgroundColor: '#fa9fb5',
}
},
{
legendItem: {
text: '75%'
},
legendMarker: {
backgroundColor: '#f768a1',
}
},
{
legendItem: {
text: '83%'
},
legendMarker: {
backgroundColor: '#dd3497',
}
},
{
legendItem: {
text: '91%'
},
legendMarker: {
backgroundColor: '#ae017e',
}
},
{
legendItem: {
text: '100%'
},
legendMarker: {
backgroundColor: '#7a0177',
}
}
],
shapes: [ // render map
{
type: 'zingchart.maps',
options: {
id: 'map',
name: 'usa',
scale: true,
y: '40px',
style: {
borderColor: '#FFF',
items: stateResults,
hoverState: {
alpha: 0.3,
backgroundColor: '#FFF',
borderWidth: '3px'
}
}
}
}
]
};
}
// renders chart
zingchart.loadModules('maps, maps-usa', function(e) {
zingchart.render({
id: 'myChart',
data: setResults(),
height: '100%',
width: '100%'
});
});
</script>
</body>
</html>
let electionResults = [
{
'name': 'AL',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'AK',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'AZ',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'AR',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'CA',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'CO',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'CT',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'DE',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'FL',
'winningVotes': 11,
'totalVotes': 12
}, {
'name': 'GA',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'HI',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'ID',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'IL',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'IN',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'IA',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'KS',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'KY',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'LA',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'ME',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'MD',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'MA',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'MI',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'MN',
'winningVotes': 6,
'totalVotes': 12
}, {
'name': 'MS',
'winningVotes': 7,
'totalVotes': 12
}, {}, {
'name': 'MO',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'MT',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'NE',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'NV',
'winningVotes': 11,
'totalVotes': 12
}, {
'name': 'NH',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'NJ',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'NM',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'NY',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'NC',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'ND',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'OH',
'winningVotes': 12,
'totalVotes': 12
}, {
'name': 'OK',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'OR',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'PA',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'RI',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'SC',
'winningVotes': 8,
'totalVotes': 12
}, {
'name': 'SD',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'TN',
'winningVotes': 10,
'totalVotes': 12
}, {
'name': 'TX',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'UT',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'VT',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'VA',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'WA',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'WV',
'winningVotes': 7,
'totalVotes': 12
}, {
'name': 'WI',
'winningVotes': 9,
'totalVotes': 12
}, {
'name': 'WY',
'winningVotes': 7,
'totalVotes': 12
}
];
let stateNames = {
'AL': 'Alabama',
'AK': 'Alaska',
'AS': 'American Samoa',
'AZ': 'Arizona',
'AR': 'Arkansas',
'CA': 'California',
'CO': 'Colorado',
'CT': 'Connecticut',
'DE': 'Delaware',
'DC': 'District Of Columbia',
'FM': 'Federated States Of Micronesia',
'FL': 'Florida',
'GA': 'Georgia',
'GU': 'Guam',
'HI': 'Hawaii',
'ID': 'Idaho',
'IL': 'Illinois',
'IN': 'Indiana',
'IA': 'Iowa',
'KS': 'Kansas',
'KY': 'Kentucky',
'LA': 'Louisiana',
'ME': 'Maine',
'MH': 'Marshall Islands',
'MD': 'Maryland',
'MA': 'Massachusetts',
'MI': 'Michigan',
'MN': 'Minnesota',
'MS': 'Mississippi',
'MO': 'Missouri',
'MT': 'Montana',
'NE': 'Nebraska',
'NV': 'Nevada',
'NH': 'New Hampshire',
'NJ': 'New Jersey',
'NM': 'New Mexico',
'NY': 'New York',
'NC': 'North Carolina',
'ND': 'North Dakota',
'MP': 'Northern Mariana Islands',
'OH': 'Ohio',
'OK': 'Oklahoma',
'OR': 'Oregon',
'PW': 'Palau',
'PA': 'Pennsylvania',
'PR': 'Puerto Rico',
'RI': 'Rhode Island',
'SC': 'South Carolina',
'SD': 'South Dakota',
'TN': 'Tennessee',
'TX': 'Texas',
'UT': 'Utah',
'VT': 'Vermont',
'VI': 'Virgin Islands',
'VA': 'Virginia',
'WA': 'Washington',
'WV': 'West Virginia',
'WI': 'Wisconsin',
'WY': 'Wyoming'
}
let colorGradient = ['#feebe2', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177'];
function setResults() {
let stateResults = {};
electionResults.forEach(function (state) {
let stateName = state.name;
let colorIndex = state.winningVotes;
let styleObject = {
backgroundColor: colorGradient[colorIndex - 6],
group: colorIndex - 5,
label: {
fontSize: '14px'
},
tooltip: {
text: stateNames[stateName] + ' voted for the elected president in ' + Math.floor((state.winningVotes / state.totalVotes) * 100) + '% of the past 12 elections',
fontSize: '18px',
textAlign: 'left',
width: '200px',
wrapText: true
}
};
stateResults[stateName] = styleObject;
});
return {
backgroundColor: '#FFF',
gui: {
watermark: {
position: 'tr'
}
},
globals: {
fontFamily: 'Open Sans Condensed',
shadow: false
},
title: {
text: 'Likelihood of a State Voting for the Elected President',
backgroundColor: '#FFF',
color: '#333',
fontSize: '24px',
textAlign: 'left',
x: '10px',
y: '10px'
},
subtitle: {
text: 'Based off the past 12 elections (1960-2012)*',
fontSize: '16px',
color: '#333',
textAlign: 'left',
x: '10px',
y: '40px'
},
labels: [{
text: '* The 1960 presidential election was the first in which Hawaii and Alaska voted.',
fontSize: '14px',
paddingTop: '40px',
y: '470px',
x: '355px'
}],
legend: {
backgroundColor: 'none',
borderWidth: 0,
offsetY: '-10px',
toggleAction: 'none',
verticalAlign: 'bottom',
item: {
fontSize: '16px'
},
marker: {
type: 'rectangle',
width: '20px',
height: '10px',
}
},
series: [ // render legend items
{
legendItem: {
text: '50%'
},
legendMarker: {
backgroundColor: '#feebe2',
}
},
{
legendItem: {
text: '58%'
},
legendMarker: {
backgroundColor: '#fcc5c0',
}
},
{
legendItem: {
text: '66%'
},
legendMarker: {
backgroundColor: '#fa9fb5',
}
},
{
legendItem: {
text: '75%'
},
legendMarker: {
backgroundColor: '#f768a1',
}
},
{
legendItem: {
text: '83%'
},
legendMarker: {
backgroundColor: '#dd3497',
}
},
{
legendItem: {
text: '91%'
},
legendMarker: {
backgroundColor: '#ae017e',
}
},
{
legendItem: {
text: '100%'
},
legendMarker: {
backgroundColor: '#7a0177',
}
}
],
shapes: [ // render map
{
type: 'zingchart.maps',
options: {
id: 'map',
name: 'usa',
scale: true,
y: '40px',
style: {
borderColor: '#FFF',
items: stateResults,
hoverState: {
alpha: 0.3,
backgroundColor: '#FFF',
borderWidth: '3px'
}
}
}
}
]
};
}
// renders chart
zingchart.loadModules('maps, maps-usa', function (e) {
zingchart.render({
id: 'myChart',
data: setResults(),
height: '100%',
width: '100%'
});
});
