<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:900,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
min-height: 530px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'bubble',
globals: {
shadow: false,
},
backgroundColor: '#f9f9f9',
title: {
text: 'NHL 2018-2019 Conference Standings',
backgroundColor: '#333',
color: '#FFF',
fontWeight: 300,
},
scaleX: {
values: '15:50:5',
guide: {
lineColor: '#999',
lineStyle: 'solid',
lineWidth: '1px',
},
label: {
text: 'Conference Losses',
color: '#333',
fontSize: '12px',
fontWeight: 300,
},
lineColor: '#999',
lineWidth: '1px',
tick: {
lineColor: '#999',
lineWidth: '1px',
},
},
scaleY: {
values: '20:65:5',
guide: {
lineColor: '#999',
lineStyle: 'solid',
lineWidth: '1px',
},
label: {
text: 'Conference Wins',
color: '#333',
fontSize: '12px',
fontWeight: 300,
},
lineColor: '#999',
lineWidth: '1px',
tick: {
lineColor: '#999',
lineWidth: '1px',
},
},
labels: [{
text: 'The Boston Bruins clashed against the St. Louis Blues<br>for the Stanely Cup.',
backgroundColor: '#FFF',
borderColor: '#333',
borderWidth: '1px',
fontSize: '12px',
padding: '5px 10px',
shadow: false,
textAlign: 'left',
x: '350px',
y: '80px',
}, ],
series: [{
values: [
[25, 50, 107],
[27, 46, 101],
[29, 47, 100],
[30, 47, 99],
[28, 45, 99],
[32, 43, 93],
[32, 43, 93],
[30, 38, 90],
[35, 39, 86],
[34, 36, 84],
[36, 37, 83],
[36, 35, 81],
[37, 35, 80],
[38, 35, 79],
],
tooltip: {
text: '<div style=border-bottom:1px solid #d9d9d9;float:left;padding-bottom:5px;margin-bottom:5px;><div style=float:left;background-image:url(http://cdn.nhle.com/projects/ice3-ui/com.nhl.ice3.ui.t5.components/GlobalPageImports/images/smLogoSprite.png);background-position:0px %data-western-offset;width:40px;height:20px;display:block;></div><span style=float:left;padding:0px 5px;text-transform:uppercase;font-size:14px;line-height:20px;color:#333;font-family:Roboto;font-weight:900;>%data-western-names</span></div><div style=clear:both;text-align:center;font-size:14px;><span style=font-family:Roboto;font-weight:900;font-size:14px;>Wins</span>: %v<br><span style=font-family:Roboto;font-weight:900;font-size:14px;>Losses</span>: %k<br><span style=font-family:Roboto;font-weight:900;font-size:14px;>Points</span>: %v2<br><span>%data-western-playoffs playoffs</span><br><span style=font-weight:900;text-decoration:underline;>%data-western-finals</span></div>',
backgroundColor: '#FFF',
borderColor: '#003E7E',
borderWidth: '1px',
color: '#333',
htmlMode: true,
padding: '10px',
},
valueBox: {
text: '%data-western-names',
alpha: 0,
color: '#FFF',
fontWeight: 300,
rules: [{
alpha: 1,
rule: '%i == 4',
}, ],
},
dataWesternFinals: [
'',
'',
'',
'',
'Stanley Cup Finals',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
dataWesternNames: [
'Calgary',
'San Jose',
'Nashville',
'Winnipeg',
'St Louis',
'Dallas',
'Vegas',
'Colorado',
'Arizona',
'Chicago',
'Minnesota',
'Vancouver',
'Anaheim',
'Edmonton',
],
dataWesternOffset: [
'-520px',
'-420px',
'-540px',
'-400px',
'-480px',
'-500px',
'-380px',
'-600px',
'-580px',
'-440px',
'-300px',
'-340px',
'-360px',
'-460px',
],
dataWesternPlayoffs: [
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
],
marker: {
alpha: 0.3,
backgroundColor: '#003E7E',
rules: [{
alpha: 1,
rule: '%i == 4',
}, ],
},
},
{
values: [
[16, 62, 128],
[24, 49, 107],
[26, 48, 104],
[27, 48, 103],
[28, 46, 100],
[26, 44, 100],
[29, 46, 99],
[31, 47, 98],
[30, 44, 96],
[32, 36, 86],
[37, 37, 82],
[36, 32, 78],
[39, 33, 76],
[40, 32, 74],
[41, 31, 72],
[47, 29, 64],
],
tooltip: {
text: '<div style=border-bottom:1px solid #d9d9d9;float:left;padding-bottom:5px;margin-bottom:5px;><div style=float:left;background-image:url(http://cdn.nhle.com/projects/ice3-ui/com.nhl.ice3.ui.t5.components/GlobalPageImports/images/smLogoSprite.png);background-position:0px %data-eastern-offset;width:40px;height:20px;display:block;></div><span style=float:left;padding:0px 5px;text-transform:uppercase;font-size:14px;line-height:20px;color:#333;font-family:Roboto;font-weight:900;>%data-eastern-names</span></div><div style=clear:both;text-align:center;font-size:14px;><span style=font-family:Roboto;font-weight:900;font-size:14px;>Wins</span>: %v<br><span style=font-family:Roboto;font-weight:900;font-size:14px;>Losses</span>: %k<br><span style=font-family:Roboto;font-weight:900;font-size:14px;>Points</span>: %v2<br><span>%data-eastern-playoffs playoffs</span><br><span style=font-weight:900;text-decoration:underline;>%data-eastern-finals</span></div>',
backgroundColor: '#FFF',
borderColor: '#BA112D',
borderWidth: '1px',
color: '#333',
htmlMode: true,
padding: '10px',
},
valueBox: {
text: '%data-eastern-names',
alpha: 0,
color: '#FFF',
fontWeight: 300,
rules: [{
alpha: 1,
rule: '%i == 1',
}, ],
},
dataEasternFinals: [
'',
'Stanel Cup Finals',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
dataEasternNames: [
'Tampa Bay',
'Boston',
'Washington',
'NY Islanders',
'Toronto',
'Pittsburgh',
'Carolina',
'Columbus',
'Montreal',
'Florida',
'Philadelphia',
'NY Rangers',
'Buffalo',
'Detroit',
'New Jersey',
'Ottawa',
],
dataEasternOffset: [
'-120px',
'-180px',
'-220px',
'-0px',
'-60px',
'-560px',
'-240px',
'-100px',
'-80px',
'-160px',
'-320px',
'-20px',
'-280px',
'-260px',
'-140px',
'-40px',
],
dataEasternPlayoffs: [
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
],
marker: {
alpha: 0.3,
backgroundColor: '#BA112D',
rules: [{
alpha: 1,
rule: '%i == 1',
}, ],
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'bubble',
globals: {
shadow: false,
},
backgroundColor: '#f9f9f9',
title: {
text: 'NHL 2018-2019 Conference Standings',
backgroundColor: '#333',
color: '#FFF',
fontWeight: 300,
},
scaleX: {
values: '15:50:5',
guide: {
lineColor: '#999',
lineStyle: 'solid',
lineWidth: '1px',
},
label: {
text: 'Conference Losses',
color: '#333',
fontSize: '12px',
fontWeight: 300,
},
lineColor: '#999',
lineWidth: '1px',
tick: {
lineColor: '#999',
lineWidth: '1px',
},
},
scaleY: {
values: '20:65:5',
guide: {
lineColor: '#999',
lineStyle: 'solid',
lineWidth: '1px',
},
label: {
text: 'Conference Wins',
color: '#333',
fontSize: '12px',
fontWeight: 300,
},
lineColor: '#999',
lineWidth: '1px',
tick: {
lineColor: '#999',
lineWidth: '1px',
},
},
labels: [
{
text: 'The Boston Bruins clashed against the St. Louis Blues<br>for the Stanely Cup.',
backgroundColor: '#FFF',
borderColor: '#333',
borderWidth: '1px',
fontSize: '12px',
padding: '5px 10px',
shadow: false,
textAlign: 'left',
x: '350px',
y: '80px',
},
],
series: [
{
values: [
[25, 50, 107],
[27, 46, 101],
[29, 47, 100],
[30, 47, 99],
[28, 45, 99],
[32, 43, 93],
[32, 43, 93],
[30, 38, 90],
[35, 39, 86],
[34, 36, 84],
[36, 37, 83],
[36, 35, 81],
[37, 35, 80],
[38, 35, 79],
],
tooltip: {
text: '<div style=border-bottom:1px solid #d9d9d9;float:left;padding-bottom:5px;margin-bottom:5px;><div style=float:left;background-image:url(http://cdn.nhle.com/projects/ice3-ui/com.nhl.ice3.ui.t5.components/GlobalPageImports/images/smLogoSprite.png);background-position:0px %data-western-offset;width:40px;height:20px;display:block;></div><span style=float:left;padding:0px 5px;text-transform:uppercase;font-size:14px;line-height:20px;color:#333;font-family:Roboto;font-weight:900;>%data-western-names</span></div><div style=clear:both;text-align:center;font-size:14px;><span style=font-family:Roboto;font-weight:900;font-size:14px;>Wins</span>: %v<br><span style=font-family:Roboto;font-weight:900;font-size:14px;>Losses</span>: %k<br><span style=font-family:Roboto;font-weight:900;font-size:14px;>Points</span>: %v2<br><span>%data-western-playoffs playoffs</span><br><span style=font-weight:900;text-decoration:underline;>%data-western-finals</span></div>',
backgroundColor: '#FFF',
borderColor: '#003E7E',
borderWidth: '1px',
color: '#333',
htmlMode: true,
padding: '10px',
},
valueBox: {
text: '%data-western-names',
alpha: 0,
color: '#FFF',
fontWeight: 300,
rules: [
{
alpha: 1,
rule: '%i == 4',
},
],
},
dataWesternFinals: [
'',
'',
'',
'',
'Stanley Cup Finals',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
dataWesternNames: [
'Calgary',
'San Jose',
'Nashville',
'Winnipeg',
'St Louis',
'Dallas',
'Vegas',
'Colorado',
'Arizona',
'Chicago',
'Minnesota',
'Vancouver',
'Anaheim',
'Edmonton',
],
dataWesternOffset: [
'-520px',
'-420px',
'-540px',
'-400px',
'-480px',
'-500px',
'-380px',
'-600px',
'-580px',
'-440px',
'-300px',
'-340px',
'-360px',
'-460px',
],
dataWesternPlayoffs: [
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
],
marker: {
alpha: 0.3,
backgroundColor: '#003E7E',
rules: [
{
alpha: 1,
rule: '%i == 4',
},
],
},
},
{
values: [
[16, 62, 128],
[24, 49, 107],
[26, 48, 104],
[27, 48, 103],
[28, 46, 100],
[26, 44, 100],
[29, 46, 99],
[31, 47, 98],
[30, 44, 96],
[32, 36, 86],
[37, 37, 82],
[36, 32, 78],
[39, 33, 76],
[40, 32, 74],
[41, 31, 72],
[47, 29, 64],
],
tooltip: {
text: '<div style=border-bottom:1px solid #d9d9d9;float:left;padding-bottom:5px;margin-bottom:5px;><div style=float:left;background-image:url(http://cdn.nhle.com/projects/ice3-ui/com.nhl.ice3.ui.t5.components/GlobalPageImports/images/smLogoSprite.png);background-position:0px %data-eastern-offset;width:40px;height:20px;display:block;></div><span style=float:left;padding:0px 5px;text-transform:uppercase;font-size:14px;line-height:20px;color:#333;font-family:Roboto;font-weight:900;>%data-eastern-names</span></div><div style=clear:both;text-align:center;font-size:14px;><span style=font-family:Roboto;font-weight:900;font-size:14px;>Wins</span>: %v<br><span style=font-family:Roboto;font-weight:900;font-size:14px;>Losses</span>: %k<br><span style=font-family:Roboto;font-weight:900;font-size:14px;>Points</span>: %v2<br><span>%data-eastern-playoffs playoffs</span><br><span style=font-weight:900;text-decoration:underline;>%data-eastern-finals</span></div>',
backgroundColor: '#FFF',
borderColor: '#BA112D',
borderWidth: '1px',
color: '#333',
htmlMode: true,
padding: '10px',
},
valueBox: {
text: '%data-eastern-names',
alpha: 0,
color: '#FFF',
fontWeight: 300,
rules: [
{
alpha: 1,
rule: '%i == 1',
},
],
},
dataEasternFinals: [
'',
'Stanel Cup Finals',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
],
dataEasternNames: [
'Tampa Bay',
'Boston',
'Washington',
'NY Islanders',
'Toronto',
'Pittsburgh',
'Carolina',
'Columbus',
'Montreal',
'Florida',
'Philadelphia',
'NY Rangers',
'Buffalo',
'Detroit',
'New Jersey',
'Ottawa',
],
dataEasternOffset: [
'-120px',
'-180px',
'-220px',
'-0px',
'-60px',
'-560px',
'-240px',
'-100px',
'-80px',
'-160px',
'-320px',
'-20px',
'-280px',
'-260px',
'-140px',
'-40px',
],
dataEasternPlayoffs: [
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Made',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
'Did not make',
],
marker: {
alpha: 0.3,
backgroundColor: '#BA112D',
rules: [
{
alpha: 1,
rule: '%i == 1',
},
],
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
