• 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"];
    var myConfig = {
      "graphset": [{
        "type": "hboxplot",
        "plotarea": {
          "margin": "100"
        },
        "scaleX": {
          "guide": {
            "visible": false
          },
          "label": {
            "text": "Experiment No."
          },
          "values": ["1"]
        },
        "scaleY": {
          "label": {
            "text": "Observations"
          }
        },
        tooltip: {
          paddingBottom: 20
        },
        "options": {
          "box": {
            "barWidth": 0.5,
            "tooltip": {
              "text": "<span style=\"font-style:italic;\">Experiment no. %scale-key-text</span><br><b style=\"font-size:15px;\">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>"
            }
          },
          "outlier": {
            "tooltip": {
              "text": "<span style=\"font-style:italic;\">Experiment no. %scale-key-text</span><br><b style=\"font-size:15px;\">Observation: %node-value</b>"
            },
            "marker": {
              "type": "circle"
            }
          }
        },
        "series": [{
          "dataBox": [
            [30, 45, 50, 57, 70]
          ],
          "dataOutlier": [
            [1, 24]
          ]
        }]
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      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%;
}
    var myConfig = {
  "graphset": [{
    "type": "hboxplot",
    "plotarea": {
      "margin": "100"
    },
    "scaleX": {
      "guide": {
        "visible": false
      },
      "label": {
        "text": "Experiment No."
      },
      "values": ["1"]
    },
    "scaleY": {
      "label": {
        "text": "Observations"
      }
    },
    tooltip: {
      paddingBottom: 20
    },
    "options": {
      "box": {
        "barWidth": 0.5,
        "tooltip": {
          "text": "<span style=\"font-style:italic;\">Experiment no. %scale-key-text</span><br><b style=\"font-size:15px;\">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>"
        }
      },
      "outlier": {
        "tooltip": {
          "text": "<span style=\"font-style:italic;\">Experiment no. %scale-key-text</span><br><b style=\"font-size:15px;\">Observation: %node-value</b>"
        },
        "marker": {
          "type": "circle"
        }
      }
    },
    "series": [{
      "dataBox": [
        [30, 45, 50, 57, 70]
      ],
      "dataOutlier": [
        [1, 24]
      ]
    }]
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: "100%",
  width: "100%"
});