• 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.       "type": "pie",
    18.       "title": {
    19.         "text": "Legend"
    20.       },
    21.       "legend": {
    22.         "x": "75%",
    23.         "y": "25%",
    24.         "border-width": 1,
    25.         "border-color": "gray",
    26.         "border-radius": "5px",
    27.         "header": {
    28.           "text": "Legend",
    29.           "font-family": "Georgia",
    30.           "font-size": 12,
    31.           "font-color": "#3333cc",
    32.           "font-weight": "normal"
    33.         },
    34.         "marker": {
    35.           "type": "circle"
    36.         },
    37.         "toggle-action": "remove",
    38.         "minimize": true,
    39.         "icon": {
    40.           "line-color": "#9999ff"
    41.         },
    42.         "max-items": 8,
    43.         "overflow": "scroll"
    44.       },
    45.       "plotarea": {
    46.         "margin-right": "30%",
    47.         "margin-top": "15%"
    48.       },
    49.       "plot": {
    50.         "value-box": {
    51.           "text": "%v",
    52.           "font-size": 12,
    53.           "font-family": "Georgia",
    54.           "font-weight": "normal",
    55.           "placement": "out",
    56.           "font-color": "gray",
    57.         },
    58.         "tooltip": {
    59.           "text": "%t: %v (%npv%)",
    60.           "font-color": "black",
    61.           "font-family": "Georgia",
    62.           "text-alpha": 1,
    63.           "background-color": "white",
    64.           "alpha": 0.7,
    65.           "border-width": 1,
    66.           "border-color": "#cccccc",
    67.           "line-style": "dotted",
    68.           "border-radius": "10px",
    69.           "padding": "10%",
    70.           "placement": "node:center"
    71.         },
    72.         "border-width": 1,
    73.         "border-color": "#cccccc",
    74.         "line-style": "dotted"
    75.       },
    76.       "series": [{
    77.           "values": [234],
    78.           "background-color": "#cc0000",
    79.           "text": "Alpha"
    80.         },
    81.         {
    82.           "values": [121],
    83.           "background-color": "#ff3300",
    84.           "text": "Beta"
    85.         },
    86.         {
    87.           "values": [77],
    88.           "background-color": "#ff6600",
    89.           "text": "Gamma"
    90.         },
    91.         {
    92.           "values": [65],
    93.           "background-color": "#ff9933",
    94.           "text": "Delta"
    95.         },
    96.         {
    97.           "values": [59],
    98.           "background-color": "#ffcc00",
    99.           "text": "Epsilon"
    100.         },
    101.         {
    102.           "values": [35],
    103.           "background-color": "#ace600",
    104.           "text": "Zeta"
    105.         },
    106.         {
    107.           "values": [34],
    108.           "background-color": "#88cc00",
    109.           "text": "Eta"
    110.         },
    111.         {
    112.           "values": [31],
    113.           "background-color": "#339933",
    114.           "text": "Theta"
    115.         },
    116.         {
    117.           "values": [16],
    118.           "background-color": "#66ccff",
    119.           "text": "Iota"
    120.         },
    121.         {
    122.           "values": [14],
    123.           "background-color": "#3399ff",
    124.           "text": "Kappa"
    125.         },
    126.         {
    127.           "values": [13],
    128.           "background-color": "#0066ff",
    129.           "text": "Lambda"
    130.         },
    131.         {
    132.           "values": [12],
    133.           "background-color": "#3333cc",
    134.           "text": "Mu"
    135.         },
    136.         {
    137.           "values": [11],
    138.           "background-color": "#6600ff",
    139.           "text": "Nu"
    140.         },
    141.         {
    142.           "values": [10],
    143.           "background-color": "#9933ff",
    144.           "text": "Xi"
    145.         },
    146.         {
    147.           "values": [9],
    148.           "background-color": "#9999ff",
    149.           "text": "Omicron"
    150.         }
    151.       ]
    152.     };
    153.  
    154.     zingchart.render({
    155.       id: 'myChart',
    156.       data: myConfig,
    157.       height: 400,
    158.       width: "100%"
    159.     });
    160.   </script>
    161. </body>
    162.  
    163. </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.   "type": "pie",
    3.   "title": {
    4.     "text": "Legend"
    5.   },
    6.   "legend": {
    7.     "x": "75%",
    8.     "y": "25%",
    9.     "border-width": 1,
    10.     "border-color": "gray",
    11.     "border-radius": "5px",
    12.     "header": {
    13.       "text": "Legend",
    14.       "font-family": "Georgia",
    15.       "font-size": 12,
    16.       "font-color": "#3333cc",
    17.       "font-weight": "normal"
    18.     },
    19.     "marker": {
    20.       "type": "circle"
    21.     },
    22.     "toggle-action": "remove",
    23.     "minimize": true,
    24.     "icon": {
    25.       "line-color": "#9999ff"
    26.     },
    27.     "max-items": 8,
    28.     "overflow": "scroll"
    29.   },
    30.   "plotarea": {
    31.     "margin-right": "30%",
    32.     "margin-top": "15%"
    33.   },
    34.   "plot": {
    35.     "value-box": {
    36.       "text": "%v",
    37.       "font-size": 12,
    38.       "font-family": "Georgia",
    39.       "font-weight": "normal",
    40.       "placement": "out",
    41.       "font-color": "gray",
    42.     },
    43.     "tooltip": {
    44.       "text": "%t: %v (%npv%)",
    45.       "font-color": "black",
    46.       "font-family": "Georgia",
    47.       "text-alpha": 1,
    48.       "background-color": "white",
    49.       "alpha": 0.7,
    50.       "border-width": 1,
    51.       "border-color": "#cccccc",
    52.       "line-style": "dotted",
    53.       "border-radius": "10px",
    54.       "padding": "10%",
    55.       "placement": "node:center"
    56.     },
    57.     "border-width": 1,
    58.     "border-color": "#cccccc",
    59.     "line-style": "dotted"
    60.   },
    61.   "series": [{
    62.       "values": [234],
    63.       "background-color": "#cc0000",
    64.       "text": "Alpha"
    65.     },
    66.     {
    67.       "values": [121],
    68.       "background-color": "#ff3300",
    69.       "text": "Beta"
    70.     },
    71.     {
    72.       "values": [77],
    73.       "background-color": "#ff6600",
    74.       "text": "Gamma"
    75.     },
    76.     {
    77.       "values": [65],
    78.       "background-color": "#ff9933",
    79.       "text": "Delta"
    80.     },
    81.     {
    82.       "values": [59],
    83.       "background-color": "#ffcc00",
    84.       "text": "Epsilon"
    85.     },
    86.     {
    87.       "values": [35],
    88.       "background-color": "#ace600",
    89.       "text": "Zeta"
    90.     },
    91.     {
    92.       "values": [34],
    93.       "background-color": "#88cc00",
    94.       "text": "Eta"
    95.     },
    96.     {
    97.       "values": [31],
    98.       "background-color": "#339933",
    99.       "text": "Theta"
    100.     },
    101.     {
    102.       "values": [16],
    103.       "background-color": "#66ccff",
    104.       "text": "Iota"
    105.     },
    106.     {
    107.       "values": [14],
    108.       "background-color": "#3399ff",
    109.       "text": "Kappa"
    110.     },
    111.     {
    112.       "values": [13],
    113.       "background-color": "#0066ff",
    114.       "text": "Lambda"
    115.     },
    116.     {
    117.       "values": [12],
    118.       "background-color": "#3333cc",
    119.       "text": "Mu"
    120.     },
    121.     {
    122.       "values": [11],
    123.       "background-color": "#6600ff",
    124.       "text": "Nu"
    125.     },
    126.     {
    127.       "values": [10],
    128.       "background-color": "#9933ff",
    129.       "text": "Xi"
    130.     },
    131.     {
    132.       "values": [9],
    133.       "background-color": "#9999ff",
    134.       "text": "Omicron"
    135.     }
    136.   ]
    137. };
    138.  
    139. zingchart.render({
    140.   id: 'myChart',
    141.   data: myConfig,
    142.   height: 400,
    143.   width: "100%"
    144. });