<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
<style>
.zc-body {
margin: 10px;
padding: 10px;
font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
}
.zc-body input,
.zc-body button,
.zc-body select,
.zc-body textarea,
.zc-body label {
font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
}
.countries {
height: 400px;
width: 150px;
overflow: auto;
margin-left: 820px;
margin-top: -550px;
font-size: 12px;
border: 1px solid #ddd;
}
.countries label {
font-weight: 600;
width: 90%;
display: block;
padding: 4px 6px;
}
.countries input[type=checkbox] {
width: 17px;
height: 17px;
margin: 0 4px 0 0;
vertical-align: bottom;
}
</style>
</head>
<body class="zc-body">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
</script>
<div id="zc"></div>
<div id="chkCountries" class="countries"></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Pointing to Zingchart's CDN module location. Without this, it will try to find ZC modules on Codepen's CDN
zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
var aCountries = ['Argentina', 'Australia', 'Austria', 'Belgium', 'Bolivia', 'Brazil', 'Canada', 'Chile', 'China', 'Croatia', 'Denmark', 'Egypt', 'Finland', 'France', 'Germany', 'Greece', 'Iceland', 'India', 'Indonesia', 'Italy', 'Japan', 'Luxembourg', 'Mexico', 'Netherlands', 'Norway', 'Peru', 'Portugal', 'Romania', 'Spain', 'Switzerland', 'Thailand', 'United Kingdom', 'United States', 'Venezuela'];
var iLineX = 70;
var iLineY = 80;
var chkList = $('#chkCountries');
$.each(aCountries, function(i) {
var id = aCountries[i].replace(/[^a-zA-Z]/gi, '').toLowerCase();
var oLabel = $('<label/>')
.attr('id', 'lbl' + id)
.attr('for', id)
.appendTo(chkList);
var oInput = $('<input/>')
.attr('type', 'checkbox')
.attr('id', id)
.attr('class', 'chkCountry')
.attr('checked', false)
.appendTo(oLabel);
oLabel.append(aCountries[i]);
});
$(".chkCountry").click(function() {
zingchart.exec('zc', 'update', {
graphid: 0
});
});
var _r_ = function(min, max) {
return Math.round(min + (max - min) * Math.random());
}
var nrVal = aCountries.length;
var aData = [];
var aDataTxt = [];
for (var i = 0; i < nrVal; i++) {
var r1 = _r_(iLineX - 30, iLineX + 30);
var r2 = _r_(iLineY - 20, iLineY + 20);
aData.push([r1, r2]);
aDataTxt.push(aCountries[i].replace(/[^a-zA-Z]/gi, '').toLowerCase());
}
var chartJSON = {
graphset: [{
type: 'scatter',
backgroundColor: '#FFF',
title: {
text: 'Life Expectancy and Self-Reported Health (OECD)',
fontSize: 22,
align: 'left',
paddingLeft: 10
},
subtitle: {
text: 'Self-reported Health (scale from 0-100)',
fontSize: 12,
fontWeight: 'normal',
fontStyle: 'italic',
padding: '5 0 10 10',
align: 'left'
},
scaleX: {
offset: 40,
step: 10,
lineWidth: 0,
label: {
text: 'Self-reported Health (scale from 0-100)',
fontColor: '#000',
fontWeight: 'normal',
fontSize: 11,
paddingTop: 15
},
markers: [{
type: 'line',
lineStyle: 'dotted',
lineColor: '#000',
text: 'low<br><br>high',
valueRange: true,
label: {
offsetX: -40,
paddingBottom: 40,
fontWeight: 'bold'
},
range: [iLineX]
}],
item: {
color: '#000',
fontWeight: 'normal',
fontSize: 11
},
guide: {
visible: false
},
tick: {
visible: true
}
},
tooltip: {
text: '<span style="font-size:17px;font-weight:bold;">%data-countries</span><br><br>Life expectancy: <b>%node-value</b> years<br>Self-reported health: <b>%scale-key-value</b>',
align: 'left',
padding: 10,
fontSize: 12
},
plot: {
dataCountries: aCountries,
dataTxt: aDataTxt,
animation: {
speed: 400,
effect: 1,
method: 0,
sequence: 0
}
},
scaleY: {
offset: 40,
minValue: 'auto',
lineWidth: 0,
label: {
text: 'Life Expectancy',
fontColor: '#000',
fontWeight: 'normal',
fontSize: 11,
paddingRight: 15
},
markers: [{
type: 'line',
lineStyle: 'dotted',
lineColor: '#000',
text: 'high<br><br>low',
label: {
offsetY: 20,
paddingLeft: 20,
fontWeight: 'bold'
},
range: [iLineY]
}],
item: {
color: '#000',
fontWeight: 'normal',
fontSize: 11
},
guide: {
visible: false
},
tick: {
visible: true
}
},
series: [{
values: aData,
hoverMarker: {
visible: false
},
valueBox: {
text: '%data-countries',
fontSize: 11,
fontWeight: 'bold',
color: '#000',
offsetY: 45,
jsRule: 'plot_rule(2)'
},
tooltip: {
jsRule: 'plot_rule(1)'
},
marker: {
borderWidth: 1,
borderColor: '#FFF',
shadowDistance: 3,
fillType: 'linear',
fillAngle: 45,
size: 20,
jsRule: 'plot_rule(0)'
}
}]
}]
};
window.plot_rule = function(p, t) {
var obj = {},
color = '',
fontColor = '#FFF';
var iChecked = $(".chkCountry:checked").length;
if (t === '0' || t === '1') {
if (p.value <= iLineY && p.key <= iLineX) {
color = '#D01C8B #821257';
} else if (p.value > iLineY && p.key <= iLineX) {
color = '#B8E186 #799358';
fontColor = '#000';
} else if (p.value <= iLineY && p.key > iLineX) {
color = '#F1B6DA #A37C94';
fontColor = '#000';
} else if (p.value > iLineY && p.key > iLineX) {
color = '#4DAC26 #2B5E15';
}
$('#lbl' + p["data-txt"]).css('background-color', color.split(' ')[0]);
obj['background-color'] = color;
obj['font-color'] = fontColor;
if (t === '0') {
obj['shadow'] = $('#' + p["data-txt"]).prop("checked");
obj['border-color'] = $('#' + p["data-txt"]).prop("checked") ? '#666' : '#FFF';
obj['size'] = $('#' + p["data-txt"]).prop("checked") ? 22 : 20;
obj['alpha'] = $('#' + p["data-txt"]).prop("checked") ? 1 : (iChecked === 0 ? 0.75 : 0.05);
}
} else {
obj['visible'] = $('#' + p["data-txt"]).prop("checked");
}
return obj;
};
var update = function() {
for (var i = 0; i < nrVal; i++) {
aData[i][0] += _r_(-2, 2);
aData[i][1] += _r_(-2, 2);
}
zingchart.exec('zc', 'setseriesvalues', {
plotindex: 0,
values: aData
});
};
zingchart.render({
id: 'zc',
width: 800,
height: 600,
output: 'svg',
data: chartJSON,
events: {
load: function() {
setInterval(function() {
update();
}, 2500);
}
}
});
</script>
</body>
</html>
// Pointing to Zingchart's CDN module location. Without this, it will try to find ZC modules on Codepen's CDN
zingchart.MODULESDIR ='https://cdn.zingchart.com/modules/';var aCountries = ['Argentina','Australia','Austria','Belgium','Bolivia','Brazil','Canada','Chile','China','Croatia','Denmark','Egypt','Finland','France','Germany','Greece','Iceland','India','Indonesia','Italy','Japan','Luxembourg','Mexico','Netherlands','Norway','Peru','Portugal','Romania','Spain','Switzerland','Thailand','United Kingdom','United States','Venezuela'];
var iLineX = 70;
var iLineY = 80;
var chkList = $('#chkCountries');
$.each(aCountries, function(i) {
var id = aCountries[i].replace(/[^a-zA-Z]/gi, '').toLowerCase();
var oLabel = $('<label/>')
.attr('id', 'lbl'+id)
.attr('for', id)
.appendTo(chkList);
var oInput = $('<input/>')
.attr('type', 'checkbox')
.attr('id', id)
.attr('class', 'chkCountry')
.attr('checked', false)
.appendTo(oLabel);
oLabel.append(aCountries[i]);
});
$(".chkCountry").click(function() {
zingchart.exec('zc', 'update', {
graphid : 0
});
});
var _r_ = function(min, max) {
return Math.round(min + (max-min)*Math.random());
}
var nrVal = aCountries.length;
var aData = [];
var aDataTxt = [];
for (var i=0;i<nrVal;i++) {
var r1 = _r_(iLineX - 30, iLineX + 30);
var r2 = _r_(iLineY - 20, iLineY + 20);
aData.push([r1, r2]);
aDataTxt.push(aCountries[i].replace(/[^a-zA-Z]/gi, '').toLowerCase());
}
var chartJSON = {
graphset : [
{
type : 'scatter',
backgroundColor : '#FFF',
title : {
text : 'Life Expectancy and Self-Reported Health (OECD)',
fontSize : 22,
align : 'left',
paddingLeft : 10
},
subtitle : {
text : 'Self-reported Health (scale from 0-100)',
fontSize : 12,
fontWeight : 'normal',
fontStyle : 'italic',
padding : '5 0 10 10',
align : 'left'
},
scaleX : {
offset : 40,
step : 10,
lineWidth : 0,
label : {
text : 'Self-reported Health (scale from 0-100)',
fontColor : '#000',
fontWeight : 'normal',
fontSize : 11,
paddingTop : 15
},
markers : [
{
type : 'line',
lineStyle : 'dotted',
lineColor : '#000',
text : 'low<br><br>high',
valueRange : true,
label : {
offsetX : -40,
paddingBottom : 40,
fontWeight : 'bold'
},
range : [iLineX]
}
],
item : {
color : '#000',
fontWeight : 'normal',
fontSize : 11
},
guide : {
visible : false
},
tick : {
visible : true
}
},
tooltip : {
text : '<span style="font-size:17px;font-weight:bold;">%data-countries</span><br><br>Life expectancy: <b>%node-value</b> years<br>Self-reported health: <b>%scale-key-value</b>',
align : 'left',
padding : 10,
fontSize : 12
},
plot : {
dataCountries : aCountries,
dataTxt : aDataTxt,
animation : {
speed : 400,
effect : 1,
method : 0,
sequence : 0
}
},
scaleY : {
offset : 40,
minValue : 'auto',
lineWidth : 0,
label : {
text : 'Life Expectancy',
fontColor : '#000',
fontWeight : 'normal',
fontSize : 11,
paddingRight : 15
},
markers : [
{
type : 'line',
lineStyle : 'dotted',
lineColor : '#000',
text : 'high<br><br>low',
label : {
offsetY : 20,
paddingLeft : 20,
fontWeight : 'bold'
},
range : [iLineY]
}
],
item : {
color : '#000',
fontWeight : 'normal',
fontSize : 11
},
guide : {
visible : false
},
tick : {
visible : true
}
},
series : [
{
values : aData,
hoverMarker : {
visible : false
},
valueBox : {
text : '%data-countries',
fontSize : 11,
fontWeight : 'bold',
color : '#000',
offsetY : 45,
jsRule : 'plot_rule(2)'
},
tooltip : {
jsRule : 'plot_rule(1)'
},
marker : {
borderWidth : 1,
borderColor : '#FFF',
shadowDistance : 3,
fillType : 'linear',
fillAngle : 45,
size : 20,
jsRule : 'plot_rule(0)'
}
}
]
}
]
};
window.plot_rule = function(p, t) {
var obj = {}, color = '', fontColor = '#FFF';
var iChecked = $(".chkCountry:checked").length;
if (t === '0' || t === '1') {
if (p.value <= iLineY && p.key <= iLineX) {
color = '#D01C8B #821257';
} else if (p.value > iLineY && p.key <= iLineX) {
color = '#B8E186 #799358';
fontColor = '#000';
} else if (p.value <= iLineY && p.key > iLineX) {
color = '#F1B6DA #A37C94';
fontColor = '#000';
} else if (p.value > iLineY && p.key > iLineX) {
color = '#4DAC26 #2B5E15';
}
$('#lbl' + p["data-txt"]).css('background-color', color.split(' ')[0]);
obj['background-color'] = color;
obj['font-color'] = fontColor;
if (t === '0') {
obj['shadow'] = $('#' + p["data-txt"]).prop("checked");
obj['border-color'] = $('#' + p["data-txt"]).prop("checked")?'#666':'#FFF';
obj['size'] = $('#' + p["data-txt"]).prop("checked")?22:20;
obj['alpha'] = $('#' + p["data-txt"]).prop("checked")?1:(iChecked===0?0.75:0.05);
}
} else {
obj['visible'] = $('#' + p["data-txt"]).prop("checked");
}
return obj;
};
var update = function() {
for (var i=0;i<nrVal;i++) {
aData[i][0] += _r_(-2,2);
aData[i][1] += _r_(-2,2);
}
zingchart.exec('zc', 'setseriesvalues', {
plotindex : 0,
values : aData
});
};
zingchart.render({
id : 'zc',
width : 800,
height : 600,
output : 'svg',
data : chartJSON,
events : {
load : function() {
setInterval(function() {
update();
}, 2500);
}
}
});