<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<!-- IMPORT Javascript variable -->
<script nonce="undefined" src="https://cdn.zingchart.com/themes/vividTheme.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.main--container {
width: '100%';
height: '100%';
min-height: 1000px;
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
flex-grow: 1;
height: 100%;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 500px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<select>
<option value="light">light</option>
<option value="dark">dark</option>
<option value="classic">classic</option>
<option value="spark">spark</option>
<option value="vivid" selected>vivid</option>
</select>
<div class="main--container">
<div class="row">
<div id="barChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<div id="rangeChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<div id="areaChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<div id="treeMap" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</div>
<div class="row">
<div id="pieChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<div id="mapChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<div id="gaugeChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<div id="radarChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">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
function renderChart(id, data, theme) {
zingchart.exec(id, 'destroy');
let renderObject = {
id,
data,
height: '100%',
width: '100%',
theme: theme ? theme : ''
};
// variable "vividTheme" is pulled in script tag. Check HTML
if (theme === 'vivid') renderObject.defaults = vividTheme;
// render chart with width and height to
// fill the parent container CSS dimensions
zingchart.render(renderObject);
}
function renderAllCharts(theme) {
renderChart('barChart', barConfig, theme);
renderChart('rangeChart', rangeConfig, theme);
renderChart('areaChart', areaConfig, theme);
renderChart('treeMap', treeConfig, theme);
renderChart('pieChart', pieConfig, theme);
renderChart('mapChart', mapConfig, theme);
renderChart('gaugeChart', gaugeConfig, theme);
renderChart('radarChart', radarConfig, theme);
}
let selectDropdown = document.querySelector('select');
selectDropdown.addEventListener('change', function(e) {
renderAllCharts(e.target.value);
});
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let barConfig = {
type: 'bar',
plot: {
stacked: true
},
legend: {},
scaleX: {
values: ['Cats', 'Dogs', 'Fish', 'Birds'],
guide: {
visible: false
},
lineColor: 'none',
lineWidth: '0px',
tick: {
visible: false
}
},
scaleY: {
guide: {
lineStyle: 'solid'
},
lineColor: 'none',
lineWidth: '0px',
maxValue: '495px',
minValue: '0px',
step: 123.75,
tick: {
visible: false
}
},
series: [{
values: [100, 180, 120, 120],
},
{
values: [125, 125, 125, 125],
},
{
values: [125, 145, 135, 165],
}
]
};
let rangeConfig = {
type: 'range',
title: {
text: 'A Simple Area Chart',
},
legend: {},
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: 'Temperature (°F)'
}
},
series: [{
text: 'Week 1',
values: [
[15, 30],
[20, 40],
[16, 35],
[21, 30],
[25, 45],
[18, 27],
[23, 35],
[29, 39],
[27, 30],
[19, 34]
],
},
{
text: 'Week 2',
values: [
[40, 45],
[30, 43],
[35, 36],
[41, 50],
[50, 54],
[45, 52],
[39, 42],
[31, 40],
[41, 49],
[35, 40]
],
}
]
};
let areaConfig = {
"type": "area",
"title": {
"text": "Customer Survey Response Quality",
"text-align": "center",
"adjust-layout": true
},
"plotarea": {
"margin": "dynamic"
},
"scale-x": {
"values": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
],
"label": {
"text": "Surveys per Month",
},
"maxTicks": 4,
"maxItems": 4
},
"scale-y": {
"min-value": 0,
"max-value": 100,
"step": 20,
"format": "%v%",
"label": {
"text": "Surveys per Quality Guidelines",
},
},
"plot": {
"stacked": true,
"stack-type": "100%",
},
"legend": {},
"series": [{
"values": [
116,
125,
109,
86,
76,
95,
85,
77,
101,
90,
87,
62
],
"text": "Poor",
},
{
"values": [
195,
206,
215,
140,
185,
176,
184,
190,
110,
174,
155,
165
],
"text": "Moderate",
},
{
"values": [
223,
284,
268,
274,
230,
199,
185,
208,
248,
295,
210,
225
],
"text": "Good",
},
{
"values": [
185,
175,
168,
154,
198,
175,
124,
145,
168,
174,
154,
125
],
"text": "Excellent",
}
]
};
let treeConfig = {
"type": "treemap",
"plotarea": {
"margin": "0 0 30 0"
},
"tooltip": {
},
"options": {
},
"series": [{
"text": "North America",
"children": [{
"text": "United States",
"children": [{
"text": "Texas",
"value": 21
},
{
"text": "California",
"value": 53
},
{
"text": "Ohio",
"value": 12
},
{
"text": "New York",
"value": 46
},
{
"text": "Michigan",
"value": 39
},
{
"text": "Alabama",
"value": 25
}
]
},
{
"text": "Canada",
"value": 113
},
{
"text": "Mexico",
"value": 78
}
]
},
{
"text": "Europe",
"children": [{
"text": "France",
"value": 42
},
{
"text": "Spain",
"value": 28
},
{
"text": "Switzerland",
"value": 13
},
{
"text": "Germany",
"value": 56
},
{
"text": "Cyprus",
"value": 7
}
]
},
{
"text": "Africa",
"children": [{
"text": "Egypt",
"value": 22
},
{
"text": "Congo",
"value": 38
},
{
"text": "Lesotho",
"value": 9
}
]
},
{
"text": "Asia",
"children": [{
"text": "India",
"value": 92
},
{
"text": "China",
"value": 68
},
{
"text": "Mongolia",
"value": 25
}
]
},
{
"text": "South America",
"children": [{
"text": "Brazil",
"value": 42
},
{
"text": "Argentina",
"value": 28
},
{
"text": "Peru",
"value": 15
},
{
"text": "Uruguay",
"value": 33
}
]
},
{
"text": "Australia (continent)",
"children": [{
"text": "Australia (country)",
"value": 121
},
{
"text": "New Zealand",
"value": 24
}
]
}
]
};
let pieConfig = {
type: 'pie',
title: {
text: 'Custom Theme'
},
legend: {},
shapes: {
type: 'triangle'
},
series: [{
values: [35]
},
{
values: [135]
},
{
values: [135]
},
{
values: [135]
},
{
values: [135]
}
]
};
let mapConfig = {
type: 'heatmap',
title: {
text: 'A Simple Heatmap Chart',
},
legend: {
draggable: true,
// don't allow removing of plots. Just display legend text
toggleAction: 'none'
},
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: 'Temperature (°F)'
}
},
series: [{
text: 'Week 1',
values: [59, 15, 5, 30, 60, 99, 28]
},
{
text: 'Week 2',
values: [34, 32, 87, 65, 9, 17, 40]
},
{
text: 'Week 3',
values: [90, 19, 50, 39, 12, 49, 14]
}
]
};
let gaugeConfig = {
type: 'gauge',
title: {
text: 'A Simple Gauge Chart',
},
legend: {},
scaleR: {
},
series: [{
text: 'Day 1',
// plot values
values: [23],
},
{
text: 'Day 2',
// plot values
values: [20],
},
{
text: 'Day 3',
// plot values
values: [25],
}
]
};
let radarConfig = {
type: 'radar',
plot: {
aspect: 'area',
},
plotarea: {
margin: 'dynamic'
},
scaleK: {
values: '0:330:30',
aspect: 'circle', // To set the chart shape to circular.
format: '%v°',
},
scaleV: {
values: '0:100:25',
labels: ['', '', '', '', ''],
},
series: [{
values: [59, 30, 65, 34, 40, 33, 31, 90, 81, 70, 100, 28],
},
{
values: [30, 100, 90, 99, 59, 34, 5, 3, 12, 15, 16, 75, 34],
},
{
values: [34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 100],
}
]
};
renderAllCharts('vivid');
});
</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
function renderChart(id, data, theme) {
zingchart.exec(id, 'destroy');
let renderObject = {
id,
data,
height: '100%',
width: '100%',
theme: theme ? theme : ''
};
// variable "vividTheme" is pulled in script tag. Check HTML
if (theme === 'vivid') renderObject.defaults = vividTheme;
// render chart with width and height to
// fill the parent container CSS dimensions
zingchart.render(renderObject);
}
function renderAllCharts(theme) {
renderChart('barChart', barConfig, theme);
renderChart('rangeChart', rangeConfig, theme);
renderChart('areaChart', areaConfig, theme);
renderChart('treeMap', treeConfig, theme);
renderChart('pieChart', pieConfig, theme);
renderChart('mapChart', mapConfig, theme);
renderChart('gaugeChart', gaugeConfig, theme);
renderChart('radarChart', radarConfig, theme);
}
let selectDropdown = document.querySelector('select');
selectDropdown.addEventListener('change', function(e) {
renderAllCharts(e.target.value);
});
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let barConfig = {
type: 'bar',
plot: {
stacked: true
},
legend: {},
scaleX: {
values: ['Cats', 'Dogs', 'Fish', 'Birds'],
guide: {
visible: false
},
lineColor: 'none',
lineWidth: '0px',
tick: {
visible: false
}
},
scaleY: {
guide: {
lineStyle: 'solid'
},
lineColor: 'none',
lineWidth: '0px',
maxValue: '495px',
minValue: '0px',
step: 123.75,
tick: {
visible: false
}
},
series: [{
values: [100, 180, 120, 120],
},
{
values: [125, 125, 125, 125],
},
{
values: [125, 145, 135, 165],
}
]
};
let rangeConfig = {
type: 'range',
title: {
text: 'A Simple Area Chart',
},
legend: {},
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: 'Temperature (°F)'
}
},
series: [{
text: 'Week 1',
values: [
[15, 30],
[20, 40],
[16, 35],
[21, 30],
[25, 45],
[18, 27],
[23, 35],
[29, 39],
[27, 30],
[19, 34]
],
},
{
text: 'Week 2',
values: [
[40, 45],
[30, 43],
[35, 36],
[41, 50],
[50, 54],
[45, 52],
[39, 42],
[31, 40],
[41, 49],
[35, 40]
],
}
]
};
let areaConfig = {
"type": "area",
"title": {
"text": "Customer Survey Response Quality",
"text-align": "center",
"adjust-layout": true
},
"plotarea": {
"margin": "dynamic"
},
"scale-x": {
"values": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
],
"label": {
"text": "Surveys per Month",
},
"maxTicks": 4,
"maxItems": 4
},
"scale-y": {
"min-value": 0,
"max-value": 100,
"step": 20,
"format": "%v%",
"label": {
"text": "Surveys per Quality Guidelines",
},
},
"plot": {
"stacked": true,
"stack-type": "100%",
},
"legend": {},
"series": [{
"values": [
116,
125,
109,
86,
76,
95,
85,
77,
101,
90,
87,
62
],
"text": "Poor",
},
{
"values": [
195,
206,
215,
140,
185,
176,
184,
190,
110,
174,
155,
165
],
"text": "Moderate",
},
{
"values": [
223,
284,
268,
274,
230,
199,
185,
208,
248,
295,
210,
225
],
"text": "Good",
},
{
"values": [
185,
175,
168,
154,
198,
175,
124,
145,
168,
174,
154,
125
],
"text": "Excellent",
}
]
};
let treeConfig = {
"type": "treemap",
"plotarea": {
"margin": "0 0 30 0"
},
"tooltip": {
},
"options": {
},
"series": [{
"text": "North America",
"children": [{
"text": "United States",
"children": [{
"text": "Texas",
"value": 21
},
{
"text": "California",
"value": 53
},
{
"text": "Ohio",
"value": 12
},
{
"text": "New York",
"value": 46
},
{
"text": "Michigan",
"value": 39
},
{
"text": "Alabama",
"value": 25
}
]
},
{
"text": "Canada",
"value": 113
},
{
"text": "Mexico",
"value": 78
}
]
},
{
"text": "Europe",
"children": [{
"text": "France",
"value": 42
},
{
"text": "Spain",
"value": 28
},
{
"text": "Switzerland",
"value": 13
},
{
"text": "Germany",
"value": 56
},
{
"text": "Cyprus",
"value": 7
}
]
},
{
"text": "Africa",
"children": [{
"text": "Egypt",
"value": 22
},
{
"text": "Congo",
"value": 38
},
{
"text": "Lesotho",
"value": 9
}
]
},
{
"text": "Asia",
"children": [{
"text": "India",
"value": 92
},
{
"text": "China",
"value": 68
},
{
"text": "Mongolia",
"value": 25
}
]
},
{
"text": "South America",
"children": [{
"text": "Brazil",
"value": 42
},
{
"text": "Argentina",
"value": 28
},
{
"text": "Peru",
"value": 15
},
{
"text": "Uruguay",
"value": 33
}
]
},
{
"text": "Australia (continent)",
"children": [{
"text": "Australia (country)",
"value": 121
},
{
"text": "New Zealand",
"value": 24
}
]
}
]
};
let pieConfig = {
type: 'pie',
title: {
text: 'Custom Theme'
},
legend: {},
shapes: {
type: 'triangle'
},
series: [{
values: [35]
},
{
values: [135]
},
{
values: [135]
},
{
values: [135]
},
{
values: [135]
}
]
};
let mapConfig = {
type: 'heatmap',
title: {
text: 'A Simple Heatmap Chart',
},
legend: {
draggable: true,
// don't allow removing of plots. Just display legend text
toggleAction: 'none'
},
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: 'Temperature (°F)'
}
},
series: [{
text: 'Week 1',
values: [59, 15, 5, 30, 60, 99, 28]
},
{
text: 'Week 2',
values: [34, 32, 87, 65, 9, 17, 40]
},
{
text: 'Week 3',
values: [90, 19, 50, 39, 12, 49, 14]
}
]
};
let gaugeConfig = {
type: 'gauge',
title: {
text: 'A Simple Gauge Chart',
},
legend: {},
scaleR: {
},
series: [{
text: 'Day 1',
// plot values
values: [23],
},
{
text: 'Day 2',
// plot values
values: [20],
},
{
text: 'Day 3',
// plot values
values: [25],
}
]
};
let radarConfig = {
type: 'radar',
plot: {
aspect: 'area',
},
plotarea: {
margin: 'dynamic'
},
scaleK: {
values: '0:330:30',
aspect: 'circle', // To set the chart shape to circular.
format: '%v°',
},
scaleV: {
values: '0:100:25',
labels: ['', '', '', '', ''],
},
series: [{
values: [59, 30, 65, 34, 40, 33, 31, 90, 81, 70, 100, 28],
},
{
values: [30, 100, 90, 99, 59, 34, 5, 3, 12, 15, 16, 75, 34],
},
{
values: [34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 100],
}
]
};
renderAllCharts('vivid');
});