• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body,
        #myChart {
          height: 100%;
          width: 100%;
        }
      </style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartConfig = {
          type: 'boxplot',
          options: {
            outlier: {
              tooltip: {
                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>',
                backgroundColor: '#f90',
                borderColor: '#f60',
                borderRadius: -5,
                borderWidth: 2,
                callout: true,
                calloutHeight: 20,
                calloutPosition: 'bottom',
                calloutWidth: 0,
                padding: 10,
                shadow: true,
                calloutTip: {
                  type: 'circle',
                  backgroundColor: '#fff',
                  borderWidth: 2,
                  borderColor: '#f60',
                  size: 5,
                  offsetY: 0,
                }
              },
              marker: {
                type: 'circle',
                backgroundColor: '#ff0'
              },
              hoverMarker: {
                backgroundColor: 'red'
              },
            },
            box: {
              barWidth: 0.5,
              tooltip: {
                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>'
              }
            },
            lineMinLevel: {
              lineColor: '#f00',
              lineWidth: 2,
            },
            lineMaxLevel: {
              lineColor: '#0f0',
              lineWidth: 2,
            },
            lineMinConnector: {
              lineWidth: 2,
              lineColor: '#f00'
            },
            lineMaxConnector: {
              lineColor: '#00f',
              lineWidth: 4,
            },
            lineMedianLevel: {
              alpha: 0.5
            }
          },
          plotarea: {
            margin: '100'
          },
          scaleX: {
            guide: {
              visible: false
            },
            label: {
              text: 'Experiment No.'
            },
            values: ['1', '2', '3', '4', '5'],
            item: {
              wrapText: true
            }
          },
          scaleY: {
            minValue: 'auto',
            guide: {
              lineStyle: 'solid'
            },
            label: {
              text: 'Observations'
            },
            item: {
              wrapText: true
            }
          },
          tooltip: {
            fontSize: 11,
            align: 'left',
            borderRadius: 7,
            borderWidth: 1,
            backgroundColor: '#fff',
            alpha: 0.9,
            padding: 10,
            color: '#000'
          },
          plot: {},
          series: [{
            dataBox: [
              [760, 801, 848, 895, 965],
              [733, 853, 939, 980, 1080],
              [714, 762, 817, 870, 918],
              [724, 802, 836, 871, 950],
              [834, 856, 864, 882, 910]
            ],
            dataOutlier: [
              [0, 644],
              [1, 718],
              [4, 951],
              [3, 969],
              [2, 944]
            ]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%'
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    html,
    body,
    #myChart {
      height: 100%;
      width: 100%;
    }
    let chartConfig = {
      type: 'boxplot',
      options: {
        outlier: {
          tooltip: {
            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>',
            backgroundColor: '#f90',
            borderColor: '#f60',
            borderRadius: -5,
            borderWidth: 2,
            callout: true,
            calloutHeight: 20,
            calloutPosition: 'bottom',
            calloutWidth: 0,
            padding: 10,
            shadow: true,
            calloutTip: {
              type: 'circle',
              backgroundColor: '#fff',
              borderWidth: 2,
              borderColor: '#f60',
              size: 5,
              offsetY: 0,
            }
          },
          marker: {
            type: 'circle',
            backgroundColor: '#ff0'
          },
          hoverMarker: {
            backgroundColor: 'red'
          },
        },
        box: {
          barWidth: 0.5,
          tooltip: {
            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>'
          }
        },
        lineMinLevel: {
          lineColor: '#f00',
          lineWidth: 2,
        },
        lineMaxLevel: {
          lineColor: '#0f0',
          lineWidth: 2,
        },
        lineMinConnector: {
          lineWidth: 2,
          lineColor: '#f00'
        },
        lineMaxConnector: {
          lineColor: '#00f',
          lineWidth: 4,
        },
        lineMedianLevel: {
          alpha: 0.5
        }
      },
      plotarea: {
        margin: '100'
      },
      scaleX: {
        guide: {
          visible: false
        },
        label: {
          text: 'Experiment No.'
        },
        values: ['1', '2', '3', '4', '5'],
        item: {
          wrapText: true
        }
      },
      scaleY: {
        minValue: 'auto',
        guide: {
          lineStyle: 'solid'
        },
        label: {
          text: 'Observations'
        },
        item: {
          wrapText: true
        }
      },
      tooltip: {
        fontSize: 11,
        align: 'left',
        borderRadius: 7,
        borderWidth: 1,
        backgroundColor: '#fff',
        alpha: 0.9,
        padding: 10,
        color: '#000'
      },
      plot: {},
      series: [{
        dataBox: [
          [760, 801, 848, 895, 965],
          [733, 853, 939, 980, 1080],
          [714, 762, 817, 870, 918],
          [724, 802, 836, 871, 950],
          [834, 856, 864, 882, 910]
        ],
        dataOutlier: [
          [0, 644],
          [1, 718],
          [4, 951],
          [3, 969],
          [2, 944]
        ]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%'
    });