• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    8.   <script nonce="undefined" src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
    9.   <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    10.  
    11.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12.   <style>
    13.     .container {
    14.       width: 400px;
    15.       height: 200px;
    16.       min-width: 400px;
    17.       border: 1px dashed #777;
    18.     }
    19.  
    20.     #myChart {
    21.       width: 100%;
    22.       height: 100%;
    23.     }
    24.   </style>
    25. </head>
    26.  
    27. <body>
    28.   <div class='container'>
    29.     <div id='myChart'></div>
    30.   </div>
    31.   <script>
    32.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    33.     let chartConfig = {
    34.       type: 'pie',
    35.       legend: {
    36.         align: 'right',
    37.         verticalAlign: 'middle',
    38.         toggleAction: 'remove',
    39.         maxItems: 8,
    40.         overflow: 'scroll',
    41.         scroll: {
    42.           bar: {
    43.             backgroundColor: '#bbff33 #99e600',
    44.             borderLeft: '1px solid #88cc00'
    45.           },
    46.           handle: {
    47.             backgroundColor: '#66cc66',
    48.             borderLeft: '1px solid #339933',
    49.             borderRight: '1px solid #339933',
    50.             borderTop: '1px solid #339933',
    51.             borderBottom: '1px solid #339933',
    52.             borderRadius: '2px'
    53.           }
    54.         },
    55.         borderWidth: 1,
    56.         borderColor: '#88cc00',
    57.         borderRadius: '3px',
    58.         marker: {
    59.           type: 'circle'
    60.         },
    61.         mediaRules: [{
    62.             maxWidth: 500,
    63.             item: {
    64.               fontSize: 10
    65.             },
    66.             scroll: {
    67.               bar: {
    68.                 backgroundColor: '#e6f0ff #99c2ff',
    69.                 borderLeft: '1px solid #0066ff'
    70.               },
    71.               handle: {
    72.                 backgroundColor: '#99ccff',
    73.                 borderLeft: '1px solid #3399ff',
    74.                 borderRight: '1px solid #3399ff',
    75.                 borderTop: '1px solid #3399ff',
    76.                 borderBottom: '1px solid #3399ff',
    77.                 borderRadius: '2px'
    78.               }
    79.             },
    80.             borderColor: '#0066ff',
    81.             marker: {
    82.               size: 4
    83.             }
    84.           },
    85.           {
    86.             maxWidth: 300,
    87.             maxItems: 6,
    88.             item: {
    89.               fontSize: 9,
    90.               margin: 1
    91.             },
    92.             scroll: {
    93.               bar: {
    94.                 width: '50%',
    95.                 backgroundColor: '#e6e6ff #b3b3ff',
    96.                 borderLeft: '1px solid #9999ff'
    97.               },
    98.               handle: {
    99.                 width: '50%',
    100.                 backgroundColor: '#cc99ff',
    101.                 borderLeft: '1px solid #9933ff',
    102.                 borderRight: '1px solid #9933ff',
    103.                 borderTop: '1px solid #9933ff',
    104.                 borderBottom: '1px solid #9933ff',
    105.                 borderRadius: '2px'
    106.               }
    107.             },
    108.             borderColor: '#9999ff',
    109.             marker: {
    110.               size: 3
    111.             }
    112.           }
    113.         ]
    114.       },
    115.       plotarea: {
    116.         adjustLayout: true
    117.       },
    118.       plot: {
    119.         tooltip: {
    120.           text: '%t: %v (%npv%)',
    121.           borderRadius: '2px'
    122.         },
    123.         valueBox: {
    124.           visible: false
    125.         }
    126.       },
    127.       series: [{
    128.           values: [234],
    129.           backgroundColor: '#cc0000',
    130.           text: 'Alpha'
    131.         },
    132.         {
    133.           values: [121],
    134.           backgroundColor: '#ff3300',
    135.           text: 'Beta'
    136.         },
    137.         {
    138.           values: [77],
    139.           backgroundColor: '#ff6600',
    140.           text: 'Gamma'
    141.         },
    142.         {
    143.           values: [65],
    144.           backgroundColor: '#ff9933',
    145.           text: 'Delta'
    146.         },
    147.         {
    148.           values: [59],
    149.           backgroundColor: '#ffcc00',
    150.           text: 'Epsilon'
    151.         },
    152.         {
    153.           values: [35],
    154.           backgroundColor: '#ace600',
    155.           text: 'Zeta'
    156.         },
    157.         {
    158.           values: [34],
    159.           backgroundColor: '#88cc00',
    160.           text: 'Eta'
    161.         },
    162.         {
    163.           values: [31],
    164.           backgroundColor: '#339933',
    165.           text: 'Theta'
    166.         },
    167.         {
    168.           values: [16],
    169.           backgroundColor: '#66ccff',
    170.           text: 'Iota'
    171.         },
    172.         {
    173.           values: [14],
    174.           backgroundColor: '#3399ff',
    175.           text: 'Kappa'
    176.         },
    177.         {
    178.           values: [13],
    179.           backgroundColor: '#0066ff',
    180.           text: 'Lambda'
    181.         },
    182.         {
    183.           values: [12],
    184.           backgroundColor: '#3333cc',
    185.           text: 'Mu'
    186.         },
    187.         {
    188.           values: [11],
    189.           backgroundColor: '#6600ff',
    190.           text: 'Nu'
    191.         },
    192.         {
    193.           values: [10],
    194.           backgroundColor: '#9933ff',
    195.           text: 'Xi'
    196.         },
    197.         {
    198.           values: [9],
    199.           backgroundColor: '#9999ff',
    200.           text: 'Omicron'
    201.         }
    202.       ]
    203.     };
    204.  
    205.     // adjust the refresh rate of the chart
    206.     zingchart.DEV.RESIZESPEED = 50;
    207.     zingchart.DEV.DEBOUNCESPEED = 50;
    208.  
    209.     zingchart.render({
    210.       id: 'myChart',
    211.       data: chartConfig,
    212.       height: '100%',
    213.       width: '100%'
    214.     });
    215.  
    216.     // initiate jquery resizable container for demo purposes
    217.     $('.container').resizable();
    218.   </script>
    219. </body>
    220.  
    221. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    8.   <script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
    9.   <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    10.  
    11.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.   <div class='container'>
    16.     <div id='myChart'></div>
    17.   </div>
    18. </body>
    19.  
    20. </html>
    1. .container {
    2.   width: 400px;
    3.   height: 200px;
    4.   min-width: 400px;
    5.   border: 1px dashed #777;
    6. }
    7.  
    8. #myChart {
    9.   width: 100%;
    10.   height: 100%;
    11. }
    1. let chartConfig = {
    2.   type: 'pie',
    3.   legend: {
    4.     align: 'right',
    5.     verticalAlign: 'middle',
    6.     toggleAction: 'remove',
    7.     maxItems: 8,
    8.     overflow: 'scroll',
    9.     scroll: {
    10.       bar: {
    11.         backgroundColor: '#bbff33 #99e600',
    12.         borderLeft: '1px solid #88cc00'
    13.       },
    14.       handle: {
    15.         backgroundColor: '#66cc66',
    16.         borderLeft: '1px solid #339933',
    17.         borderRight: '1px solid #339933',
    18.         borderTop: '1px solid #339933',
    19.         borderBottom: '1px solid #339933',
    20.         borderRadius: '2px'
    21.       }
    22.     },
    23.     borderWidth: 1,
    24.     borderColor: '#88cc00',
    25.     borderRadius: '3px',
    26.     marker: {
    27.       type: 'circle'
    28.     },
    29.     mediaRules: [{
    30.         maxWidth: 500,
    31.         item: {
    32.           fontSize: 10
    33.         },
    34.         scroll: {
    35.           bar: {
    36.             backgroundColor: '#e6f0ff #99c2ff',
    37.             borderLeft: '1px solid #0066ff'
    38.           },
    39.           handle: {
    40.             backgroundColor: '#99ccff',
    41.             borderLeft: '1px solid #3399ff',
    42.             borderRight: '1px solid #3399ff',
    43.             borderTop: '1px solid #3399ff',
    44.             borderBottom: '1px solid #3399ff',
    45.             borderRadius: '2px'
    46.           }
    47.         },
    48.         borderColor: '#0066ff',
    49.         marker: {
    50.           size: 4
    51.         }
    52.       },
    53.       {
    54.         maxWidth: 300,
    55.         maxItems: 6,
    56.         item: {
    57.           fontSize: 9,
    58.           margin: 1
    59.         },
    60.         scroll: {
    61.           bar: {
    62.             width: '50%',
    63.             backgroundColor: '#e6e6ff #b3b3ff',
    64.             borderLeft: '1px solid #9999ff'
    65.           },
    66.           handle: {
    67.             width: '50%',
    68.             backgroundColor: '#cc99ff',
    69.             borderLeft: '1px solid #9933ff',
    70.             borderRight: '1px solid #9933ff',
    71.             borderTop: '1px solid #9933ff',
    72.             borderBottom: '1px solid #9933ff',
    73.             borderRadius: '2px'
    74.           }
    75.         },
    76.         borderColor: '#9999ff',
    77.         marker: {
    78.           size: 3
    79.         }
    80.       }
    81.     ]
    82.   },
    83.   plotarea: {
    84.     adjustLayout: true
    85.   },
    86.   plot: {
    87.     tooltip: {
    88.       text: '%t: %v (%npv%)',
    89.       borderRadius: '2px'
    90.     },
    91.     valueBox: {
    92.       visible: false
    93.     }
    94.   },
    95.   series: [{
    96.       values: [234],
    97.       backgroundColor: '#cc0000',
    98.       text: 'Alpha'
    99.     },
    100.     {
    101.       values: [121],
    102.       backgroundColor: '#ff3300',
    103.       text: 'Beta'
    104.     },
    105.     {
    106.       values: [77],
    107.       backgroundColor: '#ff6600',
    108.       text: 'Gamma'
    109.     },
    110.     {
    111.       values: [65],
    112.       backgroundColor: '#ff9933',
    113.       text: 'Delta'
    114.     },
    115.     {
    116.       values: [59],
    117.       backgroundColor: '#ffcc00',
    118.       text: 'Epsilon'
    119.     },
    120.     {
    121.       values: [35],
    122.       backgroundColor: '#ace600',
    123.       text: 'Zeta'
    124.     },
    125.     {
    126.       values: [34],
    127.       backgroundColor: '#88cc00',
    128.       text: 'Eta'
    129.     },
    130.     {
    131.       values: [31],
    132.       backgroundColor: '#339933',
    133.       text: 'Theta'
    134.     },
    135.     {
    136.       values: [16],
    137.       backgroundColor: '#66ccff',
    138.       text: 'Iota'
    139.     },
    140.     {
    141.       values: [14],
    142.       backgroundColor: '#3399ff',
    143.       text: 'Kappa'
    144.     },
    145.     {
    146.       values: [13],
    147.       backgroundColor: '#0066ff',
    148.       text: 'Lambda'
    149.     },
    150.     {
    151.       values: [12],
    152.       backgroundColor: '#3333cc',
    153.       text: 'Mu'
    154.     },
    155.     {
    156.       values: [11],
    157.       backgroundColor: '#6600ff',
    158.       text: 'Nu'
    159.     },
    160.     {
    161.       values: [10],
    162.       backgroundColor: '#9933ff',
    163.       text: 'Xi'
    164.     },
    165.     {
    166.       values: [9],
    167.       backgroundColor: '#9999ff',
    168.       text: 'Omicron'
    169.     }
    170.   ]
    171. };
    172.  
    173. // adjust the refresh rate of the chart
    174. zingchart.DEV.RESIZESPEED = 50;
    175. zingchart.DEV.DEBOUNCESPEED = 50;
    176.  
    177. zingchart.render({
    178.   id: 'myChart',
    179.   data: chartConfig,
    180.   height: '100%',
    181.   width: '100%'
    182. });
    183.  
    184. // initiate jquery resizable container for demo purposes
    185. $('.container').resizable();