<!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></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"layout": "1x3",
"graphset": [{
"type": "pie",
"legend": {
"shared": true
},
"title": {
"text": "2010",
"y": "80%",
"font-family": "Georgia"
},
"plot": {
"value-box": {
"font-size": 10,
"font-weight": "normal",
"offset-r": "20%"
},
"tooltip": {
"text": "%t: %v"
}
},
"series": [{
"values": [35],
"text": "Alpha",
"background-color": "#007acc"
},
{
"values": [34],
"text": "Beta",
"background-color": "#0099ff"
},
{
"values": [31],
"text": "Gamma",
"background-color": "#33adff"
},
{
"values": [19],
"text": "Delta",
"background-color": "#66c2ff"
},
{
"values": [12],
"text": "Epsilon",
"background-color": "#99d6ff"
}
]
},
{
"type": "pie",
"legend": {
"shared": true
},
"title": {
"text": "2013",
"y": "80%",
"font-family": "Georgia"
},
"plot": {
"value-box": {
"font-size": 10,
"font-weight": "normal",
"offset-r": "20%"
},
"tooltip": {
"text": "%t: %v"
}
},
"series": [{
"values": [65],
"text": "Alpha",
"background-color": "#007acc"
},
{
"values": [35],
"text": "Beta",
"background-color": "#0099ff"
},
{
"values": [30],
"text": "Gamma",
"background-color": "#33adff"
},
{
"values": [17],
"text": "Delta",
"background-color": "#66c2ff"
},
{
"values": [16],
"text": "Epsilon",
"background-color": "#99d6ff"
}
]
},
{
"type": "pie",
"legend": {
"shared": true,
"layout": "1x6",
"x": "13%",
"y": "5%",
"toggle-action": "remove",
"border-width": 1,
"border-color": "#cccccc",
"border-radius": "3px",
"header": {
"text": "Shared Legend",
"text-align": "center",
"font-size": 12,
"font-family": "Georgia",
},
"footer": {
"text": "Click the legend items to repaint the charts without the selected series.",
"text-align": "center",
"font-size": 10,
"font-style": "italic",
"background-color": "white",
"border-bottom": "1px solid #cccccc",
"border-left": "1px solid #cccccc",
"border-right": "1px solid #cccccc"
},
"item": {
"font-family": "Georgia",
"border-radius": "3px"
},
"marker": {
"type": "circle",
"size": 3
}
},
"title": {
"text": "2016",
"y": "80%",
"font-family": "Georgia"
},
"plot": {
"value-box": {
"font-size": 10,
"font-weight": "normal",
"offset-r": "20%"
},
"tooltip": {
"text": "%t: %v"
}
},
"series": [{
"values": [59],
"text": "Alpha",
"background-color": "#007acc",
"legend-item": {
"background-color": "#007acc",
"font-color": "white"
},
"legend-marker": {
"border-color": "#007acc",
"background-color": "white"
}
},
{
"values": [49],
"text": "Beta",
"background-color": "#0099ff",
"legend-item": {
"background-color": "#0099ff",
"font-color": "white"
},
"legend-marker": {
"border-color": "#0099ff",
"background-color": "white"
}
},
{
"values": [31],
"text": "Gamma",
"background-color": "#33adff",
"legend-item": {
"background-color": "#33adff",
"font-color": "white"
},
"legend-marker": {
"border-color": "#33adff",
"background-color": "white"
}
},
{
"values": [21],
"text": "Delta",
"background-color": "#66c2ff",
"legend-item": {
"background-color": "#66c2ff",
"font-color": "white"
},
"legend-marker": {
"border-color": "#66c2ff",
"background-color": "white"
}
},
{
"values": [14],
"text": "Epsilon",
"background-color": "#99d6ff",
"legend-item": {
"background-color": "#99d6ff",
"font-color": "white"
},
"legend-marker": {
"border-color": "#99d6ff",
"background-color": "white"
}
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: "100%"
});
</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'></div>
</body>
</html>
var myConfig = {
"layout": "1x3",
"graphset": [{
"type": "pie",
"legend": {
"shared": true
},
"title": {
"text": "2010",
"y": "80%",
"font-family": "Georgia"
},
"plot": {
"value-box": {
"font-size": 10,
"font-weight": "normal",
"offset-r": "20%"
},
"tooltip": {
"text": "%t: %v"
}
},
"series": [{
"values": [35],
"text": "Alpha",
"background-color": "#007acc"
},
{
"values": [34],
"text": "Beta",
"background-color": "#0099ff"
},
{
"values": [31],
"text": "Gamma",
"background-color": "#33adff"
},
{
"values": [19],
"text": "Delta",
"background-color": "#66c2ff"
},
{
"values": [12],
"text": "Epsilon",
"background-color": "#99d6ff"
}
]
},
{
"type": "pie",
"legend": {
"shared": true
},
"title": {
"text": "2013",
"y": "80%",
"font-family": "Georgia"
},
"plot": {
"value-box": {
"font-size": 10,
"font-weight": "normal",
"offset-r": "20%"
},
"tooltip": {
"text": "%t: %v"
}
},
"series": [{
"values": [65],
"text": "Alpha",
"background-color": "#007acc"
},
{
"values": [35],
"text": "Beta",
"background-color": "#0099ff"
},
{
"values": [30],
"text": "Gamma",
"background-color": "#33adff"
},
{
"values": [17],
"text": "Delta",
"background-color": "#66c2ff"
},
{
"values": [16],
"text": "Epsilon",
"background-color": "#99d6ff"
}
]
},
{
"type": "pie",
"legend": {
"shared": true,
"layout": "1x6",
"x": "13%",
"y": "5%",
"toggle-action": "remove",
"border-width": 1,
"border-color": "#cccccc",
"border-radius": "3px",
"header": {
"text": "Shared Legend",
"text-align": "center",
"font-size": 12,
"font-family": "Georgia",
},
"footer": {
"text": "Click the legend items to repaint the charts without the selected series.",
"text-align": "center",
"font-size": 10,
"font-style": "italic",
"background-color": "white",
"border-bottom": "1px solid #cccccc",
"border-left": "1px solid #cccccc",
"border-right": "1px solid #cccccc"
},
"item": {
"font-family": "Georgia",
"border-radius": "3px"
},
"marker": {
"type": "circle",
"size": 3
}
},
"title": {
"text": "2016",
"y": "80%",
"font-family": "Georgia"
},
"plot": {
"value-box": {
"font-size": 10,
"font-weight": "normal",
"offset-r": "20%"
},
"tooltip": {
"text": "%t: %v"
}
},
"series": [{
"values": [59],
"text": "Alpha",
"background-color": "#007acc",
"legend-item": {
"background-color": "#007acc",
"font-color": "white"
},
"legend-marker": {
"border-color": "#007acc",
"background-color": "white"
}
},
{
"values": [49],
"text": "Beta",
"background-color": "#0099ff",
"legend-item": {
"background-color": "#0099ff",
"font-color": "white"
},
"legend-marker": {
"border-color": "#0099ff",
"background-color": "white"
}
},
{
"values": [31],
"text": "Gamma",
"background-color": "#33adff",
"legend-item": {
"background-color": "#33adff",
"font-color": "white"
},
"legend-marker": {
"border-color": "#33adff",
"background-color": "white"
}
},
{
"values": [21],
"text": "Delta",
"background-color": "#66c2ff",
"legend-item": {
"background-color": "#66c2ff",
"font-color": "white"
},
"legend-marker": {
"border-color": "#66c2ff",
"background-color": "white"
}
},
{
"values": [14],
"text": "Epsilon",
"background-color": "#99d6ff",
"legend-item": {
"background-color": "#99d6ff",
"font-color": "white"
},
"legend-marker": {
"border-color": "#99d6ff",
"background-color": "white"
}
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: "100%"
});