<!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 = {
"type": "pie",
"title": {
"text": "Animated Pie Chart"
},
"legend": {
"x": "75%",
"y": "25%",
"border-width": 1,
"border-color": "gray",
"border-radius": "5px",
"header": {
"text": "Legend",
"font-family": "Georgia",
"font-size": 12,
"font-color": "#3333cc",
"font-weight": "normal"
},
"marker": {
"type": "circle"
},
"toggle-action": "remove",
"minimize": true,
"icon": {
"line-color": "#9999ff"
},
"max-items": 8,
"overflow": "scroll"
},
"plotarea": {
"margin-right": "30%",
"margin-top": "15%"
},
"plot": {
"animation": {
"on-legend-toggle": true, //set to true to show animation and false to turn off
"effect": 5,
"method": 1,
"sequence": 1,
"speed": 1
},
"value-box": {
"text": "%v",
"font-size": 12,
"font-family": "Georgia",
"font-weight": "normal",
"placement": "out",
"font-color": "gray",
},
"tooltip": {
"text": "%t: %v (%npv%)",
"font-color": "black",
"font-family": "Georgia",
"text-alpha": 1,
"background-color": "white",
"alpha": 0.7,
"border-width": 1,
"border-color": "#cccccc",
"line-style": "dotted",
"border-radius": "10px",
"padding": "10%",
"placement": "node:center"
},
"border-width": 1,
"border-color": "#cccccc",
"line-style": "dotted"
},
"series": [{
"values": [234],
"background-color": "#cc0000",
"text": "Alpha"
},
{
"values": [121],
"background-color": "#ff3300",
"text": "Beta"
},
{
"values": [77],
"background-color": "#ff6600",
"text": "Gamma"
},
{
"values": [65],
"background-color": "#ff9933",
"text": "Delta"
},
{
"values": [59],
"background-color": "#ffcc00",
"text": "Epsilon"
},
{
"values": [35],
"background-color": "#ace600",
"text": "Zeta"
},
{
"values": [34],
"background-color": "#88cc00",
"text": "Eta"
},
{
"values": [31],
"background-color": "#339933",
"text": "Theta"
},
{
"values": [16],
"background-color": "#66ccff",
"text": "Iota"
},
{
"values": [14],
"background-color": "#3399ff",
"text": "Kappa"
},
{
"values": [13],
"background-color": "#0066ff",
"text": "Lambda"
},
{
"values": [12],
"background-color": "#3333cc",
"text": "Mu"
},
{
"values": [11],
"background-color": "#6600ff",
"text": "Nu"
},
{
"values": [10],
"background-color": "#9933ff",
"text": "Xi"
},
{
"values": [9],
"background-color": "#9999ff",
"text": "Omicron"
}
]
};
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 = {
"type": "pie",
"title": {
"text": "Animated Pie Chart"
},
"legend": {
"x": "75%",
"y": "25%",
"border-width": 1,
"border-color": "gray",
"border-radius": "5px",
"header": {
"text": "Legend",
"font-family": "Georgia",
"font-size": 12,
"font-color": "#3333cc",
"font-weight": "normal"
},
"marker": {
"type": "circle"
},
"toggle-action": "remove",
"minimize": true,
"icon": {
"line-color": "#9999ff"
},
"max-items": 8,
"overflow": "scroll"
},
"plotarea": {
"margin-right": "30%",
"margin-top": "15%"
},
"plot": {
"animation": {
"on-legend-toggle": true, //set to true to show animation and false to turn off
"effect": 5,
"method": 1,
"sequence": 1,
"speed": 1
},
"value-box": {
"text": "%v",
"font-size": 12,
"font-family": "Georgia",
"font-weight": "normal",
"placement": "out",
"font-color": "gray",
},
"tooltip": {
"text": "%t: %v (%npv%)",
"font-color": "black",
"font-family": "Georgia",
"text-alpha": 1,
"background-color": "white",
"alpha": 0.7,
"border-width": 1,
"border-color": "#cccccc",
"line-style": "dotted",
"border-radius": "10px",
"padding": "10%",
"placement": "node:center"
},
"border-width": 1,
"border-color": "#cccccc",
"line-style": "dotted"
},
"series": [{
"values": [234],
"background-color": "#cc0000",
"text": "Alpha"
},
{
"values": [121],
"background-color": "#ff3300",
"text": "Beta"
},
{
"values": [77],
"background-color": "#ff6600",
"text": "Gamma"
},
{
"values": [65],
"background-color": "#ff9933",
"text": "Delta"
},
{
"values": [59],
"background-color": "#ffcc00",
"text": "Epsilon"
},
{
"values": [35],
"background-color": "#ace600",
"text": "Zeta"
},
{
"values": [34],
"background-color": "#88cc00",
"text": "Eta"
},
{
"values": [31],
"background-color": "#339933",
"text": "Theta"
},
{
"values": [16],
"background-color": "#66ccff",
"text": "Iota"
},
{
"values": [14],
"background-color": "#3399ff",
"text": "Kappa"
},
{
"values": [13],
"background-color": "#0066ff",
"text": "Lambda"
},
{
"values": [12],
"background-color": "#3333cc",
"text": "Mu"
},
{
"values": [11],
"background-color": "#6600ff",
"text": "Nu"
},
{
"values": [10],
"background-color": "#9933ff",
"text": "Xi"
},
{
"values": [9],
"background-color": "#9999ff",
"text": "Omicron"
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: "100%"
});