<!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>
.zc-body {
background-color: #111;
}
.chart--container {
width: 100%;
height: 100%;
min-height: 530px;
}
#myChart-wrapper {
margin: auto;
}
.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 = {
theme: 'classic',
backgroundColor: '#111',
graphset: [{
type: 'null',
backgroundColor: 'none',
width: '100%',
height: '100%',
x: '0px',
y: '0px',
widgets: [{
type: 'dashboard_datetime',
id: 'dash1',
backgroundColor1: '#55154D',
backgroundColor2: '#44043C',
title: 'NEW YORK',
width: '230px',
height: '230px',
x: '10px',
y: '13px',
},
{
type: 'dashboard_metric',
id: 'dash2',
value: 813.74,
backgroundColor1: '#67001F',
backgroundColor2: '#56000E',
percent: +11.52,
title: 'VIRAL COEFFICIENT',
width: '230px',
height: '230px',
x: '248px',
y: '13px',
},
{
type: 'dashboard_accounts',
id: 'dash3',
width: '230px',
height: '230px',
x: '486px',
y: '13px',
},
{
type: 'dashboard_metric',
id: 'dash4',
value: 83.18,
backgroundColor1: '#014358',
backgroundColor2: '#003247',
percent: -21.27,
title: 'RETENTION RATE (30 DAYS)',
width: '230px',
height: '230px',
x: '10px',
y: '255px',
},
{
type: 'dashboard_metric',
id: 'dash5',
value: '487.32',
backgroundColor1: '#264031',
backgroundColor2: '#22392b',
percent: 4.37,
title: 'AVG TIME ON SITE',
width: '468px',
height: '230px',
x: '248px',
y: '255px',
}
]
}]
};
zingchart.widgets.dashboard_container = {
parse: function(data) {
let x = parseInt(data.x) || 0;
let y = parseInt(data.y) || 0;
let w = parseInt(data.width) || 240;
let h = parseInt(data.height) || 240;
let id = data.id || 'dash';
let backgroundColor1 = data.backgroundColor1 || '#232526';
let backgroundColor2 = data.backgroundColor2 || '#202122';
let json = {
labels: [],
shapes: [{
type: 'poly',
backgroundColor: backgroundColor1,
flat: true,
points: [
[x, y],
[x + w + 1, y],
[x, y + h + 1]
],
zIndex: -1000
},
{
type: 'poly',
backgroundColor: backgroundColor1 + ' ' + backgroundColor2,
fillAngle: 180,
fillOffsetX: w / 4,
flat: true,
points: [
[x + w, y + h],
[x + w, y],
[x, y + h]
],
zIndex: -1000
}
]
};
return json;
}
};
zingchart.widgets.dashboard_datetime = {
tinfo: function() {
let dow = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let shmon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
let date = new Date();
let hr = date.getHours(),
min = date.getMinutes(),
mod = 'AM';
if (hr > 12) {
hr -= 12;
mod = 'PM';
}
hr = (hr < 10) ? ('0' + hr) : hr;
min = (min < 10) ? ('0' + min) : min;
return {
dow: dow[date.getDay()],
day: date.getDate() + ' ' + shmon[date.getMonth()] + ' ' + date.getFullYear(),
time: hr + ':' + min + '<span style=\'font-size:39px\'>' + mod + '</span>'
};
},
update: function(chartid, snippetid, params) {
let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
zingchart.exec(chartid, 'updateobject', {
data: [{
type: 'label',
id: snippetid + '_time_sh',
text: tinfo.time
}, {
type: 'label',
id: snippetid + '_time',
text: tinfo.time
}]
});
},
parse: function(data) {
let x = parseInt(data.x) || 0;
let y = parseInt(data.y) || 0;
let w = parseInt(data.width) || 240;
let h = parseInt(data.height) || 240;
let id = data.id || 'dash';
let title = data.title || '';
let value = data.value || '';
let percent = data.percent || 0;
let json = zingchart.widgets.dashboard_container.parse(data);
window.setInterval(function() {
zingchart.widgets.dashboard_datetime.update(data.loader.id, id, {
time: Math.random()
});
}, 5000);
let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
json.labels.push({
text: title,
padding: '8px 8px 8px 28px',
bold: true,
color: '#eee',
flat: true,
fontSize: '13px',
textAlign: 'left',
x: x,
y: y,
width: w
}, {
id: id + '_time_sh',
text: tinfo.time,
padding: '8px 8px 8px 8px',
color: '#000',
flat: true,
fontSize: '55px',
textAlign: 'left',
vmlBackgroundImage: '',
x: x + 2,
y: y + 34,
width: w,
height: '90px'
}, {
id: id + '_time',
text: tinfo.time,
padding: '8px 8px 8px 8px',
color: '#eee',
flat: true,
fontSize: '55px',
textAlign: 'left',
width: w,
height: '90px',
x: x,
y: y + 32,
zIndex: 1000
}, {
text: tinfo.dow,
padding: '8px 8px 8px 8px',
color: '#eee',
flat: true,
fontSize: '27px',
textAlign: 'left',
width: w,
x: x + 2,
y: y + 130
}, {
text: tinfo.day,
padding: '8px 8px 8px 8px',
color: '#eee',
flat: true,
fontSize: '27px',
textAlign: 'left',
width: w,
x: x + 2,
y: y + 164
});
json.shapes.push({
type: 'line',
flat: true,
lineColor: '#121314',
lineWidth: '1px',
points: [
[x, y + 33],
[x + w, y + 33]
]
}, {
type: 'line',
flat: true,
lineColor: '#303334',
lineWidth: '1px',
points: [
[x, y + 34],
[x + w, y + 34]
]
}, {
type: 'line',
flat: true,
lineColor: '#121314',
lineWidth: '1px',
points: [
[x, y + 126],
[x + w, y + 126]
]
}, {
type: 'line',
flat: true,
lineColor: '#303334',
lineWidth: '1px',
points: [
[x, y + 127],
[x + w, y + 127]
]
});
return json;
}
}
zingchart.widgets.dashboard_metric = {
percent: function(percent) {
let ps = (String(Math.abs(percent))).split('.');
let p1 = ps[0] || '0';
let p2 = ps[1] || '00';
return p1 + '<span style=\'font-size:39px\'>.' + p2 + '%</span>';
},
update: function(chartid, snippetid, params) {
let value = parseFloat(Number(1000 * Math.random()).toFixed(2));
let percent = parseFloat(Number(-10 + 20 * Math.random()).toFixed(2));
zingchart.exec(chartid, 'updateobject', {
data: [{
objtype: 'label',
id: snippetid + '_value_sh',
text: value
}, {
objtype: 'label',
id: snippetid + '_value',
text: value
}, {
objtype: 'label',
id: snippetid + '_percent',
color: (percent > 0) ? '#77AB13' : '#AE432E',
text: zingchart.widgets.dashboard_metric.percent(percent)
}, {
objtype: 'shape',
id: snippetid + '_trend',
angle: (percent > 0) ? 0 : 180,
backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E'
}]
});
},
parse: function(data) {
let x = parseInt(data.x) || 0;
let y = parseInt(data.y) || 0;
let w = parseInt(data.width) || 240;
let h = parseInt(data.height) || 240;
let id = data.id || 'dash';
let title = data.title || '';
let value = data.value || '';
let percent = data.percent || 0;
let json = zingchart.widgets.dashboard_container.parse(data);
window.setInterval(function() {
zingchart.widgets.dashboard_metric.update(data.loader.id, id, {});
}, 2000 + parseInt(2000 * Math.random(), 10));
json.labels.push({
text: title,
padding: '8px 8px 8px 28px',
bold: true,
color: '#eee',
flat: true,
fontSize: '13px',
textAlign: 'left',
width: w,
x: x,
y: y
}, {
id: id + '_value_sh',
text: value,
color: '#000',
flat: true,
fontSize: '55px',
x: x + 12,
y: y + 42
}, {
id: id + '_value',
text: value,
color: '#eee',
flat: true,
fontSize: '55px',
x: x + 10,
y: y + 40
}, {
id: id + '_percent',
text: zingchart.widgets.dashboard_metric.percent(percent),
color: (percent > 0) ? '#77AB13' : '#AE432E',
flat: true,
fontSize: '47px',
x: x + 50,
y: y + 105
});
json.shapes.push({
type: 'line',
flat: true,
lineColor: '#121314',
lineWidth: 1,
points: [
[x, y + 33],
[x + w, y + 33]
]
}, {
type: 'line',
flat: true,
lineColor: '#303334',
lineWidth: 1,
points: [
[x, y + 34],
[x + w, y + 34]
]
}, {
type: 'circle',
backgroundColor: '#556D2C #384820',
fillAngle: 45,
fillOffsetX: 4,
fillOffsetY: 4,
flat: true,
size: 6,
x: x + 16,
y: y + 16
}, {
type: 'triangle',
id: id + '_trend',
angle: (percent > 0) ? 0 : 180,
backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E',
flat: true,
shadow: true,
shadowColor: '#000',
shadowDistance: 2,
size: 16,
x: x + 30,
y: y + 140
});
return json;
}
};
zingchart.widgets.dashboard_accounts = {
update: function(chartid, snippetid, params) {
zingchart.exec(chartid, 'setseriesvalues', {
graphid: snippetid + '_graph',
values: [
[10 + parseInt(100 * Math.random(), 10)],
[10 + parseInt(100 * Math.random(), 10)],
[10 + parseInt(100 * Math.random(), 10)]
],
smart: true
});
},
parse: function(data) {
let x = parseInt(data.x) || 0;
let y = parseInt(data.y) || 0;
let w = parseInt(data.width) || 240;
let h = parseInt(data.height) || 240;
let id = data.id || 'dash';
let json = zingchart.widgets.dashboard_container.parse(data);
window.setInterval(function() {
zingchart.widgets.dashboard_accounts.update(data.loader.id, id, {});
}, 5000);
json.graphs = json.graphs || [];
json.graphs.push({
type: 'pie',
id: id + '_graph',
backgroundColor: 'none',
width: w,
height: h,
x: x,
y: y,
title: {
text: 'Accounts',
backgroundColor: 'none',
color: '#fff'
},
legend: {
margin: 'auto auto 10px auto',
backgroundColor: 'none',
borderWidth: '0px',
item: {
margin: '2px',
padding: '2px',
color: '#fff'
},
layout: 'float',
marker: {
type: 'default',
borderRadius: '3px',
borderWidth: '0px',
width: '15px',
height: '10px'
},
shadow: false,
},
plot: {
_animation: {
speed: 500,
method: 'ANIMATION_LINEAR',
effect: 'ANIMATION_EXPAND_TOP'
},
shadow: false,
valueBox: {
visible: false
},
slice: 20
},
plotarea: {
margin: '10px 10px 40px 10px'
},
scale: {
sizeFactor: 0.65
},
series: [{
text: 'Free',
values: [103],
backgroundColor: '#058DC7'
},
{
text: 'Basic',
values: [37],
backgroundColor: '#50B432'
},
{
text: 'Premium',
values: [192],
backgroundColor: '#EF561A'
}
]
});
return json;
}
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 500,
width: 725
});
</script>
</body>
</html>
let chartConfig = {
theme: 'classic',
backgroundColor: '#111',
graphset: [{
type: 'null',
backgroundColor: 'none',
width: '100%',
height: '100%',
x: '0px',
y: '0px',
widgets: [{
type: 'dashboard_datetime',
id: 'dash1',
backgroundColor1: '#55154D',
backgroundColor2: '#44043C',
title: 'NEW YORK',
width: '230px',
height: '230px',
x: '10px',
y: '13px',
},
{
type: 'dashboard_metric',
id: 'dash2',
value: 813.74,
backgroundColor1: '#67001F',
backgroundColor2: '#56000E',
percent: +11.52,
title: 'VIRAL COEFFICIENT',
width: '230px',
height: '230px',
x: '248px',
y: '13px',
},
{
type: 'dashboard_accounts',
id: 'dash3',
width: '230px',
height: '230px',
x: '486px',
y: '13px',
},
{
type: 'dashboard_metric',
id: 'dash4',
value: 83.18,
backgroundColor1: '#014358',
backgroundColor2: '#003247',
percent: -21.27,
title: 'RETENTION RATE (30 DAYS)',
width: '230px',
height: '230px',
x: '10px',
y: '255px',
},
{
type: 'dashboard_metric',
id: 'dash5',
value: '487.32',
backgroundColor1: '#264031',
backgroundColor2: '#22392b',
percent: 4.37,
title: 'AVG TIME ON SITE',
width: '468px',
height: '230px',
x: '248px',
y: '255px',
}
]
}]
};
zingchart.widgets.dashboard_container = {
parse: function(data) {
let x = parseInt(data.x) || 0;
let y = parseInt(data.y) || 0;
let w = parseInt(data.width) || 240;
let h = parseInt(data.height) || 240;
let id = data.id || 'dash';
let backgroundColor1 = data.backgroundColor1 || '#232526';
let backgroundColor2 = data.backgroundColor2 || '#202122';
let json = {
labels: [],
shapes: [{
type: 'poly',
backgroundColor: backgroundColor1,
flat: true,
points: [
[x, y],
[x + w + 1, y],
[x, y + h + 1]
],
zIndex: -1000
},
{
type: 'poly',
backgroundColor: backgroundColor1 + ' ' + backgroundColor2,
fillAngle: 180,
fillOffsetX: w / 4,
flat: true,
points: [
[x + w, y + h],
[x + w, y],
[x, y + h]
],
zIndex: -1000
}
]
};
return json;
}
};
zingchart.widgets.dashboard_datetime = {
tinfo: function() {
let dow = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let shmon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
let date = new Date();
let hr = date.getHours(),
min = date.getMinutes(),
mod = 'AM';
if (hr > 12) {
hr -= 12;
mod = 'PM';
}
hr = (hr < 10) ? ('0' + hr) : hr;
min = (min < 10) ? ('0' + min) : min;
return {
dow: dow[date.getDay()],
day: date.getDate() + ' ' + shmon[date.getMonth()] + ' ' + date.getFullYear(),
time: hr + ':' + min + '<span style=\'font-size:39px\'>' + mod + '</span>'
};
},
update: function(chartid, snippetid, params) {
let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
zingchart.exec(chartid, 'updateobject', {
data: [{
type: 'label',
id: snippetid + '_time_sh',
text: tinfo.time
}, {
type: 'label',
id: snippetid + '_time',
text: tinfo.time
}]
});
},
parse: function(data) {
let x = parseInt(data.x) || 0;
let y = parseInt(data.y) || 0;
let w = parseInt(data.width) || 240;
let h = parseInt(data.height) || 240;
let id = data.id || 'dash';
let title = data.title || '';
let value = data.value || '';
let percent = data.percent || 0;
let json = zingchart.widgets.dashboard_container.parse(data);
window.setInterval(function() {
zingchart.widgets.dashboard_datetime.update(data.loader.id, id, {
time: Math.random()
});
}, 5000);
let tinfo = zingchart.widgets.dashboard_datetime.tinfo();
json.labels.push({
text: title,
padding: '8px 8px 8px 28px',
bold: true,
color: '#eee',
flat: true,
fontSize: '13px',
textAlign: 'left',
x: x,
y: y,
width: w
}, {
id: id + '_time_sh',
text: tinfo.time,
padding: '8px 8px 8px 8px',
color: '#000',
flat: true,
fontSize: '55px',
textAlign: 'left',
vmlBackgroundImage: '',
x: x + 2,
y: y + 34,
width: w,
height: '90px'
}, {
id: id + '_time',
text: tinfo.time,
padding: '8px 8px 8px 8px',
color: '#eee',
flat: true,
fontSize: '55px',
textAlign: 'left',
width: w,
height: '90px',
x: x,
y: y + 32,
zIndex: 1000
}, {
text: tinfo.dow,
padding: '8px 8px 8px 8px',
color: '#eee',
flat: true,
fontSize: '27px',
textAlign: 'left',
width: w,
x: x + 2,
y: y + 130
}, {
text: tinfo.day,
padding: '8px 8px 8px 8px',
color: '#eee',
flat: true,
fontSize: '27px',
textAlign: 'left',
width: w,
x: x + 2,
y: y + 164
});
json.shapes.push({
type: 'line',
flat: true,
lineColor: '#121314',
lineWidth: '1px',
points: [
[x, y + 33],
[x + w, y + 33]
]
}, {
type: 'line',
flat: true,
lineColor: '#303334',
lineWidth: '1px',
points: [
[x, y + 34],
[x + w, y + 34]
]
}, {
type: 'line',
flat: true,
lineColor: '#121314',
lineWidth: '1px',
points: [
[x, y + 126],
[x + w, y + 126]
]
}, {
type: 'line',
flat: true,
lineColor: '#303334',
lineWidth: '1px',
points: [
[x, y + 127],
[x + w, y + 127]
]
});
return json;
}
}
zingchart.widgets.dashboard_metric = {
percent: function(percent) {
let ps = (String(Math.abs(percent))).split('.');
let p1 = ps[0] || '0';
let p2 = ps[1] || '00';
return p1 + '<span style=\'font-size:39px\'>.' + p2 + '%</span>';
},
update: function(chartid, snippetid, params) {
let value = parseFloat(Number(1000 * Math.random()).toFixed(2));
let percent = parseFloat(Number(-10 + 20 * Math.random()).toFixed(2));
zingchart.exec(chartid, 'updateobject', {
data: [{
objtype: 'label',
id: snippetid + '_value_sh',
text: value
}, {
objtype: 'label',
id: snippetid + '_value',
text: value
}, {
objtype: 'label',
id: snippetid + '_percent',
color: (percent > 0) ? '#77AB13' : '#AE432E',
text: zingchart.widgets.dashboard_metric.percent(percent)
}, {
objtype: 'shape',
id: snippetid + '_trend',
angle: (percent > 0) ? 0 : 180,
backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E'
}]
});
},
parse: function(data) {
let x = parseInt(data.x) || 0;
let y = parseInt(data.y) || 0;
let w = parseInt(data.width) || 240;
let h = parseInt(data.height) || 240;
let id = data.id || 'dash';
let title = data.title || '';
let value = data.value || '';
let percent = data.percent || 0;
let json = zingchart.widgets.dashboard_container.parse(data);
window.setInterval(function() {
zingchart.widgets.dashboard_metric.update(data.loader.id, id, {});
}, 2000 + parseInt(2000 * Math.random(), 10));
json.labels.push({
text: title,
padding: '8px 8px 8px 28px',
bold: true,
color: '#eee',
flat: true,
fontSize: '13px',
textAlign: 'left',
width: w,
x: x,
y: y
}, {
id: id + '_value_sh',
text: value,
color: '#000',
flat: true,
fontSize: '55px',
x: x + 12,
y: y + 42
}, {
id: id + '_value',
text: value,
color: '#eee',
flat: true,
fontSize: '55px',
x: x + 10,
y: y + 40
}, {
id: id + '_percent',
text: zingchart.widgets.dashboard_metric.percent(percent),
color: (percent > 0) ? '#77AB13' : '#AE432E',
flat: true,
fontSize: '47px',
x: x + 50,
y: y + 105
});
json.shapes.push({
type: 'line',
flat: true,
lineColor: '#121314',
lineWidth: 1,
points: [
[x, y + 33],
[x + w, y + 33]
]
}, {
type: 'line',
flat: true,
lineColor: '#303334',
lineWidth: 1,
points: [
[x, y + 34],
[x + w, y + 34]
]
}, {
type: 'circle',
backgroundColor: '#556D2C #384820',
fillAngle: 45,
fillOffsetX: 4,
fillOffsetY: 4,
flat: true,
size: 6,
x: x + 16,
y: y + 16
}, {
type: 'triangle',
id: id + '_trend',
angle: (percent > 0) ? 0 : 180,
backgroundColor: (percent > 0) ? '#77AB13' : '#AE432E',
flat: true,
shadow: true,
shadowColor: '#000',
shadowDistance: 2,
size: 16,
x: x + 30,
y: y + 140
});
return json;
}
};
zingchart.widgets.dashboard_accounts = {
update: function(chartid, snippetid, params) {
zingchart.exec(chartid, 'setseriesvalues', {
graphid: snippetid + '_graph',
values: [
[10 + parseInt(100 * Math.random(), 10)],
[10 + parseInt(100 * Math.random(), 10)],
[10 + parseInt(100 * Math.random(), 10)]
],
smart: true
});
},
parse: function(data) {
let x = parseInt(data.x) || 0;
let y = parseInt(data.y) || 0;
let w = parseInt(data.width) || 240;
let h = parseInt(data.height) || 240;
let id = data.id || 'dash';
let json = zingchart.widgets.dashboard_container.parse(data);
window.setInterval(function() {
zingchart.widgets.dashboard_accounts.update(data.loader.id, id, {});
}, 5000);
json.graphs = json.graphs || [];
json.graphs.push({
type: 'pie',
id: id + '_graph',
backgroundColor: 'none',
width: w,
height: h,
x: x,
y: y,
title: {
text: 'Accounts',
backgroundColor: 'none',
color: '#fff'
},
legend: {
margin: 'auto auto 10px auto',
backgroundColor: 'none',
borderWidth: '0px',
item: {
margin: '2px',
padding: '2px',
color: '#fff'
},
layout: 'float',
marker: {
type: 'default',
borderRadius: '3px',
borderWidth: '0px',
width: '15px',
height: '10px'
},
shadow: false,
},
plot: {
_animation: {
speed: 500,
method: 'ANIMATION_LINEAR',
effect: 'ANIMATION_EXPAND_TOP'
},
shadow: false,
valueBox: {
visible: false
},
slice: 20
},
plotarea: {
margin: '10px 10px 40px 10px'
},
scale: {
sizeFactor: 0.65
},
series: [{
text: 'Free',
values: [103],
backgroundColor: '#058DC7'
},
{
text: 'Basic',
values: [37],
backgroundColor: '#50B432'
},
{
text: 'Premium',
values: [192],
backgroundColor: '#EF561A'
}
]
});
return json;
}
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: 500,
width: 725
});