• 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.             "tooltip": {
    35.               "text": "%t: %v"
    36.             }
    37.           },
    38.           "series": [{
    39.               "values": [35],
    40.               "text": "Alpha",
    41.               "background-color": "#007acc"
    42.             },
    43.             {
    44.               "values": [34],
    45.               "text": "Beta",
    46.               "background-color": "#0099ff"
    47.             },
    48.             {
    49.               "values": [31],
    50.               "text": "Gamma",
    51.               "background-color": "#33adff"
    52.             },
    53.             {
    54.               "values": [19],
    55.               "text": "Delta",
    56.               "background-color": "#66c2ff"
    57.             },
    58.             {
    59.               "values": [12],
    60.               "text": "Epsilon",
    61.               "background-color": "#99d6ff"
    62.             }
    63.           ]
    64.         },
    65.         {
    66.           "type": "pie",
    67.           "legend": {
    68.             "shared": true
    69.           },
    70.           "title": {
    71.             "text": "2013",
    72.             "y": "80%",
    73.             "font-family": "Georgia"
    74.           },
    75.           "plot": {
    76.             "value-box": {
    77.               "font-size": 10,
    78.               "font-weight": "normal",
    79.               "offset-r": "20%"
    80.             },
    81.             "tooltip": {
    82.               "text": "%t: %v"
    83.             }
    84.           },
    85.           "series": [{
    86.               "values": [65],
    87.               "text": "Alpha",
    88.               "background-color": "#007acc"
    89.             },
    90.             {
    91.               "values": [35],
    92.               "text": "Beta",
    93.               "background-color": "#0099ff"
    94.             },
    95.             {
    96.               "values": [30],
    97.               "text": "Gamma",
    98.               "background-color": "#33adff"
    99.             },
    100.             {
    101.               "values": [17],
    102.               "text": "Delta",
    103.               "background-color": "#66c2ff"
    104.             },
    105.             {
    106.               "values": [16],
    107.               "text": "Epsilon",
    108.               "background-color": "#99d6ff"
    109.             }
    110.           ]
    111.         },
    112.         {
    113.           "type": "pie",
    114.           "legend": {
    115.             "shared": true,
    116.             "layout": "1x6",
    117.             "x": "13%",
    118.             "y": "5%",
    119.             "toggle-action": "remove",
    120.             "border-width": 1,
    121.             "border-color": "#cccccc",
    122.             "border-radius": "3px",
    123.             "header": {
    124.               "text": "Shared Legend",
    125.               "text-align": "center",
    126.               "font-size": 12,
    127.               "font-family": "Georgia",
    128.             },
    129.             "footer": {
    130.               "text": "Click the legend items to repaint the charts without the selected series.",
    131.               "text-align": "center",
    132.               "font-size": 10,
    133.               "font-style": "italic",
    134.               "background-color": "white",
    135.               "border-bottom": "1px solid #cccccc",
    136.               "border-left": "1px solid #cccccc",
    137.               "border-right": "1px solid #cccccc"
    138.             },
    139.             "item": {
    140.               "font-family": "Georgia",
    141.               "border-radius": "3px"
    142.             },
    143.             "marker": {
    144.               "type": "circle",
    145.               "size": 3
    146.             }
    147.           },
    148.           "title": {
    149.             "text": "2016",
    150.             "y": "80%",
    151.             "font-family": "Georgia"
    152.           },
    153.           "plot": {
    154.             "value-box": {
    155.               "font-size": 10,
    156.               "font-weight": "normal",
    157.               "offset-r": "20%"
    158.             },
    159.             "tooltip": {
    160.               "text": "%t: %v"
    161.             }
    162.           },
    163.           "series": [{
    164.               "values": [59],
    165.               "text": "Alpha",
    166.               "background-color": "#007acc",
    167.               "legend-item": {
    168.                 "background-color": "#007acc",
    169.                 "font-color": "white"
    170.               },
    171.               "legend-marker": {
    172.                 "border-color": "#007acc",
    173.                 "background-color": "white"
    174.               }
    175.             },
    176.             {
    177.               "values": [49],
    178.               "text": "Beta",
    179.               "background-color": "#0099ff",
    180.               "legend-item": {
    181.                 "background-color": "#0099ff",
    182.                 "font-color": "white"
    183.               },
    184.               "legend-marker": {
    185.                 "border-color": "#0099ff",
    186.                 "background-color": "white"
    187.               }
    188.             },
    189.             {
    190.               "values": [31],
    191.               "text": "Gamma",
    192.               "background-color": "#33adff",
    193.               "legend-item": {
    194.                 "background-color": "#33adff",
    195.                 "font-color": "white"
    196.               },
    197.               "legend-marker": {
    198.                 "border-color": "#33adff",
    199.                 "background-color": "white"
    200.               }
    201.             },
    202.             {
    203.               "values": [21],
    204.               "text": "Delta",
    205.               "background-color": "#66c2ff",
    206.               "legend-item": {
    207.                 "background-color": "#66c2ff",
    208.                 "font-color": "white"
    209.               },
    210.               "legend-marker": {
    211.                 "border-color": "#66c2ff",
    212.                 "background-color": "white"
    213.               }
    214.             },
    215.             {
    216.               "values": [14],
    217.               "text": "Epsilon",
    218.               "background-color": "#99d6ff",
    219.               "legend-item": {
    220.                 "background-color": "#99d6ff",
    221.                 "font-color": "white"
    222.               },
    223.               "legend-marker": {
    224.                 "border-color": "#99d6ff",
    225.                 "background-color": "white"
    226.               }
    227.             }
    228.           ]
    229.         }
    230.       ]
    231.     };
    232.  
    233.     zingchart.render({
    234.       id: 'myChart',
    235.       data: myConfig,
    236.       height: 400,
    237.       width: "100%"
    238.     });
    239.   </script>
    240. </body>
    241.  
    242. </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.         "tooltip": {
    20.           "text": "%t: %v"
    21.         }
    22.       },
    23.       "series": [{
    24.           "values": [35],
    25.           "text": "Alpha",
    26.           "background-color": "#007acc"
    27.         },
    28.         {
    29.           "values": [34],
    30.           "text": "Beta",
    31.           "background-color": "#0099ff"
    32.         },
    33.         {
    34.           "values": [31],
    35.           "text": "Gamma",
    36.           "background-color": "#33adff"
    37.         },
    38.         {
    39.           "values": [19],
    40.           "text": "Delta",
    41.           "background-color": "#66c2ff"
    42.         },
    43.         {
    44.           "values": [12],
    45.           "text": "Epsilon",
    46.           "background-color": "#99d6ff"
    47.         }
    48.       ]
    49.     },
    50.     {
    51.       "type": "pie",
    52.       "legend": {
    53.         "shared": true
    54.       },
    55.       "title": {
    56.         "text": "2013",
    57.         "y": "80%",
    58.         "font-family": "Georgia"
    59.       },
    60.       "plot": {
    61.         "value-box": {
    62.           "font-size": 10,
    63.           "font-weight": "normal",
    64.           "offset-r": "20%"
    65.         },
    66.         "tooltip": {
    67.           "text": "%t: %v"
    68.         }
    69.       },
    70.       "series": [{
    71.           "values": [65],
    72.           "text": "Alpha",
    73.           "background-color": "#007acc"
    74.         },
    75.         {
    76.           "values": [35],
    77.           "text": "Beta",
    78.           "background-color": "#0099ff"
    79.         },
    80.         {
    81.           "values": [30],
    82.           "text": "Gamma",
    83.           "background-color": "#33adff"
    84.         },
    85.         {
    86.           "values": [17],
    87.           "text": "Delta",
    88.           "background-color": "#66c2ff"
    89.         },
    90.         {
    91.           "values": [16],
    92.           "text": "Epsilon",
    93.           "background-color": "#99d6ff"
    94.         }
    95.       ]
    96.     },
    97.     {
    98.       "type": "pie",
    99.       "legend": {
    100.         "shared": true,
    101.         "layout": "1x6",
    102.         "x": "13%",
    103.         "y": "5%",
    104.         "toggle-action": "remove",
    105.         "border-width": 1,
    106.         "border-color": "#cccccc",
    107.         "border-radius": "3px",
    108.         "header": {
    109.           "text": "Shared Legend",
    110.           "text-align": "center",
    111.           "font-size": 12,
    112.           "font-family": "Georgia",
    113.         },
    114.         "footer": {
    115.           "text": "Click the legend items to repaint the charts without the selected series.",
    116.           "text-align": "center",
    117.           "font-size": 10,
    118.           "font-style": "italic",
    119.           "background-color": "white",
    120.           "border-bottom": "1px solid #cccccc",
    121.           "border-left": "1px solid #cccccc",
    122.           "border-right": "1px solid #cccccc"
    123.         },
    124.         "item": {
    125.           "font-family": "Georgia",
    126.           "border-radius": "3px"
    127.         },
    128.         "marker": {
    129.           "type": "circle",
    130.           "size": 3
    131.         }
    132.       },
    133.       "title": {
    134.         "text": "2016",
    135.         "y": "80%",
    136.         "font-family": "Georgia"
    137.       },
    138.       "plot": {
    139.         "value-box": {
    140.           "font-size": 10,
    141.           "font-weight": "normal",
    142.           "offset-r": "20%"
    143.         },
    144.         "tooltip": {
    145.           "text": "%t: %v"
    146.         }
    147.       },
    148.       "series": [{
    149.           "values": [59],
    150.           "text": "Alpha",
    151.           "background-color": "#007acc",
    152.           "legend-item": {
    153.             "background-color": "#007acc",
    154.             "font-color": "white"
    155.           },
    156.           "legend-marker": {
    157.             "border-color": "#007acc",
    158.             "background-color": "white"
    159.           }
    160.         },
    161.         {
    162.           "values": [49],
    163.           "text": "Beta",
    164.           "background-color": "#0099ff",
    165.           "legend-item": {
    166.             "background-color": "#0099ff",
    167.             "font-color": "white"
    168.           },
    169.           "legend-marker": {
    170.             "border-color": "#0099ff",
    171.             "background-color": "white"
    172.           }
    173.         },
    174.         {
    175.           "values": [31],
    176.           "text": "Gamma",
    177.           "background-color": "#33adff",
    178.           "legend-item": {
    179.             "background-color": "#33adff",
    180.             "font-color": "white"
    181.           },
    182.           "legend-marker": {
    183.             "border-color": "#33adff",
    184.             "background-color": "white"
    185.           }
    186.         },
    187.         {
    188.           "values": [21],
    189.           "text": "Delta",
    190.           "background-color": "#66c2ff",
    191.           "legend-item": {
    192.             "background-color": "#66c2ff",
    193.             "font-color": "white"
    194.           },
    195.           "legend-marker": {
    196.             "border-color": "#66c2ff",
    197.             "background-color": "white"
    198.           }
    199.         },
    200.         {
    201.           "values": [14],
    202.           "text": "Epsilon",
    203.           "background-color": "#99d6ff",
    204.           "legend-item": {
    205.             "background-color": "#99d6ff",
    206.             "font-color": "white"
    207.           },
    208.           "legend-marker": {
    209.             "border-color": "#99d6ff",
    210.             "background-color": "white"
    211.           }
    212.         }
    213.       ]
    214.     }
    215.   ]
    216. };
    217.  
    218. zingchart.render({
    219.   id: 'myChart',
    220.   data: myConfig,
    221.   height: 400,
    222.   width: "100%"
    223. });