• 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.     let chartConfig = {
    17.       type: 'pie',
    18.       title: {
    19.         text: 'Value Boxes'
    20.       },
    21.       subtitle: {
    22.         text: 'style connector lines',
    23.         fontWeight: 'normal'
    24.       },
    25.       plot: {
    26.         valueBox: {
    27.           text: '%v',
    28.           fontSize: 12,
    29.           fontFamily: 'Georgia',
    30.           fontWeight: 'normal',
    31.           connector: {
    32.             lineStyle: 'dashed',
    33.             lineSegmentSize: '5px'
    34.           },
    35.           rules: [{
    36.               rule: '%v > 50',
    37.               placement: 'in',
    38.               offsetR: '50%',
    39.               fontColor: 'white',
    40.             },
    41.             {
    42.               rule: '%v <= 50',
    43.               placement: 'out',
    44.               fontColor: 'gray',
    45.             }
    46.           ]
    47.         },
    48.         borderWidth: 1,
    49.         borderColor: '#cccccc',
    50.         lineStyle: 'dotted'
    51.       },
    52.       plotarea: {
    53.         marginTop: '12%'
    54.       },
    55.       series: [{
    56.           values: [234],
    57.           backgroundColor: '#cc0000',
    58.           text: 'Alpha'
    59.         },
    60.         {
    61.           values: [121],
    62.           backgroundColor: '#ff3300',
    63.           text: 'Beta'
    64.         },
    65.         {
    66.           values: [77],
    67.           backgroundColor: '#ff6600',
    68.           text: 'Gamma'
    69.         },
    70.         {
    71.           values: [65],
    72.           backgroundColor: '#ff9933',
    73.           text: 'Delta'
    74.         },
    75.         {
    76.           values: [59],
    77.           backgroundColor: '#ffcc00',
    78.           text: 'Epsilon'
    79.         },
    80.         {
    81.           values: [35],
    82.           backgroundColor: '#ace600',
    83.           text: 'Zeta'
    84.         },
    85.         {
    86.           values: [34],
    87.           backgroundColor: '#88cc00',
    88.           text: 'Eta'
    89.         },
    90.         {
    91.           values: [31],
    92.           backgroundColor: '#339933',
    93.           text: 'Theta'
    94.         },
    95.         {
    96.           values: [16],
    97.           backgroundColor: '#66ccff',
    98.           text: 'Iota'
    99.         },
    100.         {
    101.           values: [14],
    102.           backgroundColor: '#3399ff',
    103.           text: 'Kappa'
    104.         },
    105.         {
    106.           values: [13],
    107.           backgroundColor: '#0066ff',
    108.           text: 'Lambda'
    109.         },
    110.         {
    111.           values: [12],
    112.           backgroundColor: '#3333cc',
    113.           text: 'Mu'
    114.         },
    115.         {
    116.           values: [11],
    117.           backgroundColor: '#6600ff',
    118.           text: 'Nu'
    119.         },
    120.         {
    121.           values: [10],
    122.           backgroundColor: '#9933ff',
    123.           text: 'Xi'
    124.         },
    125.         {
    126.           values: [9],
    127.           backgroundColor: '#9999ff',
    128.           text: 'Omicron'
    129.         }
    130.       ]
    131.     };
    132.  
    133.     zingchart.render({
    134.       id: 'myChart',
    135.       data: chartConfig,
    136.       height: 400,
    137.       width: '100%'
    138.     });
    139.   </script>
    140. </body>
    141.  
    142. </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. let chartConfig = {
    2.   type: 'pie',
    3.   title: {
    4.     text: 'Value Boxes'
    5.   },
    6.   subtitle: {
    7.     text: 'style connector lines',
    8.     fontWeight: 'normal'
    9.   },
    10.   plot: {
    11.     valueBox: {
    12.       text: '%v',
    13.       fontSize: 12,
    14.       fontFamily: 'Georgia',
    15.       fontWeight: 'normal',
    16.       connector: {
    17.         lineStyle: 'dashed',
    18.         lineSegmentSize: '5px'
    19.       },
    20.       rules: [{
    21.           rule: '%v > 50',
    22.           placement: 'in',
    23.           offsetR: '50%',
    24.           fontColor: 'white',
    25.         },
    26.         {
    27.           rule: '%v <= 50',
    28.           placement: 'out',
    29.           fontColor: 'gray',
    30.         }
    31.       ]
    32.     },
    33.     borderWidth: 1,
    34.     borderColor: '#cccccc',
    35.     lineStyle: 'dotted'
    36.   },
    37.   plotarea: {
    38.     marginTop: '12%'
    39.   },
    40.   series: [{
    41.       values: [234],
    42.       backgroundColor: '#cc0000',
    43.       text: 'Alpha'
    44.     },
    45.     {
    46.       values: [121],
    47.       backgroundColor: '#ff3300',
    48.       text: 'Beta'
    49.     },
    50.     {
    51.       values: [77],
    52.       backgroundColor: '#ff6600',
    53.       text: 'Gamma'
    54.     },
    55.     {
    56.       values: [65],
    57.       backgroundColor: '#ff9933',
    58.       text: 'Delta'
    59.     },
    60.     {
    61.       values: [59],
    62.       backgroundColor: '#ffcc00',
    63.       text: 'Epsilon'
    64.     },
    65.     {
    66.       values: [35],
    67.       backgroundColor: '#ace600',
    68.       text: 'Zeta'
    69.     },
    70.     {
    71.       values: [34],
    72.       backgroundColor: '#88cc00',
    73.       text: 'Eta'
    74.     },
    75.     {
    76.       values: [31],
    77.       backgroundColor: '#339933',
    78.       text: 'Theta'
    79.     },
    80.     {
    81.       values: [16],
    82.       backgroundColor: '#66ccff',
    83.       text: 'Iota'
    84.     },
    85.     {
    86.       values: [14],
    87.       backgroundColor: '#3399ff',
    88.       text: 'Kappa'
    89.     },
    90.     {
    91.       values: [13],
    92.       backgroundColor: '#0066ff',
    93.       text: 'Lambda'
    94.     },
    95.     {
    96.       values: [12],
    97.       backgroundColor: '#3333cc',
    98.       text: 'Mu'
    99.     },
    100.     {
    101.       values: [11],
    102.       backgroundColor: '#6600ff',
    103.       text: 'Nu'
    104.     },
    105.     {
    106.       values: [10],
    107.       backgroundColor: '#9933ff',
    108.       text: 'Xi'
    109.     },
    110.     {
    111.       values: [9],
    112.       backgroundColor: '#9999ff',
    113.       text: 'Omicron'
    114.     }
    115.   ]
    116. };
    117.  
    118. zingchart.render({
    119.   id: 'myChart',
    120.   data: chartConfig,
    121.   height: 400,
    122.   width: '100%'
    123. });