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