• 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": "Animated Pie Chart"
    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.         "animation": {
    51.           "on-legend-toggle": true, //set to true to show animation and false to turn off
    52.           "effect": 5,
    53.           "method": 1,
    54.           "sequence": 1,
    55.           "speed": 1
    56.         },
    57.         "value-box": {
    58.           "text": "%v",
    59.           "font-size": 12,
    60.           "font-family": "Georgia",
    61.           "font-weight": "normal",
    62.           "placement": "out",
    63.           "font-color": "gray",
    64.         },
    65.         "tooltip": {
    66.           "text": "%t: %v (%npv%)",
    67.           "font-color": "black",
    68.           "font-family": "Georgia",
    69.           "text-alpha": 1,
    70.           "background-color": "white",
    71.           "alpha": 0.7,
    72.           "border-width": 1,
    73.           "border-color": "#cccccc",
    74.           "line-style": "dotted",
    75.           "border-radius": "10px",
    76.           "padding": "10%",
    77.           "placement": "node:center"
    78.         },
    79.         "border-width": 1,
    80.         "border-color": "#cccccc",
    81.         "line-style": "dotted"
    82.       },
    83.       "series": [{
    84.           "values": [234],
    85.           "background-color": "#cc0000",
    86.           "text": "Alpha"
    87.         },
    88.         {
    89.           "values": [121],
    90.           "background-color": "#ff3300",
    91.           "text": "Beta"
    92.         },
    93.         {
    94.           "values": [77],
    95.           "background-color": "#ff6600",
    96.           "text": "Gamma"
    97.         },
    98.         {
    99.           "values": [65],
    100.           "background-color": "#ff9933",
    101.           "text": "Delta"
    102.         },
    103.         {
    104.           "values": [59],
    105.           "background-color": "#ffcc00",
    106.           "text": "Epsilon"
    107.         },
    108.         {
    109.           "values": [35],
    110.           "background-color": "#ace600",
    111.           "text": "Zeta"
    112.         },
    113.         {
    114.           "values": [34],
    115.           "background-color": "#88cc00",
    116.           "text": "Eta"
    117.         },
    118.         {
    119.           "values": [31],
    120.           "background-color": "#339933",
    121.           "text": "Theta"
    122.         },
    123.         {
    124.           "values": [16],
    125.           "background-color": "#66ccff",
    126.           "text": "Iota"
    127.         },
    128.         {
    129.           "values": [14],
    130.           "background-color": "#3399ff",
    131.           "text": "Kappa"
    132.         },
    133.         {
    134.           "values": [13],
    135.           "background-color": "#0066ff",
    136.           "text": "Lambda"
    137.         },
    138.         {
    139.           "values": [12],
    140.           "background-color": "#3333cc",
    141.           "text": "Mu"
    142.         },
    143.         {
    144.           "values": [11],
    145.           "background-color": "#6600ff",
    146.           "text": "Nu"
    147.         },
    148.         {
    149.           "values": [10],
    150.           "background-color": "#9933ff",
    151.           "text": "Xi"
    152.         },
    153.         {
    154.           "values": [9],
    155.           "background-color": "#9999ff",
    156.           "text": "Omicron"
    157.         }
    158.       ]
    159.     };
    160.  
    161.     zingchart.render({
    162.       id: 'myChart',
    163.       data: myConfig,
    164.       height: 400,
    165.       width: "100%"
    166.     });
    167.   </script>
    168. </body>
    169.  
    170. </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": "Animated Pie Chart"
    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.     "animation": {
    36.       "on-legend-toggle": true, //set to true to show animation and false to turn off
    37.       "effect": 5,
    38.       "method": 1,
    39.       "sequence": 1,
    40.       "speed": 1
    41.     },
    42.     "value-box": {
    43.       "text": "%v",
    44.       "font-size": 12,
    45.       "font-family": "Georgia",
    46.       "font-weight": "normal",
    47.       "placement": "out",
    48.       "font-color": "gray",
    49.     },
    50.     "tooltip": {
    51.       "text": "%t: %v (%npv%)",
    52.       "font-color": "black",
    53.       "font-family": "Georgia",
    54.       "text-alpha": 1,
    55.       "background-color": "white",
    56.       "alpha": 0.7,
    57.       "border-width": 1,
    58.       "border-color": "#cccccc",
    59.       "line-style": "dotted",
    60.       "border-radius": "10px",
    61.       "padding": "10%",
    62.       "placement": "node:center"
    63.     },
    64.     "border-width": 1,
    65.     "border-color": "#cccccc",
    66.     "line-style": "dotted"
    67.   },
    68.   "series": [{
    69.       "values": [234],
    70.       "background-color": "#cc0000",
    71.       "text": "Alpha"
    72.     },
    73.     {
    74.       "values": [121],
    75.       "background-color": "#ff3300",
    76.       "text": "Beta"
    77.     },
    78.     {
    79.       "values": [77],
    80.       "background-color": "#ff6600",
    81.       "text": "Gamma"
    82.     },
    83.     {
    84.       "values": [65],
    85.       "background-color": "#ff9933",
    86.       "text": "Delta"
    87.     },
    88.     {
    89.       "values": [59],
    90.       "background-color": "#ffcc00",
    91.       "text": "Epsilon"
    92.     },
    93.     {
    94.       "values": [35],
    95.       "background-color": "#ace600",
    96.       "text": "Zeta"
    97.     },
    98.     {
    99.       "values": [34],
    100.       "background-color": "#88cc00",
    101.       "text": "Eta"
    102.     },
    103.     {
    104.       "values": [31],
    105.       "background-color": "#339933",
    106.       "text": "Theta"
    107.     },
    108.     {
    109.       "values": [16],
    110.       "background-color": "#66ccff",
    111.       "text": "Iota"
    112.     },
    113.     {
    114.       "values": [14],
    115.       "background-color": "#3399ff",
    116.       "text": "Kappa"
    117.     },
    118.     {
    119.       "values": [13],
    120.       "background-color": "#0066ff",
    121.       "text": "Lambda"
    122.     },
    123.     {
    124.       "values": [12],
    125.       "background-color": "#3333cc",
    126.       "text": "Mu"
    127.     },
    128.     {
    129.       "values": [11],
    130.       "background-color": "#6600ff",
    131.       "text": "Nu"
    132.     },
    133.     {
    134.       "values": [10],
    135.       "background-color": "#9933ff",
    136.       "text": "Xi"
    137.     },
    138.     {
    139.       "values": [9],
    140.       "background-color": "#9999ff",
    141.       "text": "Omicron"
    142.     }
    143.   ]
    144. };
    145.  
    146. zingchart.render({
    147.   id: 'myChart',
    148.   data: myConfig,
    149.   height: 400,
    150.   width: "100%"
    151. });