<!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: #232020;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
img.zc-img {
max-width: initial;
}
</style>
</head>
<body class="zc-body">
<div id="myChart">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // INIT
// -----------------------------
// Define Module Location
zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';
// Constants
let activeColor = '#ffec20';
// CHART DATA
// -----------------------------
let ackbar =
"our cruisers can't repel firepower of that magnitude take evasive action trap trap trap trap trap trap trap trap trap trap the shield must be deactivated if any attack is to be attempted once the shield is down our cruisers will create a perimeter while our fighters fly into the superstructure and attempt to knock out the main reactor";
let porkins =
'I right with you Red Three I have got a problem here I can hold it no I am alright aaaagghhh aaaagghhh aaaagghhh';
let jarjar =
"ooh mooey mooey I love you yousa point is well seen weesa got a grand army weesa all sinking and no power whatta meesa sayin meesa day startin pretty okee-day meesa here meesa called Jar-Jar Binks where weesa goin yousa might'n be sayin dat dellow feligates meesa your humble servant how wude how wude meesa gonna show everyone how bombad meesa really is";
let chewie =
'aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh rraarrwhhgwr rraarrwhhgwr rraarrwhhgwr rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn garrrrr garrrrr garrrrr garrrrr garrrrr garrrrr garrrrr garrrrr garrrrr garrrrr grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn';
let yoda =
'You will know when you are calm at peace Passive A Jedi uses the Force for knowledge and defense never for attack Yes a Jedis strength flows from the Force But beware of the dark side Anger fear aggression the dark side of the Force are they Easily they flow quick to join you in a fight If once you start down the dark path forever will it dominate your destiny consume you it will as it did ObiWans apprentice If you end your training now if you choose the quick and easy path as Vader did you will become an agent of evil Ready are you What know you of ready For eight hundred years have I trained Jedi My own counsel will I keep on who is to be trained A Jedi must have the deepest commitment the most serious mind This one a long time have I watched All his life has he looked away to the future to the horizon Never his mind on where he was Hmm What he was doing Hmph Adventure Heh Excitement Heh A Jedi craves not these things You are reckless Remember a Jedis strength flows from the Force But beware Anger fear aggression The dark side are they Once you start down the dark path forever will it dominate your destiny Luke Luke do not do not underestimate the powers of the Emperor or suffer your fathers fate you will Luke when gone am I the last of the Jedi will you be Luke the Force runs strong in your family Pass on what you have learned Luke There is another Sky walker Size matters not Look at me Judge me by my size do you Hmm Hmm And well you should not For my ally is the Force and a powerful ally it is Life creates it makes it grow Its energy surrounds us and binds us Luminous beings are we not this crude matter You must feel the Force around you here between you me the tree the rock everywhere yes Even between the land and the ship When nine hundred years old you reach look as good you will not hmmmm';
let r2 =
'bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop beep beep beep beep beep beep beep beep beep beep beep beep beep beep beep beep beep whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle screech screech screech screech screech screech screech';
let wordclouds = {
Yoda: yoda,
Chewie: chewie,
'R2-D2': r2,
'Jar-Jar': jarjar,
Porkins: porkins,
Ackbar: ackbar,
};
// CHART CONFIG
// -----------------------------
let myConfig = {
graphset: [{
id: 'worcloud',
type: 'wordcloud',
height: '75%',
width: '100%',
title: {
text: "Master Yoda's most commonly spoken words",
fontSize: '16px',
},
options: {
ignore: ['the'],
maxFontSize: '48px',
text: yoda,
palette: [
'#bdc3c7',
'#1abc9c',
'#3498db',
'#9b59b6',
'#f1c40f',
'#e74c3c',
'#2ecc71',
'#e67e22',
],
},
},
{
id: 'shapes',
type: null,
height: '25%',
x: '0px',
y: '75%',
width: '100%',
shapes: [{
id: 'Yoda',
text: "Master Yoda's",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/Yoda-small.png',
borderColor: '#FFEC20',
borderWidth: '7px',
x: '7%',
y: '50px',
cursor: 'hand',
},
{
id: 'Chewie',
text: "Chewbacca's",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/Chewbacca-small.png',
alpha: 0.7,
borderColor: '#999',
borderWidth: '7px',
x: '24%',
y: '50px',
cursor: 'hand',
},
{
id: 'R2-D2',
text: "R2-D2's",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/r2d2-small.png',
alpha: 0.7,
borderColor: '#999',
borderWidth: '7px',
x: '41%',
y: '50px',
cursor: 'hand',
},
{
id: 'Jar-Jar',
text: "Jar-Jar Binks'",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/jarjar-small.png',
alpha: 0.7,
borderColor: '#999',
borderWidth: '7px',
x: '58%',
y: '50px',
cursor: 'hand',
},
{
id: 'Porkins',
text: "Jek Porkins'",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/Porkins-small.png',
alpha: 0.7,
borderColor: '#999',
borderWidth: '7px',
x: '75%',
y: '50px',
cursor: 'hand',
},
{
id: 'Ackbar',
text: "Admiral Ackbar's",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/ackbar-small.png',
alpha: 0.7,
borderColor: '#999',
borderWidth: '7px',
x: '92%',
y: '50px',
cursor: 'hand',
},
],
},
],
};
// RENDER CHART
// -----------------------------
zingchart.render({
id: chartId,
data: myConfig,
height: 560,
width: '100%',
theme: 'dark',
});
// CHART CLICK LISTENER
// -----------------------------
(function listenForClicks() {
let active = 'Yoda';
zingchart.shape_click = function(p) {
let target = p.shapeid;
if (target !== active) {
let json = zingchart.exec(chartId, 'getoriginaljson');
let title = '';
json.graphset[1].shapes.forEach(function(shape) {
let match = shape.id == target;
let shapeAlpha = match ? 1 : 0.7;
let shapeBorder = match ? activeColor : '#999';
let shapeText = match ? shape.text : '';
shape.alpha = shapeAlpha;
shape.borderColor = shapeBorder;
title += shapeText;
});
json.graphset[0].options.text = wordclouds[target];
json.graphset[0].title.text = title + ' most commonly spoken words';
zingchart.exec(chartId, 'setdata', {
data: json,
});
active = target;
}
};
})();
</script>
</body>
</html>
// INIT
// -----------------------------
// Define Module Location
zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';
// Constants
let activeColor = '#ffec20';
// CHART DATA
// -----------------------------
let ackbar =
"our cruisers can't repel firepower of that magnitude take evasive action trap trap trap trap trap trap trap trap trap trap the shield must be deactivated if any attack is to be attempted once the shield is down our cruisers will create a perimeter while our fighters fly into the superstructure and attempt to knock out the main reactor";
let porkins =
'I right with you Red Three I have got a problem here I can hold it no I am alright aaaagghhh aaaagghhh aaaagghhh';
let jarjar =
"ooh mooey mooey I love you yousa point is well seen weesa got a grand army weesa all sinking and no power whatta meesa sayin meesa day startin pretty okee-day meesa here meesa called Jar-Jar Binks where weesa goin yousa might'n be sayin dat dellow feligates meesa your humble servant how wude how wude meesa gonna show everyone how bombad meesa really is";
let chewie =
'aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh aaaaaarrrgh rraarrwhhgwr rraarrwhhgwr rraarrwhhgwr rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn rhhnngggnn gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr gggaaarrrrr arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn arrrggghhnnn garrrrr garrrrr garrrrr garrrrr garrrrr garrrrr garrrrr garrrrr garrrrr garrrrr grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn grrrhn';
let yoda =
'You will know when you are calm at peace Passive A Jedi uses the Force for knowledge and defense never for attack Yes a Jedis strength flows from the Force But beware of the dark side Anger fear aggression the dark side of the Force are they Easily they flow quick to join you in a fight If once you start down the dark path forever will it dominate your destiny consume you it will as it did ObiWans apprentice If you end your training now if you choose the quick and easy path as Vader did you will become an agent of evil Ready are you What know you of ready For eight hundred years have I trained Jedi My own counsel will I keep on who is to be trained A Jedi must have the deepest commitment the most serious mind This one a long time have I watched All his life has he looked away to the future to the horizon Never his mind on where he was Hmm What he was doing Hmph Adventure Heh Excitement Heh A Jedi craves not these things You are reckless Remember a Jedis strength flows from the Force But beware Anger fear aggression The dark side are they Once you start down the dark path forever will it dominate your destiny Luke Luke do not do not underestimate the powers of the Emperor or suffer your fathers fate you will Luke when gone am I the last of the Jedi will you be Luke the Force runs strong in your family Pass on what you have learned Luke There is another Sky walker Size matters not Look at me Judge me by my size do you Hmm Hmm And well you should not For my ally is the Force and a powerful ally it is Life creates it makes it grow Its energy surrounds us and binds us Luminous beings are we not this crude matter You must feel the Force around you here between you me the tree the rock everywhere yes Even between the land and the ship When nine hundred years old you reach look as good you will not hmmmm';
let r2 =
'bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bleep bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop bloop beep beep beep beep beep beep beep beep beep beep beep beep beep beep beep beep beep whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle whistle screech screech screech screech screech screech screech';
let wordclouds = {
Yoda: yoda,
Chewie: chewie,
'R2-D2': r2,
'Jar-Jar': jarjar,
Porkins: porkins,
Ackbar: ackbar,
};
// CHART CONFIG
// -----------------------------
let myConfig = {
graphset: [
{
id: 'worcloud',
type: 'wordcloud',
height: '75%',
width: '100%',
title: {
text: "Master Yoda's most commonly spoken words",
fontSize: '16px',
},
options: {
ignore: ['the'],
maxFontSize: '48px',
text: yoda,
palette: [
'#bdc3c7',
'#1abc9c',
'#3498db',
'#9b59b6',
'#f1c40f',
'#e74c3c',
'#2ecc71',
'#e67e22',
],
},
},
{
id: 'shapes',
type: null,
height: '25%',
x: '0px',
y: '75%',
width: '100%',
shapes: [
{
id: 'Yoda',
text: "Master Yoda's",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/Yoda-small.png',
borderColor: '#FFEC20',
borderWidth: '7px',
x: '7%',
y: '50px',
cursor: 'hand',
},
{
id: 'Chewie',
text: "Chewbacca's",
type: 'circle',
size: 28,
backgroundImage:
'https://www.zingchart.com/images/Chewbacca-small.png',
alpha: 0.7,
borderColor: '#999',
borderWidth: '7px',
x: '24%',
y: '50px',
cursor: 'hand',
},
{
id: 'R2-D2',
text: "R2-D2's",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/r2d2-small.png',
alpha: 0.7,
borderColor: '#999',
borderWidth: '7px',
x: '41%',
y: '50px',
cursor: 'hand',
},
{
id: 'Jar-Jar',
text: "Jar-Jar Binks'",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/jarjar-small.png',
alpha: 0.7,
borderColor: '#999',
borderWidth: '7px',
x: '58%',
y: '50px',
cursor: 'hand',
},
{
id: 'Porkins',
text: "Jek Porkins'",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/Porkins-small.png',
alpha: 0.7,
borderColor: '#999',
borderWidth: '7px',
x: '75%',
y: '50px',
cursor: 'hand',
},
{
id: 'Ackbar',
text: "Admiral Ackbar's",
type: 'circle',
size: 28,
backgroundImage: 'https://www.zingchart.com/images/ackbar-small.png',
alpha: 0.7,
borderColor: '#999',
borderWidth: '7px',
x: '92%',
y: '50px',
cursor: 'hand',
},
],
},
],
};
// RENDER CHART
// -----------------------------
zingchart.render({
id: chartId,
data: myConfig,
height: 560,
width: '100%',
theme: 'dark',
});
// CHART CLICK LISTENER
// -----------------------------
(function listenForClicks() {
let active = 'Yoda';
zingchart.shape_click = function (p) {
let target = p.shapeid;
if (target !== active) {
let json = zingchart.exec(chartId, 'getoriginaljson');
let title = '';
json.graphset[1].shapes.forEach(function (shape) {
let match = shape.id == target;
let shapeAlpha = match ? 1 : 0.7;
let shapeBorder = match ? activeColor : '#999';
let shapeText = match ? shape.text : '';
shape.alpha = shapeAlpha;
shape.borderColor = shapeBorder;
title += shapeText;
});
json.graphset[0].options.text = wordclouds[target];
json.graphset[0].title.text = title + ' most commonly spoken words';
zingchart.exec(chartId, 'setdata', {
data: json,
});
active = target;
}
};
})();
