• 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.       "graphset": [{
    18.           "labels": [{
    19.             "text": "Shared Legend",
    20.             "font-size": 20,
    21.             "font-weight": "bold",
    22.             "height": "20%",
    23.             "width": "100%",
    24.             "x": "40%",
    25.             "y": "20%"
    26.           }]
    27.         },
    28.         {
    29.           "type": "ring",
    30.           "legend": {
    31.             "shared": true
    32.           },
    33.           "height": "90%",
    34.           "width": "33%",
    35.           "x": "0%",
    36.           "y": "10%",
    37.           "plot": {
    38.             "value-box": {
    39.               "font-size": 12
    40.             }
    41.           },
    42.           "series": [{
    43.               "values": [35],
    44.               "text": "Blue Series"
    45.             },
    46.             {
    47.               "values": [34],
    48.               "text": "Red Series"
    49.             },
    50.             {
    51.               "values": [31],
    52.               "text": "Green Series"
    53.             }
    54.           ]
    55.         },
    56.         {
    57.           "type": "ring",
    58.           "legend": {
    59.             "shared": true
    60.           },
    61.           "height": "90%",
    62.           "width": "33%",
    63.           "x": "33%",
    64.           "y": "10%",
    65.           "plot": {
    66.             "value-box": {
    67.               "font-size": 12
    68.             }
    69.           },
    70.           "series": [{
    71.               "values": [65],
    72.               "text": "Blue Series"
    73.             },
    74.             {
    75.               "values": [30],
    76.               "text": "Red Series"
    77.             },
    78.             {
    79.               "values": [16],
    80.               "text": "Green Series"
    81.             }
    82.           ]
    83.         },
    84.         {
    85.           "type": "ring",
    86.           "legend": {
    87.             "shared": true,
    88.             "x": "65%",
    89.             "y": "10%",
    90.             "background-color": "#f2f2f2",
    91.             "border-width": 1,
    92.             "border-color": "#cccccc",
    93.             "border-radius": "3px",
    94.             "item": {
    95.               "font-family": "Georgia",
    96.               "border-radius": "3px"
    97.             },
    98.             "marker": {
    99.               "type": "circle",
    100.               "size": 3
    101.             }
    102.           },
    103.           "height": "90%",
    104.           "width": "33%",
    105.           "x": "66%",
    106.           "y": "10%",
    107.           "plot": {
    108.             "value-box": {
    109.               "font-size": 12
    110.             }
    111.           },
    112.           "series": [{
    113.               "values": [59],
    114.               "text": "Blue Series",
    115.               "legend-item": {
    116.                 "background-color": "#29A2CC",
    117.                 "font-color": "#eaf7fb"
    118.               },
    119.               "legend-marker": {
    120.                 "border-color": "#29A2CC",
    121.                 "background-color": "#eaf7fb"
    122.               }
    123.             },
    124.             {
    125.               "values": [49],
    126.               "text": "Red Series",
    127.               "legend-item": {
    128.                 "background-color": "#D31E1E",
    129.                 "font-color": "#fce9e9"
    130.               },
    131.               "legend-marker": {
    132.                 "border-color": "#D31E1E",
    133.                 "background-color": "#fce9e9"
    134.               }
    135.             },
    136.             {
    137.               "values": [31],
    138.               "text": "Green Series",
    139.               "legend-item": {
    140.                 "background-color": "#7CA82B",
    141.                 "font-color": "#f5faeb"
    142.               },
    143.               "legend-marker": {
    144.                 "border-color": "#7CA82B",
    145.                 "background-color": "#f5faeb"
    146.               }
    147.             }
    148.           ]
    149.         }
    150.       ]
    151.     };
    152.  
    153.     zingchart.render({
    154.       id: 'myChart',
    155.       data: myConfig,
    156.       height: 400,
    157.       width: "100%"
    158.     });
    159.   </script>
    160. </body>
    161.  
    162. </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.   "graphset": [{
    3.       "labels": [{
    4.         "text": "Shared Legend",
    5.         "font-size": 20,
    6.         "font-weight": "bold",
    7.         "height": "20%",
    8.         "width": "100%",
    9.         "x": "40%",
    10.         "y": "20%"
    11.       }]
    12.     },
    13.     {
    14.       "type": "ring",
    15.       "legend": {
    16.         "shared": true
    17.       },
    18.       "height": "90%",
    19.       "width": "33%",
    20.       "x": "0%",
    21.       "y": "10%",
    22.       "plot": {
    23.         "value-box": {
    24.           "font-size": 12
    25.         }
    26.       },
    27.       "series": [{
    28.           "values": [35],
    29.           "text": "Blue Series"
    30.         },
    31.         {
    32.           "values": [34],
    33.           "text": "Red Series"
    34.         },
    35.         {
    36.           "values": [31],
    37.           "text": "Green Series"
    38.         }
    39.       ]
    40.     },
    41.     {
    42.       "type": "ring",
    43.       "legend": {
    44.         "shared": true
    45.       },
    46.       "height": "90%",
    47.       "width": "33%",
    48.       "x": "33%",
    49.       "y": "10%",
    50.       "plot": {
    51.         "value-box": {
    52.           "font-size": 12
    53.         }
    54.       },
    55.       "series": [{
    56.           "values": [65],
    57.           "text": "Blue Series"
    58.         },
    59.         {
    60.           "values": [30],
    61.           "text": "Red Series"
    62.         },
    63.         {
    64.           "values": [16],
    65.           "text": "Green Series"
    66.         }
    67.       ]
    68.     },
    69.     {
    70.       "type": "ring",
    71.       "legend": {
    72.         "shared": true,
    73.         "x": "65%",
    74.         "y": "10%",
    75.         "background-color": "#f2f2f2",
    76.         "border-width": 1,
    77.         "border-color": "#cccccc",
    78.         "border-radius": "3px",
    79.         "item": {
    80.           "font-family": "Georgia",
    81.           "border-radius": "3px"
    82.         },
    83.         "marker": {
    84.           "type": "circle",
    85.           "size": 3
    86.         }
    87.       },
    88.       "height": "90%",
    89.       "width": "33%",
    90.       "x": "66%",
    91.       "y": "10%",
    92.       "plot": {
    93.         "value-box": {
    94.           "font-size": 12
    95.         }
    96.       },
    97.       "series": [{
    98.           "values": [59],
    99.           "text": "Blue Series",
    100.           "legend-item": {
    101.             "background-color": "#29A2CC",
    102.             "font-color": "#eaf7fb"
    103.           },
    104.           "legend-marker": {
    105.             "border-color": "#29A2CC",
    106.             "background-color": "#eaf7fb"
    107.           }
    108.         },
    109.         {
    110.           "values": [49],
    111.           "text": "Red Series",
    112.           "legend-item": {
    113.             "background-color": "#D31E1E",
    114.             "font-color": "#fce9e9"
    115.           },
    116.           "legend-marker": {
    117.             "border-color": "#D31E1E",
    118.             "background-color": "#fce9e9"
    119.           }
    120.         },
    121.         {
    122.           "values": [31],
    123.           "text": "Green Series",
    124.           "legend-item": {
    125.             "background-color": "#7CA82B",
    126.             "font-color": "#f5faeb"
    127.           },
    128.           "legend-marker": {
    129.             "border-color": "#7CA82B",
    130.             "background-color": "#f5faeb"
    131.           }
    132.         }
    133.       ]
    134.     }
    135.   ]
    136. };
    137.  
    138. zingchart.render({
    139.   id: 'myChart',
    140.   data: myConfig,
    141.   height: 400,
    142.   width: "100%"
    143. });