• 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: {
              marker: {
                type: 'circle',
                backgroundColor: '#ff0',
                topState: {
                  backgroundColor: 'red',
                  offsetX: 10,
                  offsetY: 10,
                }
              },
              hoverMarker: {
                backgroundColor: 'red'
              },
              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>'
              },
            },
            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: {
          marker: {
            type: 'circle',
            backgroundColor: '#ff0',
            topState: {
              backgroundColor: 'red',
              offsetX: 10,
              offsetY: 10,
            }
          },
          hoverMarker: {
            backgroundColor: 'red'
          },
          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>'
          },
        },
        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%'
    });