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