<!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>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
</style>
</head>
<body>
<div id="thanksgiving"></div>
<!-- cache assets -->
<img src="https://app.zingsoft.com/api/file/H1178XJH/farm.png" style="display:none;">
<img src="https://app.zingsoft.com/api/file/H1178XJH/turkey.png" style="display:none;">
<img src="https://app.zingsoft.com/api/file/H1178XJH/farmer.gif" style="display:none;">
<img src="https://app.zingsoft.com/api/file/H1178XJH/farmer-solo.gif" style="display:none;">
<img src="https://app.zingsoft.com/api/file/H1178XJH/turkey-wine.gif" style="display:none;">
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var farmerReverse = 'https://app.zingsoft.com/api/file/H1178XJH/farmer.gif';
var myTurkey = {
"type": "scatter",
"background-image": "https://app.zingsoft.com/api/file/H1178XJH/farm.png",
"title": {
"font-size": 95,
"font-color": "#f5005b",
"margin-top": 200
},
"scale-x": {
"values": "0:50:1",
"line-color": "none",
"tick": {
"line-color": "none"
},
"item": {
"visible": false
},
"guide": {
"visible": false
}
},
"scale-y": {
"values": "0:50:1",
"line-color": "none",
"tick": {
"line-color": "none"
},
"item": {
"visible": false
},
"guide": {
"visible": false
}
},
"plot": {
"tooltip": {
"visible": false
},
"-animation": {
"efffect": 3,
"method": 2,
"sequence": 2,
"onChange": true
}
},
"series": [{
"values": [
[19, 34]
],
"id": "turkey",
"marker": {
"type": "square",
"background-color": "none",
"border-color": "none",
"shadow": 0,
"size": 220,
"angle": 0, //drag back
"backgroundRepeat": "no-repeat",
"background-image": "https://app.zingsoft.com/api/file/H1178XJH/turkey.png"
}
},
{
"values": [
[null, null]
],
"id": "farmer",
"marker": {
"type": "square",
"background-color": "none",
"border-color": "none",
"size": 170,
"backgroundRepeat": "no-repeat",
"background-image": "https://app.zingsoft.com/api/file/H1178XJH/farmer-solo.gif",
}
}
]
};
zingchart.render({
id: 'thanksgiving',
data: myTurkey,
height: '900',
width: '1280'
});
var cookingObj = {
_1_: {
min: 3000,
max: 3400,
values: [
[
[18, 34]
],
[
[null, null]
]
],
},
_1a_: {
min: 3500,
max: 3900,
values: [
[
[17, 35]
],
[
[null, null]
]
],
},
_1b_: {
min: 4000,
max: 4400,
values: [
[
[17, 35]
],
[
[null, null]
]
],
},
_2_: {
min: 4400,
max: 4800,
values: [
[
[16, 32]
],
[
[31, 20]
]
]
},
_3_: {
min: 4800,
max: 5200,
values: [
[
[12, 30]
],
[
[28, 18]
]
]
},
_4_: {
min: 5200,
max: 5600,
values: [
[
[14, 25]
],
[
[26, 16]
]
]
},
_5_: {
min: 5600,
max: 6000,
values: [
[
[15, 20]
],
[
[24, 16]
]
]
},
_6_: {
min: 6000,
max: 6400,
values: [
[
[12, 28]
],
[
[23, 15]
]
]
},
_7_: {
min: 6400,
max: 6800,
values: [
[
[10, 34]
],
[
[22, 14]
]
]
},
_8_: {
min: 6800,
max: 7200,
values: [
[
[8, 34]
],
[
[21, 15]
]
]
},
_9_: {
min: 7200,
max: 7600,
values: [
[
[4, 35]
],
[
[23, 17]
]
]
},
_10_: {
min: 7600,
max: 8000,
values: [
[
[4, 35]
],
[
[20, 16]
]
] // [ [[t,t]], [[f,f]] ]
},
_11_: {
min: 8900,
max: 9200,
values: [
[
[3, 36]
],
[
[20, 19]
]
]
},
_12_: {
min: 9500,
max: 9800,
values: [
[
[3, 36]
],
[
[20, 19]
]
]
},
_13_: {
min: 10100,
max: 10400,
values: [
[
[5, 34]
],
[
[18, 25]
]
]
},
_14_: {
min: 10700,
max: 11000,
values: [
[
[4, 36]
],
[
[16, 27]
]
]
},
_15_: {
min: 11200,
max: 11500,
values: [
[
[5, 33]
],
[
[14, 29]
]
]
},
_16_: {
min: 11800,
max: 12000,
values: [
[
[5, 34]
],
[
[12, 35]
]
]
},
_17_: {
min: 12200,
max: 12500,
values: [
[
[1, 33]
],
[
[10, 42]
]
]
},
_18_: {
min: 12800,
max: 13100,
values: [
[
[2, 34]
],
[
[10, 42]
]
]
},
_19_: {
min: 13200,
max: 13600,
values: [
[
[6, 35]
],
[
[7, 40]
]
]
},
_20_: {
min: 13800,
max: 14000,
values: [
[
[9, 36]
],
[
[8, 38]
]
]
},
_21_: {
min: 14300,
max: 14800,
values: [
[
[14, 35]
],
[
[6, 40]
]
]
},
_22_: {
min: 15000,
max: 15500,
values: [
[
[18, 35]
],
[
[5, 41]
]
]
},
_23_: {
min: 15600,
max: 15900,
values: [
[
[21, 33]
],
[
[7, 41]
]
]
},
_24_: {
min: 16000,
max: 16400,
values: [
[
[20, 30]
],
[
[10, 40]
]
]
},
_25_: {
min: 16600,
max: 16900,
values: [
[
[21, 36]
],
[
[11, 39]
]
]
},
_26_: {
min: 17000,
max: 17400,
values: [
[
[23, 36]
],
[
[11, 36]
]
]
},
_27_: {
min: 17400,
max: 17800,
values: [
[
[null, null]
],
[
[14, 36]
]
]
},
_28_: {
min: 17800,
max: 18200,
values: [
[
[null, null]
],
[
[17, 36]
]
]
},
_29_: {
min: 18200,
max: 18600,
values: [
[
[null, null]
],
[
[21, 55]
]
]
},
angle_turkey_and_farmer: { // no id does both
min: 18550,
max: 99000,
angle1: -70, // turkey
angle2: 0, // farmer
},
_30_: {
min: 18600,
max: 19000,
values: [
[
[21, 35]
],
[
[17, 35]
]
]
},
_31_: {
min: 19000,
max: 19400,
values: [
[
[19, 34]
],
[
[15, 34]
]
]
},
_32_: {
min: 19500,
max: 19900,
values: [
[
[17, 34]
],
[
[13, 32]
]
]
},
_33_: {
min: 19900,
max: 20200,
values: [
[
[16, 32]
],
[
[12, 30]
]
]
},
_34_: {
min: 20200,
max: 20600,
values: [
[
[17, 30]
],
[
[13, 28]
]
]
},
_35_: {
min: 20700,
max: 20900,
values: [
[
[15, 28]
],
[
[13, 25]
]
]
},
_36_: {
min: 21000,
max: 21400,
values: [
[
[15, 24]
],
[
[13, 21]
]
]
},
_37_: {
min: 21400,
max: 21800,
values: [
[
[15, 22]
],
[
[16, 20]
]
]
},
_38_: {
min: 21900,
max: 22200,
values: [
[
[15, 20]
],
[
[18, 21]
]
]
},
_39_: {
min: 22500,
max: 22700,
values: [
[
[16, 17]
],
[
[19, 24]
]
]
},
_40_: {
min: 22800,
max: 23100,
values: [
[
[18, 17]
],
[
[22, 23]
]
]
},
_41_: {
min: 23200,
max: 23600,
values: [
[
[20, 14]
],
[
[24, 20]
]
]
},
_42_: {
min: 23200,
max: 23600,
values: [
[
[20, 14]
],
[
[24, 20]
]
]
},
_43_: {
min: 23700,
max: 24000,
values: [
[
[22, 14]
],
[
[26, 21]
]
]
},
_44_: {
min: 24100,
max: 24400,
values: [
[
[25, 13]
],
[
[30, 21]
]
]
},
_45_: {
min: 24600,
max: 24900,
values: [
[
[27, 13]
],
[
[null, null]
]
]
},
_46_: {
min: 25000,
max: 25500,
values: [
[
[null, null]
],
[
[null, null]
]
]
},
last_frame: {
min: 26000,
max: 26300,
}
}
// request initial animation frame
window.requestAnimationFrame(letsCutSomeTurkey);
var letsBeReallyAnnoying = false;
var lastTimestamp = 0;
var titleIsOnFlag = false;
function letsCutSomeTurkey(timestamp) {
var dinnerTime = Math.trunc(timestamp);
if (letsBeReallyAnnoying) {
if (timestamp - lastTimestamp > 300) {
renderFlashingTitle();
lastTimestamp = timestamp;
titleIsOnFlag = !titleIsOnFlag
}
}
for (var key in cookingObj) {
var turkeyLegObj = cookingObj[key];
if (dinnerTime > turkeyLegObj.min && dinnerTime < turkeyLegObj.max) {
if (key === 'last_frame') {
renderLastFrame();
letsBeReallyAnnoying = true; // trigger flashing text
lastTimestamp = timestamp;
} else if (key.length > 5) { // quick check. if we need to switch angle
renderDeadTurkey(turkeyLegObj);
} else {
renderTurkeyChase(turkeyLegObj);
}
delete cookingObj[key];
break;
}
}
// continually call function
window.requestAnimationFrame(letsCutSomeTurkey);
}
function renderTurkeyChase(obj) {
if (obj.plotid) {
zingchart.exec('thanksgiving', 'setseriesvalues', {
plotid: obj.plotid,
values: obj.values
});
} else { // assume both plots are being rendered
zingchart.exec('thanksgiving', 'setseriesvalues', {
values: obj.values
});
}
}
function renderDeadTurkey(obj) {
var carvingTheTurkey;
var tillingTheFarm;
if (obj.plotid) {
carvingTheTurkey = zingchart.exec('thanksgiving', 'getseriesdata', {
plotid: obj.plotid
});
carvingTheTurkey['marker']['angle'] = obj.angle;
zingchart.exec('thanksgiving', 'setseriesdata', {
plotid: obj.plotid,
data: carvingTheTurkey
});
} else { // assume both plots are being rendered
carvingTheTurkey = zingchart.exec('thanksgiving', 'getseriesdata', {
plotid: 'turkey'
});
var tillingTheFarm = zingchart.exec('thanksgiving', 'getseriesdata', {
plotid: 'farmer'
});
carvingTheTurkey['marker']['angle'] = obj.angle1;
// remove turkery
carvingTheTurkey['marker']['visible'] = false;
tillingTheFarm['marker']['angle'] = obj.angle2;
tillingTheFarm['marker']['background-image'] = farmerReverse;
}
}
/* //i717.photobucket.com/albums/ww173/prestonjjrtr/Smileys%20Holidays/Thanksgiving/TurkeyDinnerWine.gif */
function renderLastFrame() {
zingchart.exec('thanksgiving', 'setseriesdata', {
graphid: 0,
data: [{
"values": [
[48, 24]
],
"id": "roasting_turkey",
"marker": {
"type": "square",
"background-color": "none",
"border-color": "none",
"size": 170,
"backgroundRepeat": "no-repeat",
"background-image": "https://app.zingsoft.com/api/file/H1178XJH/turkey-wine.gif"
}
}]
});
}
function renderFlashingTitle() {
zingchart.exec('thanksgiving', 'modify', {
data: {
"title": {
"text": titleIsOnFlag ? '' : 'Happy Thanksgiving'
}
}
})
}
</script>
</body>
</html>
var farmerReverse = 'https://app.zingsoft.com/api/file/H1178XJH/farmer.gif';
var myTurkey = {
"type": "scatter",
"background-image": "https://app.zingsoft.com/api/file/H1178XJH/farm.png",
"title": {
"font-size": 95,
"font-color": "#f5005b",
"margin-top": 200
},
"scale-x": {
"values": "0:50:1",
"line-color": "none",
"tick": {
"line-color": "none"
},
"item": {
"visible": false
},
"guide": {
"visible": false
}
},
"scale-y": {
"values": "0:50:1",
"line-color": "none",
"tick": {
"line-color": "none"
},
"item": {
"visible": false
},
"guide": {
"visible": false
}
},
"plot": {
"tooltip": {
"visible": false
},
"-animation": {
"efffect": 3,
"method": 2,
"sequence": 2,
"onChange": true
}
},
"series": [{
"values": [
[19, 34]
],
"id": "turkey",
"marker": {
"type": "square",
"background-color": "none",
"border-color": "none",
"shadow": 0,
"size": 220,
"angle": 0, //drag back
"backgroundRepeat": "no-repeat",
"background-image": "https://app.zingsoft.com/api/file/H1178XJH/turkey.png"
}
},
{
"values": [
[null, null]
],
"id": "farmer",
"marker": {
"type": "square",
"background-color": "none",
"border-color": "none",
"size": 170,
"backgroundRepeat": "no-repeat",
"background-image": "https://app.zingsoft.com/api/file/H1178XJH/farmer-solo.gif",
}
}
]
};
zingchart.render({
id: 'thanksgiving',
data: myTurkey,
height: '900',
width: '1280'
});
var cookingObj = {
_1_: {
min: 3000,
max: 3400,
values: [
[
[18, 34]
],
[
[null, null]
]
],
},
_1a_: {
min: 3500,
max: 3900,
values: [
[
[17, 35]
],
[
[null, null]
]
],
},
_1b_: {
min: 4000,
max: 4400,
values: [
[
[17, 35]
],
[
[null, null]
]
],
},
_2_: {
min: 4400,
max: 4800,
values: [
[
[16, 32]
],
[
[31, 20]
]
]
},
_3_: {
min: 4800,
max: 5200,
values: [
[
[12, 30]
],
[
[28, 18]
]
]
},
_4_: {
min: 5200,
max: 5600,
values: [
[
[14, 25]
],
[
[26, 16]
]
]
},
_5_: {
min: 5600,
max: 6000,
values: [
[
[15, 20]
],
[
[24, 16]
]
]
},
_6_: {
min: 6000,
max: 6400,
values: [
[
[12, 28]
],
[
[23, 15]
]
]
},
_7_: {
min: 6400,
max: 6800,
values: [
[
[10, 34]
],
[
[22, 14]
]
]
},
_8_: {
min: 6800,
max: 7200,
values: [
[
[8, 34]
],
[
[21, 15]
]
]
},
_9_: {
min: 7200,
max: 7600,
values: [
[
[4, 35]
],
[
[23, 17]
]
]
},
_10_: {
min: 7600,
max: 8000,
values: [
[
[4, 35]
],
[
[20, 16]
]
] // [ [[t,t]], [[f,f]] ]
},
_11_: {
min: 8900,
max: 9200,
values: [
[
[3, 36]
],
[
[20, 19]
]
]
},
_12_: {
min: 9500,
max: 9800,
values: [
[
[3, 36]
],
[
[20, 19]
]
]
},
_13_: {
min: 10100,
max: 10400,
values: [
[
[5, 34]
],
[
[18, 25]
]
]
},
_14_: {
min: 10700,
max: 11000,
values: [
[
[4, 36]
],
[
[16, 27]
]
]
},
_15_: {
min: 11200,
max: 11500,
values: [
[
[5, 33]
],
[
[14, 29]
]
]
},
_16_: {
min: 11800,
max: 12000,
values: [
[
[5, 34]
],
[
[12, 35]
]
]
},
_17_: {
min: 12200,
max: 12500,
values: [
[
[1, 33]
],
[
[10, 42]
]
]
},
_18_: {
min: 12800,
max: 13100,
values: [
[
[2, 34]
],
[
[10, 42]
]
]
},
_19_: {
min: 13200,
max: 13600,
values: [
[
[6, 35]
],
[
[7, 40]
]
]
},
_20_: {
min: 13800,
max: 14000,
values: [
[
[9, 36]
],
[
[8, 38]
]
]
},
_21_: {
min: 14300,
max: 14800,
values: [
[
[14, 35]
],
[
[6, 40]
]
]
},
_22_: {
min: 15000,
max: 15500,
values: [
[
[18, 35]
],
[
[5, 41]
]
]
},
_23_: {
min: 15600,
max: 15900,
values: [
[
[21, 33]
],
[
[7, 41]
]
]
},
_24_: {
min: 16000,
max: 16400,
values: [
[
[20, 30]
],
[
[10, 40]
]
]
},
_25_: {
min: 16600,
max: 16900,
values: [
[
[21, 36]
],
[
[11, 39]
]
]
},
_26_: {
min: 17000,
max: 17400,
values: [
[
[23, 36]
],
[
[11, 36]
]
]
},
_27_: {
min: 17400,
max: 17800,
values: [
[
[null, null]
],
[
[14, 36]
]
]
},
_28_: {
min: 17800,
max: 18200,
values: [
[
[null, null]
],
[
[17, 36]
]
]
},
_29_: {
min: 18200,
max: 18600,
values: [
[
[null, null]
],
[
[21, 55]
]
]
},
angle_turkey_and_farmer: { // no id does both
min: 18550,
max: 99000,
angle1: -70, // turkey
angle2: 0, // farmer
},
_30_: {
min: 18600,
max: 19000,
values: [
[
[21, 35]
],
[
[17, 35]
]
]
},
_31_: {
min: 19000,
max: 19400,
values: [
[
[19, 34]
],
[
[15, 34]
]
]
},
_32_: {
min: 19500,
max: 19900,
values: [
[
[17, 34]
],
[
[13, 32]
]
]
},
_33_: {
min: 19900,
max: 20200,
values: [
[
[16, 32]
],
[
[12, 30]
]
]
},
_34_: {
min: 20200,
max: 20600,
values: [
[
[17, 30]
],
[
[13, 28]
]
]
},
_35_: {
min: 20700,
max: 20900,
values: [
[
[15, 28]
],
[
[13, 25]
]
]
},
_36_: {
min: 21000,
max: 21400,
values: [
[
[15, 24]
],
[
[13, 21]
]
]
},
_37_: {
min: 21400,
max: 21800,
values: [
[
[15, 22]
],
[
[16, 20]
]
]
},
_38_: {
min: 21900,
max: 22200,
values: [
[
[15, 20]
],
[
[18, 21]
]
]
},
_39_: {
min: 22500,
max: 22700,
values: [
[
[16, 17]
],
[
[19, 24]
]
]
},
_40_: {
min: 22800,
max: 23100,
values: [
[
[18, 17]
],
[
[22, 23]
]
]
},
_41_: {
min: 23200,
max: 23600,
values: [
[
[20, 14]
],
[
[24, 20]
]
]
},
_42_: {
min: 23200,
max: 23600,
values: [
[
[20, 14]
],
[
[24, 20]
]
]
},
_43_: {
min: 23700,
max: 24000,
values: [
[
[22, 14]
],
[
[26, 21]
]
]
},
_44_: {
min: 24100,
max: 24400,
values: [
[
[25, 13]
],
[
[30, 21]
]
]
},
_45_: {
min: 24600,
max: 24900,
values: [
[
[27, 13]
],
[
[null, null]
]
]
},
_46_: {
min: 25000,
max: 25500,
values: [
[
[null, null]
],
[
[null, null]
]
]
},
last_frame: {
min: 26000,
max: 26300,
}
}
// request initial animation frame
window.requestAnimationFrame(letsCutSomeTurkey);
var letsBeReallyAnnoying = false;
var lastTimestamp = 0;
var titleIsOnFlag = false;
function letsCutSomeTurkey(timestamp) {
var dinnerTime = Math.trunc(timestamp);
if (letsBeReallyAnnoying) {
if (timestamp - lastTimestamp > 300) {
renderFlashingTitle();
lastTimestamp = timestamp;
titleIsOnFlag = !titleIsOnFlag
}
}
for (var key in cookingObj) {
var turkeyLegObj = cookingObj[key];
if (dinnerTime > turkeyLegObj.min && dinnerTime < turkeyLegObj.max) {
if (key === 'last_frame') {
renderLastFrame();
letsBeReallyAnnoying = true; // trigger flashing text
lastTimestamp = timestamp;
} else if (key.length > 5) { // quick check. if we need to switch angle
renderDeadTurkey(turkeyLegObj);
} else {
renderTurkeyChase(turkeyLegObj);
}
delete cookingObj[key];
break;
}
}
// continually call function
window.requestAnimationFrame(letsCutSomeTurkey);
}
function renderTurkeyChase(obj) {
if (obj.plotid) {
zingchart.exec('thanksgiving', 'setseriesvalues', {
plotid: obj.plotid,
values: obj.values
});
} else { // assume both plots are being rendered
zingchart.exec('thanksgiving', 'setseriesvalues', {
values: obj.values
});
}
}
function renderDeadTurkey(obj) {
var carvingTheTurkey;
var tillingTheFarm;
if (obj.plotid) {
carvingTheTurkey = zingchart.exec('thanksgiving', 'getseriesdata', {
plotid: obj.plotid
});
carvingTheTurkey['marker']['angle'] = obj.angle;
zingchart.exec('thanksgiving', 'setseriesdata', {
plotid: obj.plotid,
data: carvingTheTurkey
});
} else { // assume both plots are being rendered
carvingTheTurkey = zingchart.exec('thanksgiving', 'getseriesdata', {
plotid: 'turkey'
});
var tillingTheFarm = zingchart.exec('thanksgiving', 'getseriesdata', {
plotid: 'farmer'
});
carvingTheTurkey['marker']['angle'] = obj.angle1;
// remove turkery
carvingTheTurkey['marker']['visible'] = false;
tillingTheFarm['marker']['angle'] = obj.angle2;
tillingTheFarm['marker']['background-image'] = farmerReverse;
}
}
/* //i717.photobucket.com/albums/ww173/prestonjjrtr/Smileys%20Holidays/Thanksgiving/TurkeyDinnerWine.gif */
function renderLastFrame() {
zingchart.exec('thanksgiving', 'setseriesdata', {
graphid: 0,
data: [{
"values": [
[48, 24]
],
"id": "roasting_turkey",
"marker": {
"type": "square",
"background-color": "none",
"border-color": "none",
"size": 170,
"backgroundRepeat": "no-repeat",
"background-image": "https://app.zingsoft.com/api/file/H1178XJH/turkey-wine.gif"
}
}]
});
}
function renderFlashingTitle() {
zingchart.exec('thanksgiving', 'modify', {
data: {
"title": {
"text": titleIsOnFlag ? '' : 'Happy Thanksgiving'
}
}
})
}