• 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.           "title": {
    20.             "text": "'size-factor'<br>attribute"
    21.           },
    22.           "scale": {
    23.             "size-factor": 0.2
    24.           },
    25.           "height": "100%",
    26.           "width": "40%",
    27.           "x": "0%",
    28.           "y": "0%",
    29.           "plot": {
    30.             "value-box": {
    31.               "placement": "out",
    32.               /*changed value-box placement to account for size*/
    33.               "font-family": "Georgia",
    34.               "font-size": 10,
    35.               "font-weight": "normal"
    36.             }
    37.           },
    38.           "series": [{
    39.               "values": [59]
    40.             },
    41.             {
    42.               "values": [55]
    43.             },
    44.             {
    45.               "values": [30]
    46.             },
    47.             {
    48.               "values": [28]
    49.             },
    50.             {
    51.               "values": [15]
    52.             }
    53.           ]
    54.         },
    55.         {
    56.           "type": "pie",
    57.           "scale": {
    58.             "size-factor": 1.01
    59.           },
    60.           "height": "100%",
    61.           "width": "60%",
    62.           "x": "40%",
    63.           "y": "0%",
    64.           "plot": {
    65.             "value-box": {
    66.               "font-family": "Georgia",
    67.               "font-size": 14,
    68.               "font-weight": "normal",
    69.               "offset-r": "35%"
    70.             }
    71.           },
    72.           "series": [{
    73.               "values": [59]
    74.             },
    75.             {
    76.               "values": [55]
    77.             },
    78.             {
    79.               "values": [30]
    80.             },
    81.             {
    82.               "values": [28]
    83.             },
    84.             {
    85.               "values": [15]
    86.             }
    87.           ]
    88.         }
    89.       ]
    90.     };
    91.  
    92.     zingchart.render({
    93.       id: 'myChart',
    94.       data: myConfig,
    95.       height: 400,
    96.       width: "100%"
    97.     });
    98.   </script>
    99. </body>
    100.  
    101. </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.       "title": {
    5.         "text": "'size-factor'<br>attribute"
    6.       },
    7.       "scale": {
    8.         "size-factor": 0.2
    9.       },
    10.       "height": "100%",
    11.       "width": "40%",
    12.       "x": "0%",
    13.       "y": "0%",
    14.       "plot": {
    15.         "value-box": {
    16.           "placement": "out",
    17.           /*changed value-box placement to account for size*/
    18.           "font-family": "Georgia",
    19.           "font-size": 10,
    20.           "font-weight": "normal"
    21.         }
    22.       },
    23.       "series": [{
    24.           "values": [59]
    25.         },
    26.         {
    27.           "values": [55]
    28.         },
    29.         {
    30.           "values": [30]
    31.         },
    32.         {
    33.           "values": [28]
    34.         },
    35.         {
    36.           "values": [15]
    37.         }
    38.       ]
    39.     },
    40.     {
    41.       "type": "pie",
    42.       "scale": {
    43.         "size-factor": 1.01
    44.       },
    45.       "height": "100%",
    46.       "width": "60%",
    47.       "x": "40%",
    48.       "y": "0%",
    49.       "plot": {
    50.         "value-box": {
    51.           "font-family": "Georgia",
    52.           "font-size": 14,
    53.           "font-weight": "normal",
    54.           "offset-r": "35%"
    55.         }
    56.       },
    57.       "series": [{
    58.           "values": [59]
    59.         },
    60.         {
    61.           "values": [55]
    62.         },
    63.         {
    64.           "values": [30]
    65.         },
    66.         {
    67.           "values": [28]
    68.         },
    69.         {
    70.           "values": [15]
    71.         }
    72.       ]
    73.     }
    74.   ]
    75. };
    76.  
    77. zingchart.render({
    78.   id: 'myChart',
    79.   data: myConfig,
    80.   height: 400,
    81.   width: "100%"
    82. });