• 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.         "type": "pie",
    19.         "plotarea": {
    20.           "margin": "40"
    21.         },
    22.         "scale": {
    23.           "sizeFactor": 1
    24.         },
    25.         "plot": {
    26.           "valueBox": {
    27.             "visible": false
    28.           },
    29.           "refAngle": 270,
    30.           "angleStart": 270,
    31.           "detach": false,
    32.           "slice": "100%",
    33.           "totals": [100],
    34.           "animation": {
    35.             "speed": 1000,
    36.             "effect": 2,
    37.             "method": 0
    38.           },
    39.           "hoverState": {
    40.             "visible": false
    41.           }
    42.         },
    43.         "series": [{
    44.             "size": "100%",
    45.             "values": [34],
    46.             "backgroundColor": "#ff9900",
    47.             "borderWidth": 37,
    48.             "borderColor": "#ff9900",
    49.             "angleStart": 270,
    50.             "-angleEnd": 130,
    51.             "text": "Move"
    52.           },
    53.           {
    54.             "size": "75%",
    55.             "values": [76],
    56.             "backgroundColor": "#9933cc",
    57.             "borderWidth": 37,
    58.             "borderColor": "#9933cc",
    59.             "-angleStart": 270,
    60.             "-angleEnd": 110,
    61.             "text": "Exercise"
    62.           },
    63.           {
    64.             "size": "50%",
    65.             "values": [55],
    66.             "backgroundColor": "#66dd33",
    67.             "borderWidth": 37,
    68.             "borderColor": "#66dd33",
    69.             "-angleStart": 270,
    70.             "-angleEnd": 220,
    71.             "text": "Stand"
    72.           }
    73.         ],
    74.         "tooltip": {
    75.           "x": 200,
    76.           "y": 190,
    77.           "width": 120,
    78.           "fontSize": 19,
    79.           "padding": 30,
    80.           "anchor": "c",
    81.           "fontFamily": "Lucida Sans Unicode",
    82.           "text": "%plot-text<br><span style='font-size:31px;font-weight:bold;color:%color;'>%node-percent-value%</span>",
    83.           "color": "#333",
    84.           "align": "left",
    85.           "borderWidth": 0,
    86.           "backgroundColor": "none"
    87.         },
    88.         "shapes": [{
    89.             "type": "pie",
    90.             "flat": true,
    91.             "x": 200,
    92.             "y": 200,
    93.             "backgroundColor": "#ff9900",
    94.             "alpha": 0.25,
    95.             "size": 180,
    96.             "slice": 140,
    97.             "placement": "bottom"
    98.           },
    99.           {
    100.             "type": "pie",
    101.             "flat": true,
    102.             "x": 200,
    103.             "y": 200,
    104.             "backgroundColor": "#9933cc",
    105.             "alpha": 0.25,
    106.             "size": 140,
    107.             "slice": 100,
    108.             "placement": "bottom"
    109.           },
    110.           {
    111.             "type": "pie",
    112.             "flat": true,
    113.             "x": 200,
    114.             "y": 200,
    115.             "backgroundColor": "#66dd33",
    116.             "alpha": 0.25,
    117.             "size": 100,
    118.             "slice": 60,
    119.             "placement": "bottom"
    120.           },
    121.           {
    122.             "type": "line",
    123.             "lineWidth": 3,
    124.             "lineCap": "round",
    125.             "lineColor": "#000",
    126.             "points": [
    127.               [0, 0],
    128.               [22, 0],
    129.               null,
    130.               [10, -10],
    131.               [22, 0],
    132.               [10, 10]
    133.             ],
    134.             "offsetX": 190,
    135.             "offsetY": 42
    136.           },
    137.           {
    138.             "type": "line",
    139.             "lineWidth": 3,
    140.             "lineCap": "round",
    141.             "lineColor": "#000",
    142.             "points": [
    143.               [0, 0],
    144.               [22, 0],
    145.               null,
    146.               [10, -10],
    147.               [22, 0],
    148.               [10, 10],
    149.               null,
    150.               [20, -10],
    151.               [32, 0],
    152.               [20, 10]
    153.             ],
    154.             "offsetX": 190,
    155.             "offsetY": 80
    156.           },
    157.           {
    158.             "type": "line",
    159.             "lineWidth": 3,
    160.             "lineCap": "round",
    161.             "lineColor": "#000",
    162.             "points": [
    163.               [0, 0],
    164.               [0, 22],
    165.               null,
    166.               [-10, 12],
    167.               [0, 0],
    168.               [10, 12]
    169.             ],
    170.             "offsetX": 200,
    171.             "offsetY": 110
    172.           }
    173.         ]
    174.       }]
    175.     };
    176.  
    177.     zingchart.render({
    178.       id: 'myChart',
    179.       data: myConfig,
    180.       height: 400,
    181.       width: 400
    182.     });
    183.   </script>
    184. </body>
    185.  
    186. </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.     "type": "pie",
    4.     "plotarea": {
    5.       "margin": "40"
    6.     },
    7.     "scale": {
    8.       "sizeFactor": 1
    9.     },
    10.     "plot": {
    11.       "valueBox": {
    12.         "visible": false
    13.       },
    14.       "refAngle": 270,
    15.       "angleStart": 270,
    16.       "detach": false,
    17.       "slice": "100%",
    18.       "totals": [100],
    19.       "animation": {
    20.         "speed": 1000,
    21.         "effect": 2,
    22.         "method": 0
    23.       },
    24.       "hoverState": {
    25.         "visible": false
    26.       }
    27.     },
    28.     "series": [{
    29.         "size": "100%",
    30.         "values": [34],
    31.         "backgroundColor": "#ff9900",
    32.         "borderWidth": 37,
    33.         "borderColor": "#ff9900",
    34.         "angleStart": 270,
    35.         "-angleEnd": 130,
    36.         "text": "Move"
    37.       },
    38.       {
    39.         "size": "75%",
    40.         "values": [76],
    41.         "backgroundColor": "#9933cc",
    42.         "borderWidth": 37,
    43.         "borderColor": "#9933cc",
    44.         "-angleStart": 270,
    45.         "-angleEnd": 110,
    46.         "text": "Exercise"
    47.       },
    48.       {
    49.         "size": "50%",
    50.         "values": [55],
    51.         "backgroundColor": "#66dd33",
    52.         "borderWidth": 37,
    53.         "borderColor": "#66dd33",
    54.         "-angleStart": 270,
    55.         "-angleEnd": 220,
    56.         "text": "Stand"
    57.       }
    58.     ],
    59.     "tooltip": {
    60.       "x": 200,
    61.       "y": 190,
    62.       "width": 120,
    63.       "fontSize": 19,
    64.       "padding": 30,
    65.       "anchor": "c",
    66.       "fontFamily": "Lucida Sans Unicode",
    67.       "text": "%plot-text<br><span style='font-size:31px;font-weight:bold;color:%color;'>%node-percent-value%</span>",
    68.       "color": "#333",
    69.       "align": "left",
    70.       "borderWidth": 0,
    71.       "backgroundColor": "none"
    72.     },
    73.     "shapes": [{
    74.         "type": "pie",
    75.         "flat": true,
    76.         "x": 200,
    77.         "y": 200,
    78.         "backgroundColor": "#ff9900",
    79.         "alpha": 0.25,
    80.         "size": 180,
    81.         "slice": 140,
    82.         "placement": "bottom"
    83.       },
    84.       {
    85.         "type": "pie",
    86.         "flat": true,
    87.         "x": 200,
    88.         "y": 200,
    89.         "backgroundColor": "#9933cc",
    90.         "alpha": 0.25,
    91.         "size": 140,
    92.         "slice": 100,
    93.         "placement": "bottom"
    94.       },
    95.       {
    96.         "type": "pie",
    97.         "flat": true,
    98.         "x": 200,
    99.         "y": 200,
    100.         "backgroundColor": "#66dd33",
    101.         "alpha": 0.25,
    102.         "size": 100,
    103.         "slice": 60,
    104.         "placement": "bottom"
    105.       },
    106.       {
    107.         "type": "line",
    108.         "lineWidth": 3,
    109.         "lineCap": "round",
    110.         "lineColor": "#000",
    111.         "points": [
    112.           [0, 0],
    113.           [22, 0],
    114.           null,
    115.           [10, -10],
    116.           [22, 0],
    117.           [10, 10]
    118.         ],
    119.         "offsetX": 190,
    120.         "offsetY": 42
    121.       },
    122.       {
    123.         "type": "line",
    124.         "lineWidth": 3,
    125.         "lineCap": "round",
    126.         "lineColor": "#000",
    127.         "points": [
    128.           [0, 0],
    129.           [22, 0],
    130.           null,
    131.           [10, -10],
    132.           [22, 0],
    133.           [10, 10],
    134.           null,
    135.           [20, -10],
    136.           [32, 0],
    137.           [20, 10]
    138.         ],
    139.         "offsetX": 190,
    140.         "offsetY": 80
    141.       },
    142.       {
    143.         "type": "line",
    144.         "lineWidth": 3,
    145.         "lineCap": "round",
    146.         "lineColor": "#000",
    147.         "points": [
    148.           [0, 0],
    149.           [0, 22],
    150.           null,
    151.           [-10, 12],
    152.           [0, 0],
    153.           [10, 12]
    154.         ],
    155.         "offsetX": 200,
    156.         "offsetY": 110
    157.       }
    158.     ]
    159.   }]
    160. };
    161.  
    162. zingchart.render({
    163.   id: 'myChart',
    164.   data: myConfig,
    165.   height: 400,
    166.   width: 400
    167. });