<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  CanvasXpress.csv("https://canvasxpress.org/data/chickwts.csv", function(err, csv) {
    if (err) {
      alert(err);
      return;
    } else {
      var arr = csv.split("\n").map(function (line) {
        return line.split(",");
      });
      var data = {
        y: {
          smps: [],
          vars: ['weight'],
          data: [[]]
        },
        x: {
          'feed': []
        }
      }
      var config = {
        graphType: "Boxplot",
        groupingFactors: ["feed"],
        graphOrientation: "vertical",
        smpLabelRotate: 90
      }
      arr.shift();
      arr.pop();
      for (var i = 0; i < arr.length; i++) {
        data.y.smps.push('Id' + arr[i][0].replace(/"/g, ''));
        data.y.data[0].push(Number(arr[i][1]));
        data.x.feed.push(arr[i][2].replace(/"/g, ''));
      }
      var c = new CanvasXpress("remotegraphs8", data, config);
    }
  });

</script>