<!-- 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>

  <!-- Create the data for the graph -->
  var data = {
     "x" : {
        "Country" : ["U.S.","U.S.","U.S.","U.S.","U.S.","Japan","Japan","U.S.","Germany","Sweden","Sweden","France","U.S.","U.S.","U.S.","U.S.","U.S.","U.S.","U.S.","U.S.","U.S.","U.S.","Japan","Japan","U.S.","Germany","Japan","U.S.","U.S.","U.S.","U.S.","U.S.","Japan","Italy","Germany","Japan","Germany","Germany"]
     },
     "y" : {
        "data" : [
          [16.9,15.5,19.2,18.5,30,27.5,27.2,30.9,20.3,17,21.6,16.2,20.6,20.8,18.6,18.1,17,17.6,16.5,18.2,26.5,21.9,34.1,35.1,27.4,31.5,29.5,28.4,28.8,26.8,33.5,34.2,31.8,37.3,30.5,22,21.5,31.9],
          [4.36,4.054,3.605,3.94,2.155,2.56,2.3,2.23,2.83,3.14,2.795,3.41,3.38,3.07,3.62,3.41,3.84,3.725,3.955,3.83,2.585,2.91,1.975,1.915,2.67,1.99,2.135,2.67,2.595,2.7,2.556,2.2,2.02,2.13,2.19,2.815,2.6,1.925],
          [2.73,2.26,2.56,2.45,3.7,3.05,3.54,3.37,3.9,3.5,3.77,3.58,2.73,3.08,2.71,2.73,2.41,2.26,2.26,2.45,3.08,3.08,3.73,2.97,3.08,3.78,3.05,2.53,2.69,2.84,2.69,3.37,3.7,3.1,3.7,3.7,3.64,3.78],
          [155,142,125,150,68,95,97,75,103,125,115,133,105,85,110,120,130,129,138,135,88,109,65,80,80,71,68,90,115,115,90,70,65,69,78,97,110,71],
          [350,351,267,360,98,134,119,105,131,163,121,163,231,200,225,258,305,302,351,318,140,171,86,98,121,89,98,151,173,173,151,105,85,91,97,146,121,89],
          [8,8,8,8,4,4,4,4,5,6,4,6,6,6,6,6,8,8,8,8,4,6,4,4,4,4,4,4,6,6,4,4,4,4,4,6,4,4]
        ],
        "smps" : ["Buick Estate Wagon","Ford Country Squire Wagon","Chevy Malibu Wagon","Chrysler LeBaron Wagon","Chevette","Toyota Corona","Datsun 510","Dodge Omni","Audi 5000","Volvo 240 GL","Saab 99 GLE","Peugeot 694 SL","Buick Century Special","Mercury Zephyr","Dodge Aspen","AMC Concord D/L","Chevy Caprice Classic","Ford LTD","Mercury Grand Marquis","Dodge St Regis","Ford Mustang 4","Ford Mustang Ghia","Mazda GLC","Dodge Colt","AMC Spirit","VW Scirocco","Honda Accord LX","Buick Skylark","Chevy Citation","Olds Omega","Pontiac Phoenix","Plymouth Horizon","Datsun 210","Fiat Strada","VW Dasher","Datsun 810","BMW 320i","VW Rabbit"],
        "vars" : ["MPG","Weight","Drive_Ratio","Horsepower","Displacement","Cylinders"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "graphOrientation":"vertical",
     "graphType":"Dotplot",
     "legendColumns":"3",
     "legendPosition":"bottom",
     "showTransition":"false",
     "stripBackgroundBorderColor":"rgb(0,0,0)",
     "stripTextColor":"rgb(0,0,0)",
     "theme":"CanvasXpress",
     "title":"Measurements on 38 1978-79 model automobiles.\\nThe gas mileage in miles per gallon as measured by Consumers Union on a test track."
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


  
  <-- Functions after rendering graph -->
  cX.groupSamples(["Country"]);
  cX.segregateSamples(["Country"]);
  
</script>