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