<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'wordcloud',
options: {
text: 'We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain and establish this Constitution for the United States of America.',
aspect: 'spiral',
colorType: 'palette',
ignore: ['establish', 'this'],
maxItems: 50,
minLength: '4px',
palette: [
'#D32F2F',
'#1976D2',
'#9E9E9E',
'#E53935',
'#1E88E5',
'#7E57C2',
'#F44336',
'#2196F3',
'#A1887F',
],
rotate: true,
style: {
tooltip: {
text: 'We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain and establish this Constitution for the United States of America.',
padding: '5px',
alpha: 0.9,
backgroundColor: '#D32F2F',
borderColor: 'none',
borderRadius: '3px',
fontColor: 'white',
fontFamily: 'Georgia',
textAlpha: 1,
visible: true,
width: '400px',
wrapText: true,
},
fontFamily: 'Merriweather',
hoverState: {
backgroundColor: '#1976D2',
borderColor: 'none',
borderRadius: '3px',
fontColor: 'white',
},
},
},
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'wordcloud',
options: {
text: 'We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain and establish this Constitution for the United States of America.',
aspect: 'spiral',
colorType: 'palette',
ignore: ['establish', 'this'],
maxItems: 50,
minLength: '4px',
palette: [
'#D32F2F',
'#1976D2',
'#9E9E9E',
'#E53935',
'#1E88E5',
'#7E57C2',
'#F44336',
'#2196F3',
'#A1887F',
],
rotate: true,
style: {
tooltip: {
text: 'We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain and establish this Constitution for the United States of America.',
padding: '5px',
alpha: 0.9,
backgroundColor: '#D32F2F',
borderColor: 'none',
borderRadius: '3px',
fontColor: 'white',
fontFamily: 'Georgia',
textAlpha: 1,
visible: true,
width: '400px',
wrapText: true,
},
fontFamily: 'Merriweather',
hoverState: {
backgroundColor: '#1976D2',
borderColor: 'none',
borderRadius: '3px',
fontColor: 'white',
},
},
},
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
