<!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%"
}
},
"series": [{
"values": [35]
},
{
"values": [34]
},
{
"values": [31]
},
{
"values": [19]
},
{
"values": [12]
},
{
"values": [9]
}
]
},
{
"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%"
}
},
"series": [{
"values": [65]
},
{
"values": [35]
},
{
"values": [30]
},
{
"values": [17]
},
{
"values": [16]
},
{
"values": [15]
}
]
},
{
"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": "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%"
}
},
"series": [{
"values": [59],
"text": "Blue",
"legend-item": {
"background-color": "#29A2CC",
"font-color": "#eaf7fb"
},
"legend-marker": {
"border-color": "#29A2CC",
"background-color": "#eaf7fb"
}
},
{
"values": [49],
"text": "Red",
"legend-item": {
"background-color": "#D31E1E",
"font-color": "#fce9e9"
},
"legend-marker": {
"border-color": "#D31E1E",
"background-color": "#fce9e9"
}
},
{
"values": [31],
"text": "Green",
"legend-item": {
"background-color": "#7CA82B",
"font-color": "#f5faeb"
},
"legend-marker": {
"border-color": "#7CA82B",
"background-color": "#f5faeb"
}
},
{
"values": [21],
"text": "Orange",
"legend-item": {
"background-color": "#EF8535",
"font-color": "#f5faeb"
},
"legend-marker": {
"border-color": "#EF8535",
"background-color": "#f5faeb"
}
},
{
"values": [14],
"text": "Purple",
"legend-item": {
"background-color": "#A14BC9",
"font-color": "#f5faeb"
},
"legend-marker": {
"border-color": "#A14BC9",
"background-color": "#f5faeb"
}
},
{
"values": [9],
"text": "Brown",
"legend-item": {
"background-color": "#A05F18",
"font-color": "#f5faeb"
},
"legend-marker": {
"border-color": "#A05F18",
"background-color": "#f5faeb"
}
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
</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%"
}
},
"series": [{
"values": [35]
},
{
"values": [34]
},
{
"values": [31]
},
{
"values": [19]
},
{
"values": [12]
},
{
"values": [9]
}
]
},
{
"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%"
}
},
"series": [{
"values": [65]
},
{
"values": [35]
},
{
"values": [30]
},
{
"values": [17]
},
{
"values": [16]
},
{
"values": [15]
}
]
},
{
"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": "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%"
}
},
"series": [{
"values": [59],
"text": "Blue",
"legend-item": {
"background-color": "#29A2CC",
"font-color": "#eaf7fb"
},
"legend-marker": {
"border-color": "#29A2CC",
"background-color": "#eaf7fb"
}
},
{
"values": [49],
"text": "Red",
"legend-item": {
"background-color": "#D31E1E",
"font-color": "#fce9e9"
},
"legend-marker": {
"border-color": "#D31E1E",
"background-color": "#fce9e9"
}
},
{
"values": [31],
"text": "Green",
"legend-item": {
"background-color": "#7CA82B",
"font-color": "#f5faeb"
},
"legend-marker": {
"border-color": "#7CA82B",
"background-color": "#f5faeb"
}
},
{
"values": [21],
"text": "Orange",
"legend-item": {
"background-color": "#EF8535",
"font-color": "#f5faeb"
},
"legend-marker": {
"border-color": "#EF8535",
"background-color": "#f5faeb"
}
},
{
"values": [14],
"text": "Purple",
"legend-item": {
"background-color": "#A14BC9",
"font-color": "#f5faeb"
},
"legend-marker": {
"border-color": "#A14BC9",
"background-color": "#f5faeb"
}
},
{
"values": [9],
"text": "Brown",
"legend-item": {
"background-color": "#A05F18",
"font-color": "#f5faeb"
},
"legend-marker": {
"border-color": "#A05F18",
"background-color": "#f5faeb"
}
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});