• 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>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       min-height: 150px;
    20.     }
    21.  
    22.     .zc-ref {
    23.       display: none;
    24.     }
    25.   </style>
    26. </head>
    27.  
    28. <body>
    29.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    30.   <script>
    31.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    32.     zingchart.THEME = 'classic';
    33.  
    34.     let chartConfig = {
    35.       type: 'boxplot',
    36.       backgroundColor: '#DCE6F1',
    37.       title: {
    38.         text: 'Base Salary Comparison',
    39.         backgroundColor: 'none',
    40.         color: 'black',
    41.         fontSize: 24,
    42.         fontWeight: 'none',
    43.         offsetY: '36%'
    44.       },
    45.       plotarea: {
    46.         marginTop: '20%',
    47.         marginLeft: '25%',
    48.         marginRight: '12%'
    49.       },
    50.       plot: {
    51.         barWidth: 70,
    52.       },
    53.       tooltip: {
    54.         shadow: false,
    55.         borderRadius: 3,
    56.         rules: [{
    57.             rule: '%i == 0',
    58.             backgrounCcolor: '#9A8AAD'
    59.           },
    60.           {
    61.             rule: '%i == 1',
    62.             backgroundColor: '#AABD82'
    63.           }
    64.         ]
    65.       },
    66.       scaleX: {
    67.         offsetStart: 40,
    68.         offsetEnd: 40,
    69.         lineColor: 'none',
    70.         labels: ['Marketing', 'Research'],
    71.         tick: {
    72.           visible: false
    73.         },
    74.         item: {
    75.           fontSize: 14
    76.         },
    77.         guide: {
    78.           visible: false
    79.         }
    80.       },
    81.       scaleY: {
    82.         offsetStart: 20,
    83.         offsetEnd: 20,
    84.         values: '50:250:25',
    85.         format: '$%v K',
    86.         lineColor: '#7F7F7F',
    87.         tick: {
    88.           lineColor: '#7F7F7F'
    89.         },
    90.         guide: {
    91.           visible: false
    92.         }
    93.       },
    94.       options: {
    95.         box: {
    96.           borderColor: '#204A7B',
    97.           borderWidth: 2,
    98.  
    99.           rules: [{
    100.               rule: '%i == 0',
    101.               backgroundColor: '#9A8AAD'
    102.             },
    103.             {
    104.               rule: '%i == 1',
    105.               backgroundColor: '#AABD82'
    106.             }
    107.           ],
    108.  
    109.           hoverState: {
    110.             backgroundColor1: 'red'
    111.           },
    112.         },
    113.         lineMedianLevel: {
    114.           lineColor: '#FC0B1A',
    115.           lineWidth: 2
    116.         },
    117.         lineMinLevel: {
    118.           lineColor: '#204A7B',
    119.           lineWidth: 2
    120.         },
    121.         lineMinConnector: {
    122.           lineColor: '#204A7B',
    123.           lineWidth: 2
    124.         },
    125.         lineMaxLevel: {
    126.           lineColor: '#204A7B',
    127.           lineWidth: 2
    128.         },
    129.         lineMaxConnector: {
    130.           lineColor: '#204A7B',
    131.           lineWidth: 2
    132.         }
    133.       },
    134.       series: [{
    135.         dataBox: [
    136.           [75, 100, 150, 225, 250],
    137.           [50, 75, 100, 125, 175]
    138.         ]
    139.       }]
    140.     };
    141.  
    142.     zingchart.render({
    143.       id: 'myChart',
    144.       data: chartConfig,
    145.       width: '100%'
    146.     });
    147.   </script>
    148. </body>
    149.  
    150. </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'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   min-height: 150px;
    11. }
    12.  
    13. .zc-ref {
    14.   display: none;
    15. }
    1. zingchart.THEME = 'classic';
    2.  
    3. let chartConfig = {
    4.   type: 'boxplot',
    5.   backgroundColor: '#DCE6F1',
    6.   title: {
    7.     text: 'Base Salary Comparison',
    8.     backgroundColor: 'none',
    9.     color: 'black',
    10.     fontSize: 24,
    11.     fontWeight: 'none',
    12.     offsetY: '36%'
    13.   },
    14.   plotarea: {
    15.     marginTop: '20%',
    16.     marginLeft: '25%',
    17.     marginRight: '12%'
    18.   },
    19.   plot: {
    20.     barWidth: 70,
    21.   },
    22.   tooltip: {
    23.     shadow: false,
    24.     borderRadius: 3,
    25.     rules: [{
    26.         rule: '%i == 0',
    27.         backgrounCcolor: '#9A8AAD'
    28.       },
    29.       {
    30.         rule: '%i == 1',
    31.         backgroundColor: '#AABD82'
    32.       }
    33.     ]
    34.   },
    35.   scaleX: {
    36.     offsetStart: 40,
    37.     offsetEnd: 40,
    38.     lineColor: 'none',
    39.     labels: ['Marketing', 'Research'],
    40.     tick: {
    41.       visible: false
    42.     },
    43.     item: {
    44.       fontSize: 14
    45.     },
    46.     guide: {
    47.       visible: false
    48.     }
    49.   },
    50.   scaleY: {
    51.     offsetStart: 20,
    52.     offsetEnd: 20,
    53.     values: '50:250:25',
    54.     format: '$%v K',
    55.     lineColor: '#7F7F7F',
    56.     tick: {
    57.       lineColor: '#7F7F7F'
    58.     },
    59.     guide: {
    60.       visible: false
    61.     }
    62.   },
    63.   options: {
    64.     box: {
    65.       borderColor: '#204A7B',
    66.       borderWidth: 2,
    67.  
    68.       rules: [{
    69.           rule: '%i == 0',
    70.           backgroundColor: '#9A8AAD'
    71.         },
    72.         {
    73.           rule: '%i == 1',
    74.           backgroundColor: '#AABD82'
    75.         }
    76.       ],
    77.  
    78.       hoverState: {
    79.         backgroundColor1: 'red'
    80.       },
    81.     },
    82.     lineMedianLevel: {
    83.       lineColor: '#FC0B1A',
    84.       lineWidth: 2
    85.     },
    86.     lineMinLevel: {
    87.       lineColor: '#204A7B',
    88.       lineWidth: 2
    89.     },
    90.     lineMinConnector: {
    91.       lineColor: '#204A7B',
    92.       lineWidth: 2
    93.     },
    94.     lineMaxLevel: {
    95.       lineColor: '#204A7B',
    96.       lineWidth: 2
    97.     },
    98.     lineMaxConnector: {
    99.       lineColor: '#204A7B',
    100.       lineWidth: 2
    101.     }
    102.   },
    103.   series: [{
    104.     dataBox: [
    105.       [75, 100, 150, 225, 250],
    106.       [50, 75, 100, 125, 175]
    107.     ]
    108.   }]
    109. };
    110.  
    111. zingchart.render({
    112.   id: 'myChart',
    113.   data: chartConfig,
    114.   width: '100%'
    115. });