• 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.         hoverState: {
    53.           visible: false,
    54.         }
    55.       },
    56.       tooltip: {
    57.         shadow: false,
    58.         borderRadius: 3,
    59.         rules: [{
    60.             rule: '%i == 0',
    61.             backgrounCcolor: '#9A8AAD'
    62.           },
    63.           {
    64.             rule: '%i == 1',
    65.             backgroundColor: '#AABD82'
    66.           }
    67.         ]
    68.       },
    69.       scaleX: {
    70.         offsetStart: 40,
    71.         offsetEnd: 40,
    72.         lineColor: 'none',
    73.         labels: ['Marketing', 'Research'],
    74.         tick: {
    75.           visible: false
    76.         },
    77.         item: {
    78.           fontSize: 14
    79.         },
    80.         guide: {
    81.           visible: false
    82.         }
    83.       },
    84.       scaleY: {
    85.         offsetStart: 20,
    86.         offsetEnd: 20,
    87.         values: '50:250:25',
    88.         format: '$%v K',
    89.         lineColor: '#7F7F7F',
    90.         tick: {
    91.           lineColor: '#7F7F7F'
    92.         },
    93.         guide: {
    94.           visible: false
    95.         }
    96.       },
    97.       options: {
    98.         box: {
    99.           borderColor: '#204A7B',
    100.           borderWidth: 2,
    101.  
    102.           rules: [{
    103.               rule: '%i == 0',
    104.               backgroundColor: '#9A8AAD'
    105.             },
    106.             {
    107.               rule: '%i == 1',
    108.               backgroundColor: '#AABD82'
    109.             }
    110.           ],
    111.         },
    112.         lineMedianLevel: {
    113.           lineColor: '#FC0B1A',
    114.           lineWidth: 2
    115.         },
    116.         lineMinLevel: {
    117.           lineColor: '#204A7B',
    118.           lineWidth: 2
    119.         },
    120.         lineMinConnector: {
    121.           lineColor: '#204A7B',
    122.           lineWidth: 2
    123.         },
    124.         lineMaxLevel: {
    125.           lineColor: '#204A7B',
    126.           lineWidth: 2
    127.         },
    128.         lineMaxConnector: {
    129.           lineColor: '#204A7B',
    130.           lineWidth: 2
    131.         }
    132.       },
    133.       series: [{
    134.         dataBox: [
    135.           [75, 100, 150, 225, 250],
    136.           [50, 75, 100, 125, 175]
    137.         ]
    138.       }]
    139.     };
    140.  
    141.     zingchart.render({
    142.       id: 'myChart',
    143.       data: chartConfig,
    144.       width: '100%'
    145.     });
    146.   </script>
    147. </body>
    148.  
    149. </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.     hoverState: {
    22.       visible: false,
    23.     }
    24.   },
    25.   tooltip: {
    26.     shadow: false,
    27.     borderRadius: 3,
    28.     rules: [{
    29.         rule: '%i == 0',
    30.         backgrounCcolor: '#9A8AAD'
    31.       },
    32.       {
    33.         rule: '%i == 1',
    34.         backgroundColor: '#AABD82'
    35.       }
    36.     ]
    37.   },
    38.   scaleX: {
    39.     offsetStart: 40,
    40.     offsetEnd: 40,
    41.     lineColor: 'none',
    42.     labels: ['Marketing', 'Research'],
    43.     tick: {
    44.       visible: false
    45.     },
    46.     item: {
    47.       fontSize: 14
    48.     },
    49.     guide: {
    50.       visible: false
    51.     }
    52.   },
    53.   scaleY: {
    54.     offsetStart: 20,
    55.     offsetEnd: 20,
    56.     values: '50:250:25',
    57.     format: '$%v K',
    58.     lineColor: '#7F7F7F',
    59.     tick: {
    60.       lineColor: '#7F7F7F'
    61.     },
    62.     guide: {
    63.       visible: false
    64.     }
    65.   },
    66.   options: {
    67.     box: {
    68.       borderColor: '#204A7B',
    69.       borderWidth: 2,
    70.  
    71.       rules: [{
    72.           rule: '%i == 0',
    73.           backgroundColor: '#9A8AAD'
    74.         },
    75.         {
    76.           rule: '%i == 1',
    77.           backgroundColor: '#AABD82'
    78.         }
    79.       ],
    80.     },
    81.     lineMedianLevel: {
    82.       lineColor: '#FC0B1A',
    83.       lineWidth: 2
    84.     },
    85.     lineMinLevel: {
    86.       lineColor: '#204A7B',
    87.       lineWidth: 2
    88.     },
    89.     lineMinConnector: {
    90.       lineColor: '#204A7B',
    91.       lineWidth: 2
    92.     },
    93.     lineMaxLevel: {
    94.       lineColor: '#204A7B',
    95.       lineWidth: 2
    96.     },
    97.     lineMaxConnector: {
    98.       lineColor: '#204A7B',
    99.       lineWidth: 2
    100.     }
    101.   },
    102.   series: [{
    103.     dataBox: [
    104.       [75, 100, 150, 225, 250],
    105.       [50, 75, 100, 125, 175]
    106.     ]
    107.   }]
    108. };
    109.  
    110. zingchart.render({
    111.   id: 'myChart',
    112.   data: chartConfig,
    113.   width: '100%'
    114. });