<!-- 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" : {
        "Recognitions" : [0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,3,1,2,2,0,0,0,4,0,2,0,2,0,2,0,1,3,0,0,0,0,0,0,0,0,1],
        "Recognized" : ["No","No","No","No","No","No","No","No","No","No","No","No","No","No","Yes","Yes","Yes","Yes","Yes","No","No","No","Yes","No","Yes","No","Yes","No","Yes","No","Yes","Yes","No","No","No","No","No","No","No","No","Yes"],
        "Type" : ["Film","Stage","Stage","Television","Stage","Film","Film","Film","Film","Television","Stage","Film","Film","Television","Film","Film","Stage","Film","Film","Film","Television","Film","Film","Film","Film","Film","Film","Film","Film","Film","Film","Film","Television","Film","Film","Film","Television","Television","Television","Film","Television"],
        "Winnings" : [0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0,1,0,0,0,0,0,2,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
        "Year" : [1948,1948,1949,1950,1950,1951,1951,1951,1951,1951,1951,1952,1952,1952,1953,1954,1954,1956,1957,1957,1957,1959,1959,1960,1961,1961,1963,1964,1964,1966,1967,1967,1970,1976,1979,1981,1987,1988,1988,1989,1993]
     },
     "y" : {
        "data" : [
          [1,2,1,1,2,1,2,3,4,5,6,1,2,3,1,1,2,1,1,2,3,1,2,1,1,2,1,1,2,1,1,2,1,1,1,1,1,1,2,1,1]
        ],
        "smps" : ["Dutch in Seven Lessons","High Button Shoes","Sauce Tartare","Saturday Night Revue","Sauce Piquante","One Wild Oat","Young Wives' Tale","Laughter in Paradise","The Lavender Hill Mob","Sunday Night Theatre","Gigi","Secret People","Monte Carlo Baby","CBS Television Workshop","Roman Holiday","Sabrina","Ondine","War and Peace","Love in the Afternoon","Funny Face","Producers' Showcase","Green Mansions","The Nun's Story","The Unforgiven","Breakfast at Tiffany's","The Children's Hour","Charade","Paris When It Sizzles","My Fair Lady","How to Steal a Million","Two for the Road","Wait Until Dark","A World of Love","Robin and Marian","Bloodline","They All Laughed","Love Among Thieves","American Masters","Gregory Peck :  His Own Man","Always","Gardens of the World with Audrey Hepburn"],
        "vars" : ["Number"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "backgroundImage":"https://www.canvasxpress.org/assets/images/Audrey.jpg",
     "backgroundType":"image",
     "colorBy":"Type",
     "colorScheme":"Greens",
     "graphOrientation":"vertical",
     "graphType":"Dotplot",
     "groupingFactors":[
        "Year"
     ],
     "isGraphTime":"true",
     "jitter":"false",
     "legendColumns":"3",
     "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)",
     "legendKeyBackgroundColor":"rgba(255,255,255,0)",
     "legendPosition":"top",
     "legendTextScaleFontFactor":"2",
     "legendTitleScaleFontFactor":"2",
     "marginLeft":"150",
     "marginRight":"150",
     "objectBorderColor":"rgba(0,0,0)",
     "showLegendTitle":"false",
     "smpLabelInterval":"8",
     "smpTextRotate":"90",
     "timeFormat":"year",
     "title":"The Life and Films of Audrey Hepburn",
     "xAxis2Show":"false",
     "xAxisGridMajorShow":"false",
     "xAxisGridMinorShow":"false",
     "xAxisShow":"false"
  }
  
  
  <-- Event used to create graph (optional) -->
  var events = {
   "mousemove": function(o, e, t) {
      if (o && o.objectType && o.objectType == 'Property') {
        t.showInfoSpan(e, o.display);
      } else if (o && o.y && o.objectType != 'Smp') {
        var str = "<b>" + o.y.smps + "</b><br><b>Year: </b>" + o.y.Year + "<br><b>Type: </b>" + o.y.Type;
        t.showInfoSpan(e, str);
      }
    }
  };
  

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


</script>