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