<!-- 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.json("https://canvasxpress.org/data/dsmall.json", function(err, json) {
    if (err) {
      alert(err);
      return;
    } else {
      var data = {
        y: {
          smps: ['carat', 'depth', 'table', 'price', 'x', 'y', 'z'],
          vars: [],
          data: []
        },
        z: {
          'cut': [],
          'color': [],
          'clarity': []
        }
      }
      var config = {
        graphType: "Scatter2D",
        colorBy: "cut",
        xAxis: ['carat'],
        yAxis: ['price']
      }
      var h = json.shift();
      for (var i = 0; i < json.length; i++) {
        data.y.vars.push('Id' + json[i][0]);
        data.y.data.push([json[i][1], json[i][5], json[i][6], json[i][7], json[i][8], json[i][9], json[i][10]]);
        data.z.cut.push(json[i][2]);
        data.z.color.push(json[i][3]);
        data.z.clarity.push(json[i][4]);
      }
      var c = new CanvasXpress("remotegraphs7", data, config);
    }
  });

</script>