<!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: 450px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var ackbar = "our cruisers can't repel firepower of that magnitude take evasive action trap trap trap trap trap trap trap trap trap trap the sheild 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";
var porkins = "I right with you Red Three I have got a problem here I can hold it no I am alright aaaagghhh aaaagghhh aaaagghhh";
var 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";
var 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";
var 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";
var 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";
var wordclouds = {
"Yoda": yoda,
"Chewie": chewie,
"R2-D2": r2,
"Jar-Jar": jarjar,
"Porkins": porkins,
"Ackbar": ackbar
};
var myConfig = {
graphset: [{
id: "worcloud",
height: '75%',
width: "100%",
x: 0,
y: 50,
type: "wordcloud",
title: {
text: "Master Yoda's most commonly spoken words",
fontSize: 16
},
options: {
ignore: ["the"],
maxFontSize: 48,
text: yoda,
palette: ['#bdc3c7', '#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e74c3c', '#2ecc71', '#e67e22']
}
},
{
id: 'shapes',
height: '25%',
x: 0,
y: '75%',
width: "100%",
type: null,
shapes: [{
id: "Yoda",
label: {
text: "Master Yoda's",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/Yoda-small.png",
borderColor: "#FFEC20",
borderWidth: 7,
x: "7%",
y: 50,
cursor: "hand"
},
{
id: "Chewie",
label: {
text: "Chewbacca's",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/Chewbacca-small.png",
alpha: 0.7,
borderColor: "#999",
borderWidth: 7,
x: "24%",
y: 50,
cursor: "hand"
},
{
id: "R2-D2",
label: {
text: "R2-D2's",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/r2d2-small.png",
alpha: 0.7,
borderColor: "#999",
borderWidth: 7,
x: "41%",
y: 50,
cursor: "hand"
},
{
id: "Jar-Jar",
label: {
text: "Jar-Jar Binks'",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/jarjar-small.png",
alpha: 0.7,
borderColor: "#999",
borderWidth: 7,
x: "58%",
y: 50,
cursor: "hand"
},
{
id: "Porkins",
label: {
text: "Jek Porkins'",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/Porkins-small.png",
alpha: 0.7,
borderColor: "#999",
borderWidth: 7,
x: "75%",
y: 50,
cursor: "hand"
},
{
id: "Ackbar",
label: {
text: "Admiral Ackbar's",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/ackbar-small.png",
alpha: 0.7,
borderColor: "#999",
borderWidth: 7,
x: "92%",
y: 50,
cursor: "hand"
}
]
}
]
};
var activeColor = "#FFEC20";
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: "100%",
theme: 'dark'
});
(function listenForClicks() {
var active = 'Yoda';
zingchart.shape_click = function(p) {
var target = p.shapeid;
if (target !== active) {
var json = zingchart.exec('myChart', 'getoriginaljson');
var title = "";
json.graphset[1].shapes.forEach(function(shape) {
if (shape.id == target) {
shape.alpha = 1.0;
shape.borderColor = activeColor;
title = shape.text;
} else {
shape.alpha = 0.7;
shape.borderColor = '#999';
}
});
json.graphset[0].options.text = wordclouds[target];
json.graphset[0].title.text = title + ' most commonly spoken words';
zingchart.exec('myChart', 'setdata', {
data: json
});
active = target;
}
}
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 450px;
}
.zc-ref {
display: none;
}
var ackbar = "our cruisers can't repel firepower of that magnitude take evasive action trap trap trap trap trap trap trap trap trap trap the sheild 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";
var porkins = "I right with you Red Three I have got a problem here I can hold it no I am alright aaaagghhh aaaagghhh aaaagghhh";
var 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";
var 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";
var 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";
var 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";
var wordclouds = {
"Yoda": yoda,
"Chewie": chewie,
"R2-D2": r2,
"Jar-Jar": jarjar,
"Porkins": porkins,
"Ackbar": ackbar
};
var myConfig = {
graphset: [{
id: "worcloud",
height: '75%',
width: "100%",
x: 0,
y: 50,
type: "wordcloud",
title: {
text: "Master Yoda's most commonly spoken words",
fontSize: 16
},
options: {
ignore: ["the"],
maxFontSize: 48,
text: yoda,
palette: ['#bdc3c7', '#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e74c3c', '#2ecc71', '#e67e22']
}
},
{
id: 'shapes',
height: '25%',
x: 0,
y: '75%',
width: "100%",
type: null,
shapes: [{
id: "Yoda",
label: {
text: "Master Yoda's",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/Yoda-small.png",
borderColor: "#FFEC20",
borderWidth: 7,
x: "7%",
y: 50,
cursor: "hand"
},
{
id: "Chewie",
label: {
text: "Chewbacca's",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/Chewbacca-small.png",
alpha: 0.7,
borderColor: "#999",
borderWidth: 7,
x: "24%",
y: 50,
cursor: "hand"
},
{
id: "R2-D2",
label: {
text: "R2-D2's",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/r2d2-small.png",
alpha: 0.7,
borderColor: "#999",
borderWidth: 7,
x: "41%",
y: 50,
cursor: "hand"
},
{
id: "Jar-Jar",
label: {
text: "Jar-Jar Binks'",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/jarjar-small.png",
alpha: 0.7,
borderColor: "#999",
borderWidth: 7,
x: "58%",
y: 50,
cursor: "hand"
},
{
id: "Porkins",
label: {
text: "Jek Porkins'",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/Porkins-small.png",
alpha: 0.7,
borderColor: "#999",
borderWidth: 7,
x: "75%",
y: 50,
cursor: "hand"
},
{
id: "Ackbar",
label: {
text: "Admiral Ackbar's",
fontColor: 'white',
offsetY: 50,
},
type: "circle",
size: 28,
backgroundImage: "http://www.zingchart.com/images/ackbar-small.png",
alpha: 0.7,
borderColor: "#999",
borderWidth: 7,
x: "92%",
y: 50,
cursor: "hand"
}
]
}
]
};
var activeColor = "#FFEC20";
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: "100%",
theme: 'dark'
});
(function listenForClicks() {
var active = 'Yoda';
zingchart.shape_click = function(p) {
var target = p.shapeid;
if (target !== active) {
var json = zingchart.exec('myChart', 'getoriginaljson');
var title = "";
json.graphset[1].shapes.forEach(function(shape) {
if (shape.id == target) {
shape.alpha = 1.0;
shape.borderColor = activeColor;
title = shape.text;
} else {
shape.alpha = 0.7;
shape.borderColor = '#999';
}
});
json.graphset[0].options.text = wordclouds[target];
json.graphset[0].title.text = title + ' most commonly spoken words';
zingchart.exec('myChart', 'setdata', {
data: json
});
active = target;
}
}
})();