<!DOCTYPE html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>Funny Chart Dashboard</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-html,
.zc-body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.dashboard--container {
display: flex;
flex-direction: column;
}
.dashboard--container .row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.chart--container {
display: flex;
flex-grow: 1;
min-width: 400px;
min-height: 400px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div class="dashboard--container">
<div class="row">
<!-- CHART CONTAINER -->
<div id="pieChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<!-- CHART CONTAINER -->
<div id="vennChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</div>
<div class="row">
<!-- CHART CONTAINER -->
<div id="barChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</div>
<div class="row">
<!-- CHART CONTAINER -->
<div id="wordCloud" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let pieChartConfig = {
type: 'pie',
globals: {
fontSize: '14px',
},
title: {
text: 'Should I Wear Pants Today',
fontSize: '24px',
},
legend: {
adjustLayout: true,
align: 'right',
item: {
padding: '3px 5px',
cursor: 'hand',
},
marker: {
size: 12,
cursor: 'hand',
},
toggleAction: 'remove',
verticalAlign: 'middle',
},
plot: {
valueBox: {
visible: false,
},
// hoverstate
tooltip: {
// % symbol represents a token to insert a value. Full list here:
// https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
text: '%plot-text',
padding: '10px 15px',
borderRadius: '3px',
},
animation: {
effect: 'ANIMATION_EXPAND_LEFT',
method: 'ANIMATION_STRONG_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 575,
},
cursor: 'hand',
refAngle: -45,
// animation docs here:
// https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
},
plotarea: {
margin: '65 dynamic',
},
// plot represents general series, or plots, styling
series: [{
text: 'No.',
// plot values
values: [75],
backgroundColor: '#0095d9',
},
{
text: 'Also no, <br>but in orange.',
// plot values
values: [10],
backgroundColor: '#ff9800',
border: '10px solid #ffcc80',
},
],
};
let vennChartConfig = {
type: 'venn',
globals: {
fontSize: '14px',
},
title: {
text: 'Daily Choices',
fontSize: '24px',
},
plot: {
tooltip: {
visible: false,
},
valueBox: {
text: '%t',
textAlign: 'left',
},
},
series: [{
// Set 1
text: 'Working',
values: [50],
backgroundColor: '#03a9f4',
join: [10],
},
{
// Set 2
text: 'Finding a new <br>Zoom filter to <br>impress the team',
values: [50],
backgroundColor: '#ff9800',
join: [10],
},
],
};
let barChartConfig = {
type: 'bar',
globals: {
fontSize: '14px',
},
title: {
text: 'Daily Work Productivity',
fontSize: '24px',
paddingLeft: '50px',
textAlign: 'left',
// will force margin and padding on title
// adjustLayout: true
},
legend: {
cursor: 'hand',
draggable: true,
dragHandler: 'icon',
header: {
height: '20px',
text: 'Daily Activities',
},
minimize: true,
toggleAction: 'remove',
},
// plot represents general series, or plots, styling
plot: {
stacked: true,
// hoverstate
tooltip: {
visible: false,
},
// animation docs here:
// https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
animation: {
effect: 'ANIMATION_SLIDE_TOP',
method: 'ANIMATION_BOUNCE_EASE_OUT',
sequence: 'ANIMATION_NO_SEQUENCE',
speed: 975,
},
lineWidth: '3px',
// line node styling
marker: {
borderWidth: '0px',
size: '6px',
},
},
plotarea: {
margin: '50px dynamic dynamic dynamic',
},
scaleX: {
// set scale label
label: {
text: 'Days',
},
// convert text on scale indices
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
scaleY: {
// scale label with unicode character
label: {
text: 'Work Productivity',
},
format: '%v%',
},
crosshairX: {
plotLabel: {
borderRadius: '3px',
padding: '10px 15px',
sortByValue: 'asc',
},
alpha: 0.28,
lineWidth: '100%',
},
series: [{
text: 'Working',
// plot values
values: [20, 30, 50, 50, 40, 0, 0],
backgroundColor: '#03a9f4',
},
{
text: 'Finding a New Zoom Filter',
// plot values
values: [60, 30, 0, 20, 0, 0, 0],
backgroundColor: '#ff9800',
},
{
text: 'Feeding my Kids',
// plot values
values: [20, 30, 30, 20, 30, 10, 20],
backgroundColor: '#4caf50',
},
{
text: 'Drinking Alcohol',
// plot values
values: [0, 10, 20, 10, 30, 90, 80],
backgroundColor: '#ff5722',
},
],
};
let wordcloudConfig = {
graphset: [{
type: 'null',
height: '10%',
title: {
text: 'Popular Phrases',
fontSize: '24px',
paddingLeft: '50px',
textAlign: 'left',
},
},
{
type: 'wordcloud',
y: '10%',
height: '90%',
options: {
words: [{
text: 'Joe Exotic',
count: 1000,
},
{
text: 'Tiger King',
count: 800,
},
{
text: 'Flatten the curve',
count: 400,
},
{
text: 'Carol Baskin',
count: 300,
},
{
text: 'Baskin Robbins',
count: 10,
},
{
text: 'Corona',
count: 500,
},
{
text: 'Toilet Paper',
count: 800,
},
{
text: 'Hand Sanitizer',
count: 650,
},
{
text: 'Work From Home',
count: 900,
},
{
text: 'Zoom',
count: 850,
},
{
text: 'Social Distancing',
count: 600,
},
{
text: 'Wash your hands',
count: 900,
},
{
text: 'Netflix',
count: 800,
},
{
text: 'Netflix Party',
count: 200,
},
{
text: 'White Claw',
count: 50,
},
{
text: 'Animal Crossing',
count: 250,
},
{
text: 'Bidet',
count: 400,
},
{
text: "Don't touch your face",
count: 900,
},
{
text: '6 feet',
count: 750,
},
{
text: 'Mask',
count: 950,
},
{
text: 'Stay Home',
count: 875,
},
{
text: 'Shelter In Place',
count: 725,
},
{
text: 'Hydroxychloroquine',
count: 650,
},
{
text: 'Quarantine',
count: 1000,
},
{
text: 'Does Bevmo Deliver?',
count: 300,
},
{
text: 'Blursday',
count: 150,
},
{
text: 'Facetime',
count: 800,
},
{
text: 'Nintendo Switch',
count: 550,
},
{
text: 'Chart',
count: 475,
},
{
text: 'Dashboard',
count: 450,
},
{
text: 'Covid',
count: 900,
},
{
text: 'Tony Robbins',
count: 45,
},
{
text: 'Italy',
count: 145,
},
{
text: 'China',
count: 345,
},
],
minLength: 4,
ignore: ['establish', 'this'],
colorType: 'palette',
palette: ['#03a9f4', '#ff9800', '#4caf50', '#ff5722'],
},
},
],
};
// render pie chart
zingchart.render({
id: 'pieChart',
data: pieChartConfig,
height: '100%',
width: '100%',
});
// render venn chart
zingchart.render({
id: 'vennChart',
data: vennChartConfig,
height: '100%',
width: '100%',
});
// render bar chart
zingchart.render({
id: 'barChart',
data: barChartConfig,
height: '100%',
width: '100%',
});
// render wordcloud
zingchart.render({
id: 'wordCloud',
data: wordcloudConfig,
height: '100%',
width: '100%',
});
});
</script>
</body>
</html>
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let pieChartConfig = {
type: 'pie',
globals: {
fontSize: '14px',
},
title: {
text: 'Should I Wear Pants Today',
fontSize: '24px',
},
legend: {
adjustLayout: true,
align: 'right',
item: {
padding: '3px 5px',
cursor: 'hand',
},
marker: {
size: 12,
cursor: 'hand',
},
toggleAction: 'remove',
verticalAlign: 'middle',
},
plot: {
valueBox: {
visible: false,
},
// hoverstate
tooltip: {
// % symbol represents a token to insert a value. Full list here:
// https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
text: '%plot-text',
padding: '10px 15px',
borderRadius: '3px',
},
animation: {
effect: 'ANIMATION_EXPAND_LEFT',
method: 'ANIMATION_STRONG_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 575,
},
cursor: 'hand',
refAngle: -45,
// animation docs here:
// https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
},
plotarea: {
margin: '65 dynamic',
},
// plot represents general series, or plots, styling
series: [
{
text: 'No.',
// plot values
values: [75],
backgroundColor: '#0095d9',
},
{
text: 'Also no, <br>but in orange.',
// plot values
values: [10],
backgroundColor: '#ff9800',
border: '10px solid #ffcc80',
},
],
};
let vennChartConfig = {
type: 'venn',
globals: {
fontSize: '14px',
},
title: {
text: 'Daily Choices',
fontSize: '24px',
},
plot: {
tooltip: {
visible: false,
},
valueBox: {
text: '%t',
textAlign: 'left',
},
},
series: [
{
// Set 1
text: 'Working',
values: [50],
backgroundColor: '#03a9f4',
join: [10],
},
{
// Set 2
text: 'Finding a new <br>Zoom filter to <br>impress the team',
values: [50],
backgroundColor: '#ff9800',
join: [10],
},
],
};
let barChartConfig = {
type: 'bar',
globals: {
fontSize: '14px',
},
title: {
text: 'Daily Work Productivity',
fontSize: '24px',
paddingLeft: '50px',
textAlign: 'left',
// will force margin and padding on title
// adjustLayout: true
},
legend: {
cursor: 'hand',
draggable: true,
dragHandler: 'icon',
header: {
height: '20px',
text: 'Daily Activities',
},
minimize: true,
toggleAction: 'remove',
},
// plot represents general series, or plots, styling
plot: {
stacked: true,
// hoverstate
tooltip: {
visible: false,
},
// animation docs here:
// https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
animation: {
effect: 'ANIMATION_SLIDE_TOP',
method: 'ANIMATION_BOUNCE_EASE_OUT',
sequence: 'ANIMATION_NO_SEQUENCE',
speed: 975,
},
lineWidth: '3px',
// line node styling
marker: {
borderWidth: '0px',
size: '6px',
},
},
plotarea: {
margin: '50px dynamic dynamic dynamic',
},
scaleX: {
// set scale label
label: {
text: 'Days',
},
// convert text on scale indices
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
scaleY: {
// scale label with unicode character
label: {
text: 'Work Productivity',
},
format: '%v%',
},
crosshairX: {
plotLabel: {
borderRadius: '3px',
padding: '10px 15px',
sortByValue: 'asc',
},
alpha: 0.28,
lineWidth: '100%',
},
series: [
{
text: 'Working',
// plot values
values: [20, 30, 50, 50, 40, 0, 0],
backgroundColor: '#03a9f4',
},
{
text: 'Finding a New Zoom Filter',
// plot values
values: [60, 30, 0, 20, 0, 0, 0],
backgroundColor: '#ff9800',
},
{
text: 'Feeding my Kids',
// plot values
values: [20, 30, 30, 20, 30, 10, 20],
backgroundColor: '#4caf50',
},
{
text: 'Drinking Alcohol',
// plot values
values: [0, 10, 20, 10, 30, 90, 80],
backgroundColor: '#ff5722',
},
],
};
let wordcloudConfig = {
graphset: [
{
type: 'null',
height: '10%',
title: {
text: 'Popular Phrases',
fontSize: '24px',
paddingLeft: '50px',
textAlign: 'left',
},
},
{
type: 'wordcloud',
y: '10%',
height: '90%',
options: {
words: [
{
text: 'Joe Exotic',
count: 1000,
},
{
text: 'Tiger King',
count: 800,
},
{
text: 'Flatten the curve',
count: 400,
},
{
text: 'Carol Baskin',
count: 300,
},
{
text: 'Baskin Robbins',
count: 10,
},
{
text: 'Corona',
count: 500,
},
{
text: 'Toilet Paper',
count: 800,
},
{
text: 'Hand Sanitizer',
count: 650,
},
{
text: 'Work From Home',
count: 900,
},
{
text: 'Zoom',
count: 850,
},
{
text: 'Social Distancing',
count: 600,
},
{
text: 'Wash your hands',
count: 900,
},
{
text: 'Netflix',
count: 800,
},
{
text: 'Netflix Party',
count: 200,
},
{
text: 'White Claw',
count: 50,
},
{
text: 'Animal Crossing',
count: 250,
},
{
text: 'Bidet',
count: 400,
},
{
text: "Don't touch your face",
count: 900,
},
{
text: '6 feet',
count: 750,
},
{
text: 'Mask',
count: 950,
},
{
text: 'Stay Home',
count: 875,
},
{
text: 'Shelter In Place',
count: 725,
},
{
text: 'Hydroxychloroquine',
count: 650,
},
{
text: 'Quarantine',
count: 1000,
},
{
text: 'Does Bevmo Deliver?',
count: 300,
},
{
text: 'Blursday',
count: 150,
},
{
text: 'Facetime',
count: 800,
},
{
text: 'Nintendo Switch',
count: 550,
},
{
text: 'Chart',
count: 475,
},
{
text: 'Dashboard',
count: 450,
},
{
text: 'Covid',
count: 900,
},
{
text: 'Tony Robbins',
count: 45,
},
{
text: 'Italy',
count: 145,
},
{
text: 'China',
count: 345,
},
],
minLength: 4,
ignore: ['establish', 'this'],
colorType: 'palette',
palette: ['#03a9f4', '#ff9800', '#4caf50', '#ff5722'],
},
},
],
};
// render pie chart
zingchart.render({
id: 'pieChart',
data: pieChartConfig,
height: '100%',
width: '100%',
});
// render venn chart
zingchart.render({
id: 'vennChart',
data: vennChartConfig,
height: '100%',
width: '100%',
});
// render bar chart
zingchart.render({
id: 'barChart',
data: barChartConfig,
height: '100%',
width: '100%',
});
// render wordcloud
zingchart.render({
id: 'wordCloud',
data: wordcloudConfig,
height: '100%',
width: '100%',
});
});
