• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            zing-grid[loading] {
                height: 400px;
            }
        </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%" 
    });