• 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.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     let chartConfig = {
    24.       type: 'boxplot',
    25.       plotarea: {
    26.         margin: '100'
    27.       },
    28.       scaleX: {
    29.         guide: {
    30.           visible: false
    31.         },
    32.         label: {
    33.           text: 'Experiment No.'
    34.         },
    35.         values: ['1', '2', '3', '4', '5'],
    36.         item: {
    37.           wrapText: true
    38.         }
    39.       },
    40.       scaleY: {
    41.         minValue: 'auto',
    42.         guide: {
    43.           lineStyle: 'solid'
    44.         },
    45.         label: {
    46.           text: 'Observations'
    47.         },
    48.         item: {
    49.           wrapText: true
    50.         }
    51.       },
    52.       tooltip: {
    53.         fontSize: 11,
    54.         align: 'left',
    55.         borderRadius: 7,
    56.         borderWidth: 1,
    57.         backgroundColor: '#fff',
    58.         alpha: 0.9,
    59.         padding: 10,
    60.         color: '#000'
    61.       },
    62.       plot: {},
    63.       options: {
    64.         box: {
    65.           barWidth: 0.5,
    66.           tooltip: {
    67.             text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color3\'>Observations:</b><br><br>Maximum: <b>%data-max</b><br>Upper Quartile: <b>%data-upper-quartile</b><br>Median: <b>%data-median</b><br>Lower Quartile: <b>%data-lower-quartile</b><br>Minimum: <b>%data-min</b>'
    68.           }
    69.         },
    70.         outlier: {
    71.           tooltip: {
    72.             text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color-7\'>Observation: %node-value</b>'
    73.           },
    74.           marker: {
    75.             type: 'circle',
    76.             backgroundColor: '#ff0'
    77.           }
    78.         },
    79.         lineMinLevel: {
    80.           lineColor: '#f00',
    81.           lineWidth: 2,
    82.         },
    83.         lineMaxLevel: {
    84.           lineColor: '#0f0',
    85.           lineWidth: 2,
    86.         },
    87.         lineMinConnector: {
    88.           lineWidth: 2,
    89.           lineColor: '#f00'
    90.         },
    91.         lineMaxConnector: {
    92.           lineColor: '#00f',
    93.           lineWidth: 4,
    94.         },
    95.         lineMedianLevel: {
    96.           alpha: 0.5
    97.         }
    98.       },
    99.       series: [{
    100.         dataBox: [
    101.           [760, 801, 848, 895, 965],
    102.           [733, 853, 939, 980, 1080],
    103.           [714, 762, 817, 870, 918],
    104.           [724, 802, 836, 871, 950],
    105.           [834, 856, 864, 882, 910]
    106.         ],
    107.         dataOutlier: [
    108.           [0, 644],
    109.           [1, 718],
    110.           [4, 951],
    111.           [3, 969],
    112.           [2, 944]
    113.         ]
    114.       }]
    115.     };
    116.  
    117.     zingchart.render({
    118.       id: 'myChart',
    119.       data: chartConfig,
    120.       height: '100%',
    121.       width: '100%'
    122.     });
    123.   </script>
    124. </body>
    125.  
    126. </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. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. let chartConfig = {
    2.   type: 'boxplot',
    3.   plotarea: {
    4.     margin: '100'
    5.   },
    6.   scaleX: {
    7.     guide: {
    8.       visible: false
    9.     },
    10.     label: {
    11.       text: 'Experiment No.'
    12.     },
    13.     values: ['1', '2', '3', '4', '5'],
    14.     item: {
    15.       wrapText: true
    16.     }
    17.   },
    18.   scaleY: {
    19.     minValue: 'auto',
    20.     guide: {
    21.       lineStyle: 'solid'
    22.     },
    23.     label: {
    24.       text: 'Observations'
    25.     },
    26.     item: {
    27.       wrapText: true
    28.     }
    29.   },
    30.   tooltip: {
    31.     fontSize: 11,
    32.     align: 'left',
    33.     borderRadius: 7,
    34.     borderWidth: 1,
    35.     backgroundColor: '#fff',
    36.     alpha: 0.9,
    37.     padding: 10,
    38.     color: '#000'
    39.   },
    40.   plot: {},
    41.   options: {
    42.     box: {
    43.       barWidth: 0.5,
    44.       tooltip: {
    45.         text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color3\'>Observations:</b><br><br>Maximum: <b>%data-max</b><br>Upper Quartile: <b>%data-upper-quartile</b><br>Median: <b>%data-median</b><br>Lower Quartile: <b>%data-lower-quartile</b><br>Minimum: <b>%data-min</b>'
    46.       }
    47.     },
    48.     outlier: {
    49.       tooltip: {
    50.         text: '<span style=\'font-style:italic;\'>Experiment no. %scale-key-text</span><br><b style=\'font-size:15px;color:%color-7\'>Observation: %node-value</b>'
    51.       },
    52.       marker: {
    53.         type: 'circle',
    54.         backgroundColor: '#ff0'
    55.       }
    56.     },
    57.     lineMinLevel: {
    58.       lineColor: '#f00',
    59.       lineWidth: 2,
    60.     },
    61.     lineMaxLevel: {
    62.       lineColor: '#0f0',
    63.       lineWidth: 2,
    64.     },
    65.     lineMinConnector: {
    66.       lineWidth: 2,
    67.       lineColor: '#f00'
    68.     },
    69.     lineMaxConnector: {
    70.       lineColor: '#00f',
    71.       lineWidth: 4,
    72.     },
    73.     lineMedianLevel: {
    74.       alpha: 0.5
    75.     }
    76.   },
    77.   series: [{
    78.     dataBox: [
    79.       [760, 801, 848, 895, 965],
    80.       [733, 853, 939, 980, 1080],
    81.       [714, 762, 817, 870, 918],
    82.       [724, 802, 836, 871, 950],
    83.       [834, 856, 864, 882, 910]
    84.     ],
    85.     dataOutlier: [
    86.       [0, 644],
    87.       [1, 718],
    88.       [4, 951],
    89.       [3, 969],
    90.       [2, 944]
    91.     ]
    92.   }]
    93. };
    94.  
    95. zingchart.render({
    96.   id: 'myChart',
    97.   data: chartConfig,
    98.   height: '100%',
    99.   width: '100%'
    100. });