<!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>
.chart--container {
width: 100%;
height: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</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
let chartData = [{
id: 'total',
text: 'Total',
parent: '',
dataInfo: "<br>2131.4"
},
{
id: 'stone fruits',
text: 'Stone fruits',
parent: 'total'
},
{
id: 'pome fruits',
text: 'Pome fruits',
parent: 'total'
},
{
id: 'citrus fruits',
text: 'Citrus fruits',
parent: 'total'
},
{
id: 'berries',
text: 'Berries',
parent: 'total'
},
{
id: 'tropical / subtropical',
text: 'Tropical / subtropical',
parent: 'total'
},
{
id: 'cherries',
text: 'Cherries',
parent: 'stone fruits',
value: 177.87
},
{
id: 'plums',
text: 'Plums',
parent: 'stone fruits',
value: 154.87
},
{
id: 'peaches',
text: 'Peaches',
parent: 'stone fruits',
value: 136.93
},
{
id: 'apricots',
text: 'Apricots',
parent: 'stone fruits',
value: 76.12
},
{
id: 'nectarines',
text: 'Nectarines',
parent: 'stone fruits',
value: 63.78
},
{
id: 'sother',
text: 'Other',
parent: 'stone fruits',
value: 2.41
},
{
id: 'apples',
text: 'Apples',
parent: 'pome fruits',
value: 482.99
},
{
id: 'pears',
text: 'Pears',
parent: 'pome fruits',
value: 107.04
},
{
id: 'pother',
text: 'Other',
parent: 'pome fruits',
value: 7.47
},
{
id: 'oranges',
text: 'Oranges',
parent: 'citrus fruits',
value: 275.24
},
{
id: 'small citrus fruits',
text: 'Small citrus fruits',
parent: 'citrus fruits',
value: 156.54
},
{
id: 'lemons and acid limes',
text: 'Lemons and acid limes',
parent: 'citrus fruits',
value: 80.41
},
{
id: 'pomelos and grapefruit',
text: 'Pomelos and grapefruit',
parent: 'citrus fruits',
value: 3.84
},
{
id: 'cother',
text: 'Other',
parent: 'citrus fruits',
value: 3.95
},
{
id: 'strawberries',
text: 'Strawberries',
parent: 'berries',
value: 83.82
},
{
id: 'currants',
text: 'Currants',
parent: 'berries',
value: 58.17
},
{
id: 'bother',
text: 'Other',
parent: 'berries',
value: 38.22
},
{
id: 'raspberries',
text: 'Raspberries',
parent: 'berries',
value: 28.38
},
{
id: 'blueberries',
text: 'Blueberries',
parent: 'berries',
value: 25.01
},
{
id: 'tother',
text: 'Other',
parent: 'tropical / subtropical',
value: 57.03
},
{
id: 'kiwis',
text: 'Kiwis',
parent: 'tropical / subtropical',
value: 44.83
},
{
id: 'figs',
text: 'Figs',
parent: 'tropical / subtropical',
value: 27.21
},
{
id: 'avocados',
text: 'Avocados',
parent: 'tropical / subtropical',
value: 19.63
},
{
id: 'bananas',
text: 'Bananas',
parent: 'tropical / subtropical',
value: 19.62
},
];
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'sunburst',
globals: {
fontFamily: 'Switzer Variable',
},
title: {
text: 'Sunburst Diagram / Hierarchical',
fontWeight: 400,
htmlMode: true,
textAlign: 'center',
fontSize: '32px',
lineHeight: '40px',
},
subtitle: {
text: "Fruits and berries (excluding grapes) production in EU27 - Year 2020, Unit: tonnes\nSource: EuroStat",
marginTop: '40px',
fontWeight: 400,
fontSize: '16px',
color: '#6F6F6F',
lineHeight: '24px',
textAlign: 'center'
},
options: {
palette: ['#FBF673', '#C3E352', '#63B28F', '#FDC664', '#C0B1F4'],
},
plot: {
fontSize: '24px',
tooltip: {
align: 'left',
padding: '10px 15px',
borderRadius: '3px',
thousandsSeparator: ','
},
valueBox: {
text: '%data-vbtext',
fontSize: '14px',
fontWeight: 400,
fontColor: '#2C2C2C',
lineHeight: '20px',
visible: null,
rules: [
//total
{
rule: "\"%t\" == \"Total\"",
text: '%data-vbtext %data-info',
}
]
},
borderWidth: '3px',
rules: [
//total
{
rule: "\"%t\" == \"Total\"",
backgroundColor: "#FFFFFF"
},
//pome fruits
{
rule: "\"%t\" == \"Apples\"",
backgroundColor: "#C5E4D7"
},
{
rule: "\"%t\" == \"Pears\"",
backgroundColor: "#ACD0C0"
},
//stone fruits
{
rule: "\"%t\" == \"Cherries\"",
backgroundColor: "#E7F4B8"
},
{
rule: "\"%t\" == \"Plums\"",
backgroundColor: "#CDDBA0"
},
{
rule: "\"%t\" == \"Peaches\"",
backgroundColor: "#EFF8D1"
},
{
rule: "\"%t\" == \"Apricots\"",
backgroundColor: "#D7E5A4"
},
{
rule: "\"%t\" == \"Nectarines\"",
backgroundColor: "#F5FBE3"
},
//citrus fruits
{
rule: "\"%t\" == \"Oranges\"",
backgroundColor: "#FDD084"
},
{
rule: "\"%t\" == \"Small citrus fruits\"",
backgroundColor: "#E3B15B"
},
{
rule: "\"%t\" == \"Lemons and acid limes\"",
backgroundColor: "#FDDCA2"
},
{
rule: "\"%t\" == \"Pomelos and grapefruit\"",
backgroundColor: "#F5FBE3"
},
//berries
{
rule: "\"%t\" == \"Strawberries\"",
backgroundColor: "#E6E0FB"
},
{
rule: "\"%t\" == \"Currants\"",
backgroundColor: "#D3C9F8"
},
{
rule: "\"%t\" == \"Raspberries\"",
backgroundColor: "#E6E0FB"
},
{
rule: "\"%t\" == \"Blueberries\"",
backgroundColor: "#9A8FC4"
},
// Tropical / subtropical
{
rule: "\"%t\" == \"Kiwis\"",
backgroundColor: "#FBF89C"
},
{
rule: "\"%t\" == \"Figs\"",
backgroundColor: "#E1DD67"
},
{
rule: "\"%t\" == \"Avocados\"",
backgroundColor: "#FCFBC6"
},
{
rule: "\"%t\" == \"bananas\"",
backgroundColor: "#E1DD67"
},
],
},
plotarea: {
margin: '120px 0px 0px 0px'
},
series: chartData
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
output: 'svg'
});
});
</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
let chartData = [{
id: 'total',
text: 'Total',
parent: '',
dataInfo: "<br>2131.4"
},
{
id: 'stone fruits',
text: 'Stone fruits',
parent: 'total'
},
{
id: 'pome fruits',
text: 'Pome fruits',
parent: 'total'
},
{
id: 'citrus fruits',
text: 'Citrus fruits',
parent: 'total'
},
{
id: 'berries',
text: 'Berries',
parent: 'total'
},
{
id: 'tropical / subtropical',
text: 'Tropical / subtropical',
parent: 'total'
},
{
id: 'cherries',
text: 'Cherries',
parent: 'stone fruits',
value: 177.87
},
{
id: 'plums',
text: 'Plums',
parent: 'stone fruits',
value: 154.87
},
{
id: 'peaches',
text: 'Peaches',
parent: 'stone fruits',
value: 136.93
},
{
id: 'apricots',
text: 'Apricots',
parent: 'stone fruits',
value: 76.12
},
{
id: 'nectarines',
text: 'Nectarines',
parent: 'stone fruits',
value: 63.78
},
{
id: 'sother',
text: 'Other',
parent: 'stone fruits',
value: 2.41
},
{
id: 'apples',
text: 'Apples',
parent: 'pome fruits',
value: 482.99
},
{
id: 'pears',
text: 'Pears',
parent: 'pome fruits',
value: 107.04
},
{
id: 'pother',
text: 'Other',
parent: 'pome fruits',
value: 7.47
},
{
id: 'oranges',
text: 'Oranges',
parent: 'citrus fruits',
value: 275.24
},
{
id: 'small citrus fruits',
text: 'Small citrus fruits',
parent: 'citrus fruits',
value: 156.54
},
{
id: 'lemons and acid limes',
text: 'Lemons and acid limes',
parent: 'citrus fruits',
value: 80.41
},
{
id: 'pomelos and grapefruit',
text: 'Pomelos and grapefruit',
parent: 'citrus fruits',
value: 3.84
},
{
id: 'cother',
text: 'Other',
parent: 'citrus fruits',
value: 3.95
},
{
id: 'strawberries',
text: 'Strawberries',
parent: 'berries',
value: 83.82
},
{
id: 'currants',
text: 'Currants',
parent: 'berries',
value: 58.17
},
{
id: 'bother',
text: 'Other',
parent: 'berries',
value: 38.22
},
{
id: 'raspberries',
text: 'Raspberries',
parent: 'berries',
value: 28.38
},
{
id: 'blueberries',
text: 'Blueberries',
parent: 'berries',
value: 25.01
},
{
id: 'tother',
text: 'Other',
parent: 'tropical / subtropical',
value: 57.03
},
{
id: 'kiwis',
text: 'Kiwis',
parent: 'tropical / subtropical',
value: 44.83
},
{
id: 'figs',
text: 'Figs',
parent: 'tropical / subtropical',
value: 27.21
},
{
id: 'avocados',
text: 'Avocados',
parent: 'tropical / subtropical',
value: 19.63
},
{
id: 'bananas',
text: 'Bananas',
parent: 'tropical / subtropical',
value: 19.62
},
];
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'sunburst',
globals: {
fontFamily: 'Switzer Variable',
},
title: {
text: 'Sunburst Diagram / Hierarchical',
fontWeight: 400,
htmlMode: true,
textAlign: 'center',
fontSize: '32px',
lineHeight: '40px',
},
subtitle: {
text: "Fruits and berries (excluding grapes) production in EU27 - Year 2020, Unit: tonnes\nSource: EuroStat",
marginTop: '40px',
fontWeight: 400,
fontSize: '16px',
color: '#6F6F6F',
lineHeight: '24px',
textAlign: 'center'
},
options: {
palette: ['#FBF673', '#C3E352', '#63B28F', '#FDC664', '#C0B1F4'],
},
plot: {
fontSize: '24px',
tooltip: {
align: 'left',
padding: '10px 15px',
borderRadius: '3px',
thousandsSeparator: ','
},
valueBox: {
text: '%data-vbtext',
fontSize: '14px',
fontWeight: 400,
fontColor: '#2C2C2C',
lineHeight: '20px',
visible: null,
rules: [
//total
{
rule: "\"%t\" == \"Total\"",
text: '%data-vbtext %data-info',
}
]
},
borderWidth: '3px',
rules: [
//total
{
rule: "\"%t\" == \"Total\"",
backgroundColor: "#FFFFFF"
},
//pome fruits
{
rule: "\"%t\" == \"Apples\"",
backgroundColor: "#C5E4D7"
},
{
rule: "\"%t\" == \"Pears\"",
backgroundColor: "#ACD0C0"
},
//stone fruits
{
rule: "\"%t\" == \"Cherries\"",
backgroundColor: "#E7F4B8"
},
{
rule: "\"%t\" == \"Plums\"",
backgroundColor: "#CDDBA0"
},
{
rule: "\"%t\" == \"Peaches\"",
backgroundColor: "#EFF8D1"
},
{
rule: "\"%t\" == \"Apricots\"",
backgroundColor: "#D7E5A4"
},
{
rule: "\"%t\" == \"Nectarines\"",
backgroundColor: "#F5FBE3"
},
//citrus fruits
{
rule: "\"%t\" == \"Oranges\"",
backgroundColor: "#FDD084"
},
{
rule: "\"%t\" == \"Small citrus fruits\"",
backgroundColor: "#E3B15B"
},
{
rule: "\"%t\" == \"Lemons and acid limes\"",
backgroundColor: "#FDDCA2"
},
{
rule: "\"%t\" == \"Pomelos and grapefruit\"",
backgroundColor: "#F5FBE3"
},
//berries
{
rule: "\"%t\" == \"Strawberries\"",
backgroundColor: "#E6E0FB"
},
{
rule: "\"%t\" == \"Currants\"",
backgroundColor: "#D3C9F8"
},
{
rule: "\"%t\" == \"Raspberries\"",
backgroundColor: "#E6E0FB"
},
{
rule: "\"%t\" == \"Blueberries\"",
backgroundColor: "#9A8FC4"
},
// Tropical / subtropical
{
rule: "\"%t\" == \"Kiwis\"",
backgroundColor: "#FBF89C"
},
{
rule: "\"%t\" == \"Figs\"",
backgroundColor: "#E1DD67"
},
{
rule: "\"%t\" == \"Avocados\"",
backgroundColor: "#FCFBC6"
},
{
rule: "\"%t\" == \"bananas\"",
backgroundColor: "#E1DD67"
},
],
},
plotarea: {
margin: '120px 0px 0px 0px'
},
series: chartData
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
output: 'svg'
});
});
