• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     var myConfig = {
    17.       "layout": "1x3",
    18.       "graphset": [{
    19.           "type": "pie",
    20.           "legend": {
    21.             "shared": true
    22.           },
    23.           "title": {
    24.             "text": "2010",
    25.             "y": "80%",
    26.             "font-family": "Georgia"
    27.           },
    28.           "plot": {
    29.             "value-box": {
    30.               "font-size": 10,
    31.               "font-weight": "normal",
    32.               "offset-r": "20%"
    33.             }
    34.           },
    35.           "series": [{
    36.               "values": [35]
    37.             },
    38.             {
    39.               "values": [34]
    40.             },
    41.             {
    42.               "values": [31]
    43.             },
    44.             {
    45.               "values": [19]
    46.             },
    47.             {
    48.               "values": [12]
    49.             },
    50.             {
    51.               "values": [9]
    52.             }
    53.           ]
    54.         },
    55.         {
    56.           "type": "pie",
    57.           "legend": {
    58.             "shared": true
    59.           },
    60.           "title": {
    61.             "text": "2013",
    62.             "y": "80%",
    63.             "font-family": "Georgia"
    64.           },
    65.           "plot": {
    66.             "value-box": {
    67.               "font-size": 10,
    68.               "font-weight": "normal",
    69.               "offset-r": "20%"
    70.             }
    71.           },
    72.           "series": [{
    73.               "values": [65]
    74.             },
    75.             {
    76.               "values": [35]
    77.             },
    78.             {
    79.               "values": [30]
    80.             },
    81.             {
    82.               "values": [17]
    83.             },
    84.             {
    85.               "values": [16]
    86.             },
    87.             {
    88.               "values": [15]
    89.             }
    90.           ]
    91.         },
    92.         {
    93.           "type": "pie",
    94.           "legend": {
    95.             "shared": true,
    96.             "layout": "1x6",
    97.             "x": "13%",
    98.             "y": "5%",
    99.             "toggle-action": "remove",
    100.             "border-width": 1,
    101.             "border-color": "#cccccc",
    102.             "border-radius": "3px",
    103.             "header": {
    104.               "text": "Legend",
    105.               "text-align": "center",
    106.               "font-size": 12,
    107.               "font-family": "Georgia",
    108.             },
    109.             "footer": {
    110.               "text": "Click the legend items to repaint the charts without the selected series.",
    111.               "text-align": "center",
    112.               "font-size": 10,
    113.               "font-style": "italic",
    114.               "background-color": "white",
    115.               "border-bottom": "1px solid #cccccc",
    116.               "border-left": "1px solid #cccccc",
    117.               "border-right": "1px solid #cccccc"
    118.             },
    119.             "item": {
    120.               "font-family": "Georgia",
    121.               "border-radius": "3px"
    122.             },
    123.             "marker": {
    124.               "type": "circle",
    125.               "size": 3
    126.             }
    127.           },
    128.           "title": {
    129.             "text": "2016",
    130.             "y": "80%",
    131.             "font-family": "Georgia"
    132.           },
    133.           "plot": {
    134.             "value-box": {
    135.               "font-size": 10,
    136.               "font-weight": "normal",
    137.               "offset-r": "20%"
    138.             }
    139.           },
    140.           "series": [{
    141.               "values": [59],
    142.               "text": "Blue",
    143.               "legend-item": {
    144.                 "background-color": "#29A2CC",
    145.                 "font-color": "#eaf7fb"
    146.               },
    147.               "legend-marker": {
    148.                 "border-color": "#29A2CC",
    149.                 "background-color": "#eaf7fb"
    150.               }
    151.             },
    152.             {
    153.               "values": [49],
    154.               "text": "Red",
    155.               "legend-item": {
    156.                 "background-color": "#D31E1E",
    157.                 "font-color": "#fce9e9"
    158.               },
    159.               "legend-marker": {
    160.                 "border-color": "#D31E1E",
    161.                 "background-color": "#fce9e9"
    162.               }
    163.             },
    164.             {
    165.               "values": [31],
    166.               "text": "Green",
    167.               "legend-item": {
    168.                 "background-color": "#7CA82B",
    169.                 "font-color": "#f5faeb"
    170.               },
    171.               "legend-marker": {
    172.                 "border-color": "#7CA82B",
    173.                 "background-color": "#f5faeb"
    174.               }
    175.             },
    176.             {
    177.               "values": [21],
    178.               "text": "Orange",
    179.               "legend-item": {
    180.                 "background-color": "#EF8535",
    181.                 "font-color": "#f5faeb"
    182.               },
    183.               "legend-marker": {
    184.                 "border-color": "#EF8535",
    185.                 "background-color": "#f5faeb"
    186.               }
    187.             },
    188.             {
    189.               "values": [14],
    190.               "text": "Purple",
    191.               "legend-item": {
    192.                 "background-color": "#A14BC9",
    193.                 "font-color": "#f5faeb"
    194.               },
    195.               "legend-marker": {
    196.                 "border-color": "#A14BC9",
    197.                 "background-color": "#f5faeb"
    198.               }
    199.             },
    200.             {
    201.               "values": [9],
    202.               "text": "Brown",
    203.               "legend-item": {
    204.                 "background-color": "#A05F18",
    205.                 "font-color": "#f5faeb"
    206.               },
    207.               "legend-marker": {
    208.                 "border-color": "#A05F18",
    209.                 "background-color": "#f5faeb"
    210.               }
    211.             }
    212.           ]
    213.         }
    214.       ]
    215.     };
    216.  
    217.     zingchart.render({
    218.       id: 'myChart',
    219.       data: myConfig,
    220.       height: 400,
    221.       width: 600
    222.     });
    223.   </script>
    224. </body>
    225.  
    226. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. var myConfig = {
    2.   "layout": "1x3",
    3.   "graphset": [{
    4.       "type": "pie",
    5.       "legend": {
    6.         "shared": true
    7.       },
    8.       "title": {
    9.         "text": "2010",
    10.         "y": "80%",
    11.         "font-family": "Georgia"
    12.       },
    13.       "plot": {
    14.         "value-box": {
    15.           "font-size": 10,
    16.           "font-weight": "normal",
    17.           "offset-r": "20%"
    18.         }
    19.       },
    20.       "series": [{
    21.           "values": [35]
    22.         },
    23.         {
    24.           "values": [34]
    25.         },
    26.         {
    27.           "values": [31]
    28.         },
    29.         {
    30.           "values": [19]
    31.         },
    32.         {
    33.           "values": [12]
    34.         },
    35.         {
    36.           "values": [9]
    37.         }
    38.       ]
    39.     },
    40.     {
    41.       "type": "pie",
    42.       "legend": {
    43.         "shared": true
    44.       },
    45.       "title": {
    46.         "text": "2013",
    47.         "y": "80%",
    48.         "font-family": "Georgia"
    49.       },
    50.       "plot": {
    51.         "value-box": {
    52.           "font-size": 10,
    53.           "font-weight": "normal",
    54.           "offset-r": "20%"
    55.         }
    56.       },
    57.       "series": [{
    58.           "values": [65]
    59.         },
    60.         {
    61.           "values": [35]
    62.         },
    63.         {
    64.           "values": [30]
    65.         },
    66.         {
    67.           "values": [17]
    68.         },
    69.         {
    70.           "values": [16]
    71.         },
    72.         {
    73.           "values": [15]
    74.         }
    75.       ]
    76.     },
    77.     {
    78.       "type": "pie",
    79.       "legend": {
    80.         "shared": true,
    81.         "layout": "1x6",
    82.         "x": "13%",
    83.         "y": "5%",
    84.         "toggle-action": "remove",
    85.         "border-width": 1,
    86.         "border-color": "#cccccc",
    87.         "border-radius": "3px",
    88.         "header": {
    89.           "text": "Legend",
    90.           "text-align": "center",
    91.           "font-size": 12,
    92.           "font-family": "Georgia",
    93.         },
    94.         "footer": {
    95.           "text": "Click the legend items to repaint the charts without the selected series.",
    96.           "text-align": "center",
    97.           "font-size": 10,
    98.           "font-style": "italic",
    99.           "background-color": "white",
    100.           "border-bottom": "1px solid #cccccc",
    101.           "border-left": "1px solid #cccccc",
    102.           "border-right": "1px solid #cccccc"
    103.         },
    104.         "item": {
    105.           "font-family": "Georgia",
    106.           "border-radius": "3px"
    107.         },
    108.         "marker": {
    109.           "type": "circle",
    110.           "size": 3
    111.         }
    112.       },
    113.       "title": {
    114.         "text": "2016",
    115.         "y": "80%",
    116.         "font-family": "Georgia"
    117.       },
    118.       "plot": {
    119.         "value-box": {
    120.           "font-size": 10,
    121.           "font-weight": "normal",
    122.           "offset-r": "20%"
    123.         }
    124.       },
    125.       "series": [{
    126.           "values": [59],
    127.           "text": "Blue",
    128.           "legend-item": {
    129.             "background-color": "#29A2CC",
    130.             "font-color": "#eaf7fb"
    131.           },
    132.           "legend-marker": {
    133.             "border-color": "#29A2CC",
    134.             "background-color": "#eaf7fb"
    135.           }
    136.         },
    137.         {
    138.           "values": [49],
    139.           "text": "Red",
    140.           "legend-item": {
    141.             "background-color": "#D31E1E",
    142.             "font-color": "#fce9e9"
    143.           },
    144.           "legend-marker": {
    145.             "border-color": "#D31E1E",
    146.             "background-color": "#fce9e9"
    147.           }
    148.         },
    149.         {
    150.           "values": [31],
    151.           "text": "Green",
    152.           "legend-item": {
    153.             "background-color": "#7CA82B",
    154.             "font-color": "#f5faeb"
    155.           },
    156.           "legend-marker": {
    157.             "border-color": "#7CA82B",
    158.             "background-color": "#f5faeb"
    159.           }
    160.         },
    161.         {
    162.           "values": [21],
    163.           "text": "Orange",
    164.           "legend-item": {
    165.             "background-color": "#EF8535",
    166.             "font-color": "#f5faeb"
    167.           },
    168.           "legend-marker": {
    169.             "border-color": "#EF8535",
    170.             "background-color": "#f5faeb"
    171.           }
    172.         },
    173.         {
    174.           "values": [14],
    175.           "text": "Purple",
    176.           "legend-item": {
    177.             "background-color": "#A14BC9",
    178.             "font-color": "#f5faeb"
    179.           },
    180.           "legend-marker": {
    181.             "border-color": "#A14BC9",
    182.             "background-color": "#f5faeb"
    183.           }
    184.         },
    185.         {
    186.           "values": [9],
    187.           "text": "Brown",
    188.           "legend-item": {
    189.             "background-color": "#A05F18",
    190.             "font-color": "#f5faeb"
    191.           },
    192.           "legend-marker": {
    193.             "border-color": "#A05F18",
    194.             "background-color": "#f5faeb"
    195.           }
    196.         }
    197.       ]
    198.     }
    199.   ]
    200. };
    201.  
    202. zingchart.render({
    203.   id: 'myChart',
    204.   data: myConfig,
    205.   height: 400,
    206.   width: 600
    207. });