<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
#interactive {
margin-bottom: 10px;
}
.hidden-prompt {
display: none;
}
.fa-circle-o {
color: #c30;
}
.fa-check-circle-o {
color: #7ca82b;
}
[id^=list] {
background-color: #F4F4F4;
border-radius: 4px;
padding: 10px;
height: 110px;
}
#list2 {
display: none;
}
#list3 {
display: none;
}
#list4 {
display: none;
}
#interactive-graph-id0-objects-top circle {
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[id^=interactive-graph-id0-shape-noanim] {
animation: none !important;
-moz-animation: none !important;
/* Firefox */
-webkit-animation: none !important;
/* Safari and Chrome */
-o-animation: none !important;
/* Opera */
}
[id^=list] {
transition: height 2s;
-moz-transition: height 2s;
/* Firefox 4 */
-webkit-transition: height 2s;
/* Safari and Chrome */
-o-transition: height 2s;
/* Opera */
}
body {
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
</style>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style></style>
</head>
<body>
<div id='interactive'></div>
<div style="min-height:430px;">
<div id="interactive" class="chart-placeholder"></div>
<div class="centered" id="list1">
<div>
<div><i class="fa fa-circle-o" id="action1-1"></i> <span>Hover over a bar to see the tooltip.</span></div>
<div><i class="fa fa-circle-o" id="action1-2"></i> <span>Click on a legend item to toggle products.</span></div>
<div class="hidden-prompt" id="prompt1-3"><i class="fa fa-circle-o" id="action1-3"></i> <span>Now, click on a bar segment.</span></div>
</div>
</div>
<div id="list2">
<div class="centered">
<div id="info1"></div>
<div><i class="fa fa-circle-o" id="action2-2"></i> <span>Click and drag to zoom, or use the zoom controls.</span></div>
<div><i class="fa fa-circle-o" id="action2-1"></i> <span>Drag the scroll bar or preview handles.</span></div>
<div class="hidden-prompt" id="prompt2-3"><i class="fa fa-circle-o" id="action2-3"></i> <span>Now, select a product's bar.</span></div>
</div>
</div>
<div id="list3">
<div class="centered">
<div>This chart is showing a single product in two charts: one by revenue, one by number of transactions.
<br /><i class="fa fa-circle-o" id="action3-1"></i> <span>Hover over a chart to see the shared crosshair of the other chart.</span>
</div>
<div class="hidden-prompt" id="prompt3-2"><i class="fa fa-circle-o" id="action3-2"></i> <span>Now, click on a transaction to see sales by location.</span></div>
</div>
</div>
<div id="list4">Thanks for taking a look at some of the interactive features ZingChart has to offer! <a href="#" id="restartBtn">Start over?</a></div>
</div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var oSavedChart2, oSavedChart3;
var aLabels = [];
var aBurgers = [396913, 389658.5, 372542.5, 416993.5, 415475.5, 491029, 380748.5, 432591.5, 408606, 496556.5, 439395, 421448.5, 472752.5, 390659.5, 481052, 368043.5, 388685, 421888.5, 335830, 404629.5, 430138.5, 380231.5, 476338.5, 445164.5, 400559.5, 381755, 361256.5, 336495.5, 417202.5, 417472, 421107.5, 345471.5, 420084.5, 403199.5, 349200.5, 430419];
var aFries = [131305.5, 120313.5, 96967.5, 104880, 113172, 112639.5, 121602, 121084.5, 108736.5, 105789, 117139.5, 117682.5, 141787.5, 104947.5, 99141, 115342.5, 114259.5, 117624, 119613, 116079, 125955, 119406, 118629, 107458.5, 104362.5, 101518.5, 104380.5, 113367, 122548.5, 112105.5, 108640.5, 119797.5, 112216.5, 98821.5, 108972, 110578.5];
var aShakes = [189745, 209532.5, 198027.5, 197210, 193497.5, 185797.5, 194602.5, 183852.5, 158705, 195552.5, 185767.5, 183040, 178495, 212522.5, 204565, 183115, 202615, 191275, 189595, 200705, 194557.5, 200637.5, 182547.5, 211557.5, 162640, 199110, 185422.5, 210700, 191800, 171335, 182220, 168185, 194437.5, 207652.5, 188045, 194057.5];
var oDefaults = {
"root": {
"gui": {
"context-menu": {
"button": {
"visible": false
},
"gear": {
"visible": false
}
}
}
},
"graph": {
"tooltip": {
"shadow": 0,
"border-radius": 3
},
"crosshair-x": {
"line-color": "white",
"plot-label": {
"border-radius": 3
},
"scale-label": {
"visible": 0
}
},
"background-color": "none",
"border-color": "#eee",
"border-radius": 3,
"border-width": 1,
"scale-x": {
"guide": {
"visible": 0
},
"alpha": 0.5,
"line-color": "#5E5C5B",
"item": {
"color": "#5E5C5B"
},
"tick": {
"line-color": "#5E5C5B",
"alpha": 0.8
},
"items-overlap": true
},
"scale-y": {
"guide": {
"line-width": 1,
"-line-style": "dashed"
},
"line-color": "none",
"item": {
"color": "#5E5C5B"
},
"tick": {
"visible": false
}
},
"legend": {
"marker": {
"type": "circle"
},
"layout": "h",
"background-color": "none",
"border-color": "none",
"shadow": {
"visible": 0
},
"marker": {
"border-color": "white"
},
"item": {
"color": "#5E5C5B"
},
"y": "8.5%"
},
"title": {
"color": "#5E5C5B",
"background-color": "none",
"height": 24,
"text-align": "left",
"font-weight": "none"
}
}
};
var oChart = {
"type": "bar",
"utc": 1,
"plot": {
"stacked": 1,
"tooltip": {
"text": "%kt<br>%t: $%v",
"decimals": 2,
"thousands-separator": ","
},
"-animation": {
"delay": 10,
"effect": "1",
"speed": "200",
"method": "0",
"sequence": "0",
"attributes": {
}
}
},
"plotarea": {
"margin-left": 70
},
"title": {
"text": "Revenue by Month"
},
"legend": {
"toggle-action": "remove"
},
"scale-y": {
"format": "$%v",
"thousands-separator": ","
},
"scale-x": {
"values": ["Jan 2013", "Feb 2013", "Mar 2013", "Apr 2013", "May 2013", "Jun 2013", "Jul 2013", "Aug 2013", "Sep 2013", "Oct 2013", "Nov 2013", "Dec 2013", "Jan 2014", "Feb 2014", "Mar 2014", "Apr 2014", "May 2014", "Jun 2014", "Jul 2014", "Aug 2014", "Sep 2014", "Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015", "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015"]
},
"series": [{
"values": aBurgers,
"text": "Burgers"
}, {
"values": aFries,
"text": "Fries"
}, {
"values": aShakes,
"text": "Shakes"
}]
};
function level2(p, nDays) {
var aBurgers = [],
aFries = [],
aShakes = [];
aLabels = [];
for (var n = 0; n < nDays; n++) {
aBurgers.push((Math.random() * (500000 - 300000) + 300000) / nDays);
aFries.push((Math.random() * (150000 - 100000) + 100000) / nDays);
aShakes.push((Math.random() * (220000 - 160000) + 160000) / nDays);
aLabels.push(p.scaletext.slice(0, 3) + " " + (n + 1) + ",<br>" + p.scaletext.slice(4, 8));
}
var oLevel2 = {
"type": "bar",
"plot": {
"tooltip": {
"text": "%t: $%v",
"decimals": 2,
"thousands-separator": ","
}
},
"plotarea": {
"margin-left": 70,
"margin-bottom": 128
},
"title": {
"text": "Revenue by Product by Day"
},
"legend": {
"layout": "h"
},
"shapes": [{
"type": "rectangle",
"id": "up1",
"z-index": 99,
"width": 70,
"height": 20,
"border-width": 1,
"border-color": "#5E5C5B",
"border-radius": 8,
"background-color": "white",
"x": "90%",
"y": 15,
"cursor": "hand",
"shadow": 1,
"label": {
"text": "Up A Level",
"color": "#5E5C5B"
}
}, {
"type": "rectangle",
"id": "zoomout",
"width": 40,
"height": 20,
"border-width": 1,
"border-color": "#999",
"border-radius-top-left": 8,
"border-radius-bottom-left": 8,
"background-color": "white",
"x": "2.5%",
"y": "10%",
"cursor": "hand",
"shadow": 1,
"label": {
"text": "-"
}
},
{
"type": "rectangle",
"id": "zoomin",
"width": 40,
"height": 20,
"border-width": 1,
"border-color": "#999",
"border-radius-top-right": 8,
"border-radius-bottom-right": 8,
"background-color": "white",
"x": "6%",
"y": "10%",
"cursor": "hand",
"shadow": 1,
"label": {
"text": "+"
}
}
],
"scale-y": {
"format": "$%v",
"thousands-separator": ",",
"max-value": 20000
},
"scale-x": {
"values": aLabels,
"zooming": 1
},
"scroll-x": {},
"preview": {
"margin-left": 70
},
"series": [{
"values": aBurgers,
"text": "Burgers"
}, {
"values": aFries,
"text": "Fries"
}, {
"values": aShakes,
"text": "Shakes"
}]
}
return oLevel2;
};
function level3(p, aChartValues) {
var aLabelsNew = [];
for (var n = 0; n < aLabels.length; n++) {
aLabelsNew.push(aLabels[n].replace(/(<br>)/, ' '));
}
var aSeries = [],
aSeries2 = [],
aChartValues2 = [],
title = null;
if (p.plotindex == 0) {
title = "Burgers";
aSeries = [{
"values": aChartValues[0],
"text": "Burgers"
}];
for (var n = 0; n < aChartValues[0].length; n++) {
aChartValues2.push(Math.floor(aChartValues[0][n] / 5.5));
}
aSeries2 = [{
"values": aChartValues2,
"text": "Burgers"
}];
} else if (p.plotindex == 1) {
title = "Fries";
aSeries = [{
"values": aChartValues[1],
"text": "Fries",
"palette": 1
}];
for (var n = 0; n < aChartValues[1].length; n++) {
aChartValues2.push(Math.floor(aChartValues[1][n] / 1.5));
}
aSeries2 = [{
"values": aChartValues2,
"text": "Fries",
"palette": 1
}];
} else {
title = "Shakes";
aSeries = [{
"values": aChartValues[2],
"text": "Shakes",
"palette": 2
}];
for (var n = 0; n < aChartValues[2].length; n++) {
aChartValues2.push(Math.floor(aChartValues[2][n] / 2.5));
}
aSeries2 = [{
"values": aChartValues2,
"text": "Shakes",
"palette": 2
}];
}
var oLevel3 = {
"graphset": [{
"type": "bar",
"plot": {
"tooltip": {
"text": "%t: $%v",
"decimals": 2,
"thousands-separator": ",",
"visible": 0
}
},
"shapes": [{
"type": "rectangle",
"id": "up2",
"z-index": 99,
"width": 70,
"height": 20,
"border-width": 1,
"border-color": "#5E5C5B",
"border-radius": 8,
"background-color": "white",
"x": "90%",
"y": 15,
"cursor": "hand",
"shadow": 1,
"label": {
"text": "Up A Level",
"color": "#5E5C5B"
}
}],
"plotarea": {
"margin-bottom": "20%",
"margin-top": "28%"
},
"title": {
"text": "Revenue From " + title,
},
"legend": {
"shared": 1,
"y": "11%"
},
"scale-x": {
"labels": aLabelsNew
},
"scale-y": {
"format": "$%v"
},
"crosshair-x": {
"shared": 1,
"plot-label": {
"text": "$%v",
"thousands-separator": ",",
"decimals": 2
}
},
"series": aSeries
}, {
"type": "bar",
"plot": {
"tooltip": {
"visible": 0
}
},
"title": {
"text": "Number of Transactions by Date Nationwide"
},
"plotarea": {
"margin-bottom": "20%",
"margin-top": "22%"
},
"legend": {
"shared": 1,
"visible": 0
},
"scale-x": {
"labels": aLabelsNew
},
"crosshair-x": {
"shared": 1,
"plot-label": {
"text": "%v %t Sold",
"thousands-separator": ","
}
},
"series": aSeries2
}]
};
return oLevel3;
};
function level4() {
var oLevel4 = {
"title": {
"text": "Big Kahuna Burger Sales by Location"
},
"plotarea": {
"margin-top": "20%"
},
"background-color": "#E7EFF1",
"shapes": [
/*{
"type":"rectangle",
"id":"up3",
"z-index":99,
"width":70,
"height":20,
"border-width":1,
"border-color":"#666",
"border-radius":8,
"background-color":"#397CF8 #5F97FB",
"x":"90%",
"y":2,
"cursor":"hand",
"shadow":1,
"label":{
"text":"Up A Level",
"color":"white"
}
},*/
{
"type": "circle",
"id": "noanim1",
"size": 5,
"label": {
"text": "Low",
"width": 30,
"offset-x": 24,
"text-align": "left",
"color": "#5E5C5B"
},
"background-color": "#FFDBDB",
"border-color": "black",
"border-width": 1,
"x": "2%",
"y": 40
},
{
"type": "circle",
"id": "noanim2",
"size": 5,
"label": {
"text": "Medium",
"width": 30,
"offset-x": 24,
"text-align": "left",
"color": "#5E5C5B"
},
"background-color": "#FFB8B8",
"border-color": "black",
"border-width": 1,
"x": "2%",
"y": 60
},
{
"type": "circle",
"id": "noanim3",
"size": 5,
"label": {
"text": "High",
"width": 30,
"offset-x": 24,
"text-align": "left",
"color": "#5E5C5B"
},
"background-color": "#D95D5D",
"border-color": "black",
"border-width": 1,
"x": "2%",
"y": 80
},
{
"type": "circle",
"id": "noanim4",
"size": 5,
"label": {
"text": "Very High",
"width": 30,
"color": "#5E5C5B",
"offset-x": 24,
"text-align": "left"
},
"background-color": "#B53333",
"border-color": "black",
"border-width": 1,
"x": "2%",
"y": 100
},
{
"type": "zingchart.maps",
"options": {
"id": "map",
"name": "usa",
"scale": true,
"y": 14,
"style": {
"background-color": "rgb(203,224,168)",
"shadow": 0,
"label": {
"visible": 0
},
"hover-state": {
"background-color": "#A3BE74"
},
"tooltip": {
"visible": 0
}
}
}
}
]
};
return oLevel4;
};
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
var bZoomBuff = 0,
bAction1_1 = 0,
bAction1_2 = 0,
bAction2_1 = 0,
bAction2_2 = 0,
bAction3_1 = 0;
zingchart.MODULESDIR = "http://cdn.zingchart.io/lib/zingchart/modules/";
zingchart.loadModules('maps,maps-usa');
zingchart.render({
id: 'interactive',
width: '100%',
height: 320,
data: oChart,
defaults: oDefaults,
theme: "light",
events: {
shape_click: function(p) {
switch (p.shapeid) {
case "zoomin":
zingchart.exec('interactive', 'zoomin');
break;
case "zoomout":
zingchart.exec('interactive', 'zoomout');
break;
case "up1":
//Reset Flags
resetAll();
//Back to level 1
zingchart.exec('interactive', 'setdata', {
data: oChart
});
//Fade 2 to 1
setTimeout(function() {
$("#list2").fadeOut(400, function() {
$("#list1").fadeIn(400, function() {});
});
}, 200);
break;
case "up2":
//reset flags
resetAll();
//back to level 2
zingchart.exec('interactive', 'setdata', {
data: oSavedChart2
});
//fade 3 to 2
setTimeout(function() {
$("#list3").fadeOut(400, function() {
$("#list2").fadeIn(400, function() {});
});
}, 200);
break;
case "up3":
//flags
resetAll();
//back to level 3
zingchart.exec('interactive', 'setdata', {
data: oSavedChart3
});
//list 4 to 3
setTimeout(function() {
$("#list4").fadeOut(400, function() {
$("#list3").fadeIn(400, function() {});
});
}, 200);
setTimeout(function() {
zingchart.exec('interactive', 'removeobject', {
cls: 'marker'
});
}, 3000);
break;
}
},
node_mouseover: function(p) {
$('#action1-1').removeClass('fa-circle-o');
$('#action1-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Hover over a bar to see the tooltip.</strike>');
bAction1_1 = 1;
checkComplete();
},
legend_item_click: function(p) {
$('#action1-2').removeClass('fa-circle-o');
$('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
bAction1_2 = 1;
checkComplete();
},
legend_marker_click: function(p) {
$('#action1-2').removeClass('fa-circle-o');
$('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
bAction1_2 = 1;
checkComplete();
},
node_click: function(p) {
if (bAction1_1 && bAction1_2) {
$('#action1-3').removeClass('fa-circle-o');
$('#action1-3').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a bar segment.</strike>');
var aIndexValues = [];
for (var n = 0; n < 3; n++) {
var iVal;
iVal = zingchart.exec('interactive', 'getnodevalue', {
plotindex: n,
nodeindex: p.nodeindex
});
aIndexValues.push(iVal);
}
if (p.nodeindex < 12) {
var iMonth = p.nodeindex + 1,
iYear = 2013;
} else if (p.nodeindex >= 12 && p.nodeindex < 24) {
var iMonth = p.nodeindex - 11,
iYear = 2014;
} else {
var iMonth = p.nodeindex - 23,
iYear = 2015;
}
var nDays = daysInMonth(iMonth, iYear);
zingchart.exec('interactive', 'setdata', {
data: level2(p, nDays)
});
$('#info1').html('You are now viewing data for ' + p.scaletext + '.');
setTimeout(function() {
$("#list1").fadeOut(400, function() {
$("#list2").fadeIn(400, function() {
// Animation complete.
});
oSavedChart2 = zingchart.exec('interactive', 'getdata');
});
}, 200);
bAction1_1 = 0, bAction1_2 = 0;
}
if (bAction2_1 && bAction2_2) {
var aChartValues = zingchart.exec('interactive', 'getseriesvalues');
$('#action2-3').removeClass('fa-circle-o');
$('#action2-3').addClass('fa-check-circle-o ').next().replaceWith("<strike>Now, select a product's bar.</strike>");
zingchart.exec('interactive', 'setdata', {
data: level3(p, aChartValues)
});
setTimeout(function() {
$("#list2").fadeOut(400, function() {
$("#list3").fadeIn(400, function() {
// Animation complete.
});
oSavedChart3 = zingchart.exec('interactive', 'getdata');
});
}, 200);
bAction2_1 = 0, bAction2_2 = 0;
}
if (bAction3_1) {
$('#action3-2').removeClass('fa-circle-o');
$('#action3-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a transaction to see sales by location.</strike>');
zingchart.exec('interactive', 'setdata', {
data: level4()
});
setTimeout(function() {
$("#list3").fadeOut(400, function() {
$("#list4").fadeIn(400, function() {});
});
}, 200);
$('#list2').css('display', 'none');
//LonLats for rando cities across the US
var aLonLat = [
[-118.385450, 34.053300],
[-117.878705, 33.820872],
[-117.164594, 32.748663],
[-122.272206, 37.809039],
[-121.503163, 38.586083],
[-119.767324, 36.742530],
[-115.131093, 36.177030],
[-122.673207, 45.532628],
[-122.321645, 47.587005],
[-116.213246, 43.623464],
[-112.071401, 33.453573],
[-106.600209, 35.123630],
[-95.350209, 29.768327],
[-97.745229, 30.267741],
[-90.823842, 29.792165],
[-90.065786, 29.954117],
[-81.364614, 28.516140],
[-82.457753, 27.945053],
[-80.189077, 25.769364],
[-78.892690, 33.705278],
[-80.848256, 35.226902],
[-78.640004, 35.781405],
[-76.288930, 36.834913],
[-77.431508, 37.539474],
[-77.036000, 38.911673],
[-75.157338, 39.963768],
[-73.876058, 40.748623],
[-72.684041, 41.760365],
[-71.167928, 42.367994],
[-71.409627, 41.829986],
[-77.605916, 43.142394],
[-83.011190, 39.953241],
[-86.526815, 39.157021],
[-94.590779, 39.122936],
[-97.337361, 37.685247],
[-97.513143, 35.462139],
[-95.991536, 36.157074],
[-92.278157, 34.743094],
[-90.190755, 32.297944],
[-86.806966, 33.533740],
[-84.488851, 33.771514],
[-84.286977, 33.900414],
[-86.791860, 36.149312],
[-85.737172, 38.257931],
[-81.639272, 38.350610],
[-157.858382, 21.302330]
];
var aXY = [];
for (var n = 0; n < aLonLat.length; n++) {
aXY.push(zingchart.maps.getXY("map", aLonLat[n]));
}
var aShapes = [];
for (var n = 0; n < aXY.length; n++) {
var sBg, iColorVal = Math.floor(Math.random() * (5 - 1)) + 1;
switch (iColorVal) {
case 1:
sBg = "#FFDBDB";
break;
case 2:
sBg = "#FFB8B8";
break;
case 3:
sBg = "#D95D5D";
break;
case 4:
sBg = "#B53333";
break;
}
var oShape = {
"type": "circle",
"size": 3,
"cls": "marker",
"border-width": 1,
"border-color": "black",
"background-color": sBg,
"x": aXY[n][0],
"y": aXY[n][1]
}
aShapes.push(oShape);
}
//Draw shapes
setTimeout(function() {
zingchart.exec('interactive', 'addobject', {
type: "shape",
data: aShapes
});
}, 1000);
}
},
zoom: function(p) {
if (p.scroll || p.preview) {
$('#action2-1').removeClass('fa-circle-o');
$('#action2-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Drag the scroll bar or preview handles.</strike>');
bAction2_1 = 1;
checkComplete2();
} else {
$('#action2-2').removeClass('fa-circle-o');
$('#action2-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click and drag to zoom, or use the zoom controls.</strike>');
bAction2_2 = 1;
checkComplete2();
}
},
guide_mousemove: function(p) {
$('#action3-1').removeClass('fa-circle-o');
$('#action3-1').addClass('fa-check-circle-o').next().replaceWith('<strike>Hover over a chart to see the shared crosshair of the other chart.</strike>');
$('#prompt3-2').css('display', 'initial');
bAction3_1 = 1;
}
}
});
function checkComplete() {
if (bAction1_1 && bAction1_2) {
$('#prompt1-3').css('display', 'initial');
}
};
function checkComplete2() {
if (bAction2_1 && bAction2_2) {
$('#prompt2-3').css('display', 'initial');
}
};
function checkComplete3() {
if (bAction3_1) {
$('#prompt3-2').css('display', 'initial');
}
};
function resetAll() {
//Reset progress flag
bAction1_1 = 0, bAction1_2 = 0, bAction2_1 = 0, bAction2_2 = 0, bAction3_1 = 0;
//Reset ticks and prompts
$('[id^=action]').attr('class', 'fa fa-circle-o');
$('[id^=prompt]').css('display', 'none');
$('#action1-1').next().replaceWith('<span>Hover over a bar to see the tooltip.</span>');
$('#action1-2').next().replaceWith('<span>Click on a legend item to toggle products.</span>');
$('#action1-3').next().replaceWith('<span>Now, click on a bar segment.</span>');
$('#action2-1').next().replaceWith('<span>Drag the scroll bar or preview handles.</span>');
$('#action2-2').next().replaceWith('<span>Click and drag to zoom, or use the zoom controls.</span>');
$('#action2-3').next().replaceWith("<span>Now, select a product's bar.</span>");
$('#action3-1').next().replaceWith('<span>Hover over a chart to see the shared crosshair of the other chart.</span>');
$('#action3-2').next().replaceWith('<span>Now, click on a transaction to see sales by location.</span>');
//Remove markers
setTimeout(function() {
zingchart.exec('interactive', 'removeobject', {
cls: 'marker'
});
}, 2000);
};
$('#restartBtn').click(function() {
resetAll();
zingchart.exec('interactive', 'setdata', {
data: oChart
});
zingchart.exec('interactive', 'removeobject', {
cls: 'marker'
});
setTimeout(function() {
$("#list4").fadeOut(400, function() {
$("#list1").fadeIn(400, function() {});
});
}, 200);
});
</script>
</body>
</html>
var oSavedChart2, oSavedChart3;
var aLabels = [];
var aBurgers = [396913, 389658.5, 372542.5, 416993.5, 415475.5, 491029, 380748.5, 432591.5, 408606, 496556.5, 439395, 421448.5, 472752.5, 390659.5, 481052, 368043.5, 388685, 421888.5, 335830, 404629.5, 430138.5, 380231.5, 476338.5, 445164.5, 400559.5, 381755, 361256.5, 336495.5, 417202.5, 417472, 421107.5, 345471.5, 420084.5, 403199.5, 349200.5, 430419];
var aFries = [131305.5, 120313.5, 96967.5, 104880, 113172, 112639.5, 121602, 121084.5, 108736.5, 105789, 117139.5, 117682.5, 141787.5, 104947.5, 99141, 115342.5, 114259.5, 117624, 119613, 116079, 125955, 119406, 118629, 107458.5, 104362.5, 101518.5, 104380.5, 113367, 122548.5, 112105.5, 108640.5, 119797.5, 112216.5, 98821.5, 108972, 110578.5];
var aShakes = [189745, 209532.5, 198027.5, 197210, 193497.5, 185797.5, 194602.5, 183852.5, 158705, 195552.5, 185767.5, 183040, 178495, 212522.5, 204565, 183115, 202615, 191275, 189595, 200705, 194557.5, 200637.5, 182547.5, 211557.5, 162640, 199110, 185422.5, 210700, 191800, 171335, 182220, 168185, 194437.5, 207652.5, 188045, 194057.5];
var oDefaults = {
"root": {
"gui": {
"context-menu": {
"button": {
"visible": false
},
"gear": {
"visible": false
}
}
}
},
"graph": {
"tooltip": {
"shadow": 0,
"border-radius": 3
},
"crosshair-x": {
"line-color": "white",
"plot-label": {
"border-radius": 3
},
"scale-label": {
"visible": 0
}
},
"background-color": "none",
"border-color": "#eee",
"border-radius": 3,
"border-width": 1,
"scale-x": {
"guide": {
"visible": 0
},
"alpha": 0.5,
"line-color": "#5E5C5B",
"item": {
"color": "#5E5C5B"
},
"tick": {
"line-color": "#5E5C5B",
"alpha": 0.8
},
"items-overlap": true
},
"scale-y": {
"guide": {
"line-width": 1,
"-line-style": "dashed"
},
"line-color": "none",
"item": {
"color": "#5E5C5B"
},
"tick": {
"visible": false
}
},
"legend": {
"marker": {
"type": "circle"
},
"layout": "h",
"background-color": "none",
"border-color": "none",
"shadow": {
"visible": 0
},
"marker": {
"border-color": "white"
},
"item": {
"color": "#5E5C5B"
},
"y": "8.5%"
},
"title": {
"color": "#5E5C5B",
"background-color": "none",
"height": 24,
"text-align": "left",
"font-weight": "none"
}
}
};
var oChart = {
"type": "bar",
"utc": 1,
"plot": {
"stacked": 1,
"tooltip": {
"text": "%kt<br>%t: $%v",
"decimals": 2,
"thousands-separator": ","
},
"-animation": {
"delay": 10,
"effect": "1",
"speed": "200",
"method": "0",
"sequence": "0",
"attributes": {
}
}
},
"plotarea": {
"margin-left": 70
},
"title": {
"text": "Revenue by Month"
},
"legend": {
"toggle-action": "remove"
},
"scale-y": {
"format": "$%v",
"thousands-separator": ","
},
"scale-x": {
"values": ["Jan 2013", "Feb 2013", "Mar 2013", "Apr 2013", "May 2013", "Jun 2013", "Jul 2013", "Aug 2013", "Sep 2013", "Oct 2013", "Nov 2013", "Dec 2013", "Jan 2014", "Feb 2014", "Mar 2014", "Apr 2014", "May 2014", "Jun 2014", "Jul 2014", "Aug 2014", "Sep 2014", "Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015", "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015"]
},
"series": [{
"values": aBurgers,
"text": "Burgers"
}, {
"values": aFries,
"text": "Fries"
}, {
"values": aShakes,
"text": "Shakes"
}]
};
function level2(p, nDays) {
var aBurgers = [],
aFries = [],
aShakes = [];
aLabels = [];
for (var n = 0; n < nDays; n++) {
aBurgers.push((Math.random() * (500000 - 300000) + 300000) / nDays);
aFries.push((Math.random() * (150000 - 100000) + 100000) / nDays);
aShakes.push((Math.random() * (220000 - 160000) + 160000) / nDays);
aLabels.push(p.scaletext.slice(0, 3) + " " + (n + 1) + ",<br>" + p.scaletext.slice(4, 8));
}
var oLevel2 = {
"type": "bar",
"plot": {
"tooltip": {
"text": "%t: $%v",
"decimals": 2,
"thousands-separator": ","
}
},
"plotarea": {
"margin-left": 70,
"margin-bottom": 128
},
"title": {
"text": "Revenue by Product by Day"
},
"legend": {
"layout": "h"
},
"shapes": [{
"type": "rectangle",
"id": "up1",
"z-index": 99,
"width": 70,
"height": 20,
"border-width": 1,
"border-color": "#5E5C5B",
"border-radius": 8,
"background-color": "white",
"x": "90%",
"y": 15,
"cursor": "hand",
"shadow": 1,
"label": {
"text": "Up A Level",
"color": "#5E5C5B"
}
}, {
"type": "rectangle",
"id": "zoomout",
"width": 40,
"height": 20,
"border-width": 1,
"border-color": "#999",
"border-radius-top-left": 8,
"border-radius-bottom-left": 8,
"background-color": "white",
"x": "2.5%",
"y": "10%",
"cursor": "hand",
"shadow": 1,
"label": {
"text": "-"
}
},
{
"type": "rectangle",
"id": "zoomin",
"width": 40,
"height": 20,
"border-width": 1,
"border-color": "#999",
"border-radius-top-right": 8,
"border-radius-bottom-right": 8,
"background-color": "white",
"x": "6%",
"y": "10%",
"cursor": "hand",
"shadow": 1,
"label": {
"text": "+"
}
}
],
"scale-y": {
"format": "$%v",
"thousands-separator": ",",
"max-value": 20000
},
"scale-x": {
"values": aLabels,
"zooming": 1
},
"scroll-x": {},
"preview": {
"margin-left": 70
},
"series": [{
"values": aBurgers,
"text": "Burgers"
}, {
"values": aFries,
"text": "Fries"
}, {
"values": aShakes,
"text": "Shakes"
}]
}
return oLevel2;
};
function level3(p, aChartValues) {
var aLabelsNew = [];
for (var n = 0; n < aLabels.length; n++) {
aLabelsNew.push(aLabels[n].replace(/(<br>)/, ' '));
}
var aSeries = [],
aSeries2 = [],
aChartValues2 = [],
title = null;
if (p.plotindex == 0) {
title = "Burgers";
aSeries = [{
"values": aChartValues[0],
"text": "Burgers"
}];
for (var n = 0; n < aChartValues[0].length; n++) {
aChartValues2.push(Math.floor(aChartValues[0][n] / 5.5));
}
aSeries2 = [{
"values": aChartValues2,
"text": "Burgers"
}];
} else if (p.plotindex == 1) {
title = "Fries";
aSeries = [{
"values": aChartValues[1],
"text": "Fries",
"palette": 1
}];
for (var n = 0; n < aChartValues[1].length; n++) {
aChartValues2.push(Math.floor(aChartValues[1][n] / 1.5));
}
aSeries2 = [{
"values": aChartValues2,
"text": "Fries",
"palette": 1
}];
} else {
title = "Shakes";
aSeries = [{
"values": aChartValues[2],
"text": "Shakes",
"palette": 2
}];
for (var n = 0; n < aChartValues[2].length; n++) {
aChartValues2.push(Math.floor(aChartValues[2][n] / 2.5));
}
aSeries2 = [{
"values": aChartValues2,
"text": "Shakes",
"palette": 2
}];
}
var oLevel3 = {
"graphset": [{
"type": "bar",
"plot": {
"tooltip": {
"text": "%t: $%v",
"decimals": 2,
"thousands-separator": ",",
"visible": 0
}
},
"shapes": [{
"type": "rectangle",
"id": "up2",
"z-index": 99,
"width": 70,
"height": 20,
"border-width": 1,
"border-color": "#5E5C5B",
"border-radius": 8,
"background-color": "white",
"x": "90%",
"y": 15,
"cursor": "hand",
"shadow": 1,
"label": {
"text": "Up A Level",
"color": "#5E5C5B"
}
}],
"plotarea": {
"margin-bottom": "20%",
"margin-top": "28%"
},
"title": {
"text": "Revenue From " + title,
},
"legend": {
"shared": 1,
"y": "11%"
},
"scale-x": {
"labels": aLabelsNew
},
"scale-y": {
"format": "$%v"
},
"crosshair-x": {
"shared": 1,
"plot-label": {
"text": "$%v",
"thousands-separator": ",",
"decimals": 2
}
},
"series": aSeries
}, {
"type": "bar",
"plot": {
"tooltip": {
"visible": 0
}
},
"title": {
"text": "Number of Transactions by Date Nationwide"
},
"plotarea": {
"margin-bottom": "20%",
"margin-top": "22%"
},
"legend": {
"shared": 1,
"visible": 0
},
"scale-x": {
"labels": aLabelsNew
},
"crosshair-x": {
"shared": 1,
"plot-label": {
"text": "%v %t Sold",
"thousands-separator": ","
}
},
"series": aSeries2
}]
};
return oLevel3;
};
function level4() {
var oLevel4 = {
"title": {
"text": "Big Kahuna Burger Sales by Location"
},
"plotarea": {
"margin-top": "20%"
},
"background-color": "#E7EFF1",
"shapes": [
/*{
"type":"rectangle",
"id":"up3",
"z-index":99,
"width":70,
"height":20,
"border-width":1,
"border-color":"#666",
"border-radius":8,
"background-color":"#397CF8 #5F97FB",
"x":"90%",
"y":2,
"cursor":"hand",
"shadow":1,
"label":{
"text":"Up A Level",
"color":"white"
}
},*/
{
"type": "circle",
"id": "noanim1",
"size": 5,
"label": {
"text": "Low",
"width": 30,
"offset-x": 24,
"text-align": "left",
"color": "#5E5C5B"
},
"background-color": "#FFDBDB",
"border-color": "black",
"border-width": 1,
"x": "2%",
"y": 40
},
{
"type": "circle",
"id": "noanim2",
"size": 5,
"label": {
"text": "Medium",
"width": 30,
"offset-x": 24,
"text-align": "left",
"color": "#5E5C5B"
},
"background-color": "#FFB8B8",
"border-color": "black",
"border-width": 1,
"x": "2%",
"y": 60
},
{
"type": "circle",
"id": "noanim3",
"size": 5,
"label": {
"text": "High",
"width": 30,
"offset-x": 24,
"text-align": "left",
"color": "#5E5C5B"
},
"background-color": "#D95D5D",
"border-color": "black",
"border-width": 1,
"x": "2%",
"y": 80
},
{
"type": "circle",
"id": "noanim4",
"size": 5,
"label": {
"text": "Very High",
"width": 30,
"color": "#5E5C5B",
"offset-x": 24,
"text-align": "left"
},
"background-color": "#B53333",
"border-color": "black",
"border-width": 1,
"x": "2%",
"y": 100
},
{
"type": "zingchart.maps",
"options": {
"id": "map",
"name": "usa",
"scale": true,
"y": 14,
"style": {
"background-color": "rgb(203,224,168)",
"shadow": 0,
"label": {
"visible": 0
},
"hover-state": {
"background-color": "#A3BE74"
},
"tooltip": {
"visible": 0
}
}
}
}
]
};
return oLevel4;
};
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
var bZoomBuff = 0,
bAction1_1 = 0,
bAction1_2 = 0,
bAction2_1 = 0,
bAction2_2 = 0,
bAction3_1 = 0;
zingchart.MODULESDIR = "http://cdn.zingchart.io/lib/zingchart/modules/";
zingchart.loadModules('maps,maps-usa');
zingchart.render({
id: 'interactive',
width: '100%',
height: 320,
data: oChart,
defaults: oDefaults,
theme: "light",
events: {
shape_click: function(p) {
switch (p.shapeid) {
case "zoomin":
zingchart.exec('interactive', 'zoomin');
break;
case "zoomout":
zingchart.exec('interactive', 'zoomout');
break;
case "up1":
//Reset Flags
resetAll();
//Back to level 1
zingchart.exec('interactive', 'setdata', {
data: oChart
});
//Fade 2 to 1
setTimeout(function() {
$("#list2").fadeOut(400, function() {
$("#list1").fadeIn(400, function() {});
});
}, 200);
break;
case "up2":
//reset flags
resetAll();
//back to level 2
zingchart.exec('interactive', 'setdata', {
data: oSavedChart2
});
//fade 3 to 2
setTimeout(function() {
$("#list3").fadeOut(400, function() {
$("#list2").fadeIn(400, function() {});
});
}, 200);
break;
case "up3":
//flags
resetAll();
//back to level 3
zingchart.exec('interactive', 'setdata', {
data: oSavedChart3
});
//list 4 to 3
setTimeout(function() {
$("#list4").fadeOut(400, function() {
$("#list3").fadeIn(400, function() {});
});
}, 200);
setTimeout(function() {
zingchart.exec('interactive', 'removeobject', {
cls: 'marker'
});
}, 3000);
break;
}
},
node_mouseover: function(p) {
$('#action1-1').removeClass('fa-circle-o');
$('#action1-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Hover over a bar to see the tooltip.</strike>');
bAction1_1 = 1;
checkComplete();
},
legend_item_click: function(p) {
$('#action1-2').removeClass('fa-circle-o');
$('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
bAction1_2 = 1;
checkComplete();
},
legend_marker_click: function(p) {
$('#action1-2').removeClass('fa-circle-o');
$('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
bAction1_2 = 1;
checkComplete();
},
node_click: function(p) {
if (bAction1_1 && bAction1_2) {
$('#action1-3').removeClass('fa-circle-o');
$('#action1-3').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a bar segment.</strike>');
var aIndexValues = [];
for (var n = 0; n < 3; n++) {
var iVal;
iVal = zingchart.exec('interactive', 'getnodevalue', {
plotindex: n,
nodeindex: p.nodeindex
});
aIndexValues.push(iVal);
}
if (p.nodeindex < 12) {
var iMonth = p.nodeindex + 1,
iYear = 2013;
} else if (p.nodeindex >= 12 && p.nodeindex < 24) {
var iMonth = p.nodeindex - 11,
iYear = 2014;
} else {
var iMonth = p.nodeindex - 23,
iYear = 2015;
}
var nDays = daysInMonth(iMonth, iYear);
zingchart.exec('interactive', 'setdata', {
data: level2(p, nDays)
});
$('#info1').html('You are now viewing data for ' + p.scaletext + '.');
setTimeout(function() {
$("#list1").fadeOut(400, function() {
$("#list2").fadeIn(400, function() {
// Animation complete.
});
oSavedChart2 = zingchart.exec('interactive', 'getdata');
});
}, 200);
bAction1_1 = 0, bAction1_2 = 0;
}
if (bAction2_1 && bAction2_2) {
var aChartValues = zingchart.exec('interactive', 'getseriesvalues');
$('#action2-3').removeClass('fa-circle-o');
$('#action2-3').addClass('fa-check-circle-o ').next().replaceWith("<strike>Now, select a product's bar.</strike>");
zingchart.exec('interactive', 'setdata', {
data: level3(p, aChartValues)
});
setTimeout(function() {
$("#list2").fadeOut(400, function() {
$("#list3").fadeIn(400, function() {
// Animation complete.
});
oSavedChart3 = zingchart.exec('interactive', 'getdata');
});
}, 200);
bAction2_1 = 0, bAction2_2 = 0;
}
if (bAction3_1) {
$('#action3-2').removeClass('fa-circle-o');
$('#action3-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a transaction to see sales by location.</strike>');
zingchart.exec('interactive', 'setdata', {
data: level4()
});
setTimeout(function() {
$("#list3").fadeOut(400, function() {
$("#list4").fadeIn(400, function() {});
});
}, 200);
$('#list2').css('display', 'none');
//LonLats for rando cities across the US
var aLonLat = [
[-118.385450, 34.053300],
[-117.878705, 33.820872],
[-117.164594, 32.748663],
[-122.272206, 37.809039],
[-121.503163, 38.586083],
[-119.767324, 36.742530],
[-115.131093, 36.177030],
[-122.673207, 45.532628],
[-122.321645, 47.587005],
[-116.213246, 43.623464],
[-112.071401, 33.453573],
[-106.600209, 35.123630],
[-95.350209, 29.768327],
[-97.745229, 30.267741],
[-90.823842, 29.792165],
[-90.065786, 29.954117],
[-81.364614, 28.516140],
[-82.457753, 27.945053],
[-80.189077, 25.769364],
[-78.892690, 33.705278],
[-80.848256, 35.226902],
[-78.640004, 35.781405],
[-76.288930, 36.834913],
[-77.431508, 37.539474],
[-77.036000, 38.911673],
[-75.157338, 39.963768],
[-73.876058, 40.748623],
[-72.684041, 41.760365],
[-71.167928, 42.367994],
[-71.409627, 41.829986],
[-77.605916, 43.142394],
[-83.011190, 39.953241],
[-86.526815, 39.157021],
[-94.590779, 39.122936],
[-97.337361, 37.685247],
[-97.513143, 35.462139],
[-95.991536, 36.157074],
[-92.278157, 34.743094],
[-90.190755, 32.297944],
[-86.806966, 33.533740],
[-84.488851, 33.771514],
[-84.286977, 33.900414],
[-86.791860, 36.149312],
[-85.737172, 38.257931],
[-81.639272, 38.350610],
[-157.858382, 21.302330]
];
var aXY = [];
for (var n = 0; n < aLonLat.length; n++) {
aXY.push(zingchart.maps.getXY("map", aLonLat[n]));
}
var aShapes = [];
for (var n = 0; n < aXY.length; n++) {
var sBg, iColorVal = Math.floor(Math.random() * (5 - 1)) + 1;
switch (iColorVal) {
case 1:
sBg = "#FFDBDB";
break;
case 2:
sBg = "#FFB8B8";
break;
case 3:
sBg = "#D95D5D";
break;
case 4:
sBg = "#B53333";
break;
}
var oShape = {
"type": "circle",
"size": 3,
"cls": "marker",
"border-width": 1,
"border-color": "black",
"background-color": sBg,
"x": aXY[n][0],
"y": aXY[n][1]
}
aShapes.push(oShape);
}
//Draw shapes
setTimeout(function() {
zingchart.exec('interactive', 'addobject', {
type: "shape",
data: aShapes
});
}, 1000);
}
},
zoom: function(p) {
if (p.scroll || p.preview) {
$('#action2-1').removeClass('fa-circle-o');
$('#action2-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Drag the scroll bar or preview handles.</strike>');
bAction2_1 = 1;
checkComplete2();
} else {
$('#action2-2').removeClass('fa-circle-o');
$('#action2-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click and drag to zoom, or use the zoom controls.</strike>');
bAction2_2 = 1;
checkComplete2();
}
},
guide_mousemove: function(p) {
$('#action3-1').removeClass('fa-circle-o');
$('#action3-1').addClass('fa-check-circle-o').next().replaceWith('<strike>Hover over a chart to see the shared crosshair of the other chart.</strike>');
$('#prompt3-2').css('display', 'initial');
bAction3_1 = 1;
}
}
});
function checkComplete() {
if (bAction1_1 && bAction1_2) {
$('#prompt1-3').css('display', 'initial');
}
};
function checkComplete2() {
if (bAction2_1 && bAction2_2) {
$('#prompt2-3').css('display', 'initial');
}
};
function checkComplete3() {
if (bAction3_1) {
$('#prompt3-2').css('display', 'initial');
}
};
function resetAll() {
//Reset progress flag
bAction1_1 = 0, bAction1_2 = 0, bAction2_1 = 0, bAction2_2 = 0, bAction3_1 = 0;
//Reset ticks and prompts
$('[id^=action]').attr('class', 'fa fa-circle-o');
$('[id^=prompt]').css('display', 'none');
$('#action1-1').next().replaceWith('<span>Hover over a bar to see the tooltip.</span>');
$('#action1-2').next().replaceWith('<span>Click on a legend item to toggle products.</span>');
$('#action1-3').next().replaceWith('<span>Now, click on a bar segment.</span>');
$('#action2-1').next().replaceWith('<span>Drag the scroll bar or preview handles.</span>');
$('#action2-2').next().replaceWith('<span>Click and drag to zoom, or use the zoom controls.</span>');
$('#action2-3').next().replaceWith("<span>Now, select a product's bar.</span>");
$('#action3-1').next().replaceWith('<span>Hover over a chart to see the shared crosshair of the other chart.</span>');
$('#action3-2').next().replaceWith('<span>Now, click on a transaction to see sales by location.</span>');
//Remove markers
setTimeout(function() {
zingchart.exec('interactive', 'removeobject', {
cls: 'marker'
});
}, 2000);
};
$('#restartBtn').click(function() {
resetAll();
zingchart.exec('interactive', 'setdata', {
data: oChart
});
zingchart.exec('interactive', 'removeobject', {
cls: 'marker'
});
setTimeout(function() {
$("#list4").fadeOut(400, function() {
$("#list1").fadeIn(400, function() {});
});
}, 200);
});