<!-- 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 = {
     "y" : {
        "data" : [
          [1977,2.98352055383543],[1977,0.208779979021173],[1977,0.516481540415995],[1977,2.53976485019248],[1978,1.9151703507814],[1978,0.759825520111634],[1978,1.03860095207035],[1978,0.202470341300132],[1979,1.14792971136568],[1979,0.311883101170813],[1979,0.563253921276056],[1979,1.02456306640513],[1980,1.79670756515802],[1980,0.582556071531046],[1980,1.19765746934593],[1981,1.75253466486853],[1981,0.126020739800791],[1981,0.687687301783687],[1981,0.3548266784798],[1982,0.772998732184293],[1982,0.96256403679119],[1982,0.693643443163038],[1983,1.34240625354026],[1983,0.231538068780438],[1983,0.523216944287757],[1983,0.415287446331524],[1984,3.20429872928358],[1984,0.581484140227707],[1984,0.202902969019087],[1985,0.969105664668943],[1985,1.07970086960618],[1985,0.208164452717254],[1985,0.962946940662372],[1986,2.36947854869278],[1986,0.257900380794335],[1986,0.19873112827474],[1986,0.433487795618009],[1986,0.325676339731071],[1987,1.20542580102935],[1987,0.83568475831665],[1987,1.24065658624523],[1988,1.26809380655125],[1988,0.734509774164577],[1988,2.37053694802624],[1988,0.790235361971302],[1989,2.8345939330505],[1989,1.183257218705],[1989,0.392850009024575],[1989,0.975295860979896],[1990,1.43432710148099],[1990,1.3638434298331],[1990,2.32913215092843],[1990,1.03134676102818],[1991,2.09237049470402],[1991,0.578297249830432],[1991,0.637985426686524],[1991,0.712237460968582],[1991,0.394826426277535],[1992,1.86345156369203],[1992,0.669304433859284],[1992,0.939743415440202],[1992,0.773164862702933],[1992,1.11148526359353],[1993,2.78397343443086],[1993,1.21227766252726],[1993,1.34717790627949],[1994,1.66756117115677],[1994,1.34689403050433],[1994,2.09268674885444],[1994,1.58964327246239],[1995,2.26588673127609],[1995,1.05808840022356],[1995,1.21808807562042],[1995,0.494610594718905],[1996,4.45196804519666],[1996,0.537452166405297],[1996,0.545244489158906],[1996,0.917593389844618],[1997,3.4396551458772],[1997,1.90487287118962],[1997,3.00173975952858],[1998,2.50079778314104],[1998,1.06496864648014],[1998,1.52134326539668],[1998,0.768666141111714],[1999,3.89020480233631],[1999,1.46848253404405],[1999,0.571360365364134],[1999,1.61584304389576],[2000,2.49515813598875],[2000,0.656850742240402],[2000,0.534832756630298],[2000,1.60484816657267],[2000,0.445543187172222],[2001,2.38530990233043],[2001,2.74794266343131],[2001,1.49808707723351],[2002,3.92806928627862],[2002,2.64236282386198],[2002,0.55775816094974],[2002,0.536637104762506],[2002,0.59412750868514],[2003,4.81797167728548],[2003,1.62113924543217],[2003,1.23788799207691],[2003,0.688704230032928],[2004,1.87115506572587],[2004,1.10967273201966],[2004,2.69845167824367],[2004,0.728952268826084],[2004,1.54658071376937],[2005,3.09164528909704],[2005,3.67209885228953],[2005,0.731866154643863],[2005,0.501706999216886],[2006,4.80814720283751],[2006,0.750129477646631],[2006,1.96818277996204],[2007,5.6340673212717],[2007,0.745756406056602],[2007,2.5140600690924],[2008,4.91665279954387],[2008,2.15004309317357],[2008,0.746282332590566],[2009,7.69476242868302],[2009,0.867770351316001],[2009,1.98264760758801],[2009,0.573127786486015],[2010,2.56018196508162],[2010,2.38312330442034],[2010,4.10764745138057],[2011,4.92867228518735],[2011,2.23444617612844],[2011,1.43729088848008],[2011,0.688143814818957],[2012,6.58664420676336],[2012,2.10274446596042],[2012,1.84930579045572],[2013,4.68135900459318],[2013,1.07297383618593],[2013,3.35330239096453],[2013,0.809676218388758],[2014,6.91682462363139],[2014,1.8017979289302],[2015,10.6713065247899],[2015,2.20718497678301],[2016,4.79935180490655],[2016,1.9349278997775],[2016,3.18159312703779],[2017,8.32378616397747],[2017,1.10136616854165],[2018,8.58306091718948],[2018,0.681499340170737],[2018,1.29554629001988],[2019,7.023685375938],[2019,1.074859913919],[2019,4.246369107189]
        ],
        "smps" : ["year","box_office"],
        "vars" : ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","101","102","103","104","105","106","107","108","109","110","111","112","113","114","115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149","150","151","152","153","154","155","156","157"]
     },
     "z" : {
        "genre" : ["Action","Adventure","Comedy","Drama","Action","Adventure","Comedy","Drama","Action","Adventure","Comedy","Drama","Action","Adventure","Comedy","Action","Adventure","Comedy","Drama","Action","Comedy","Drama","Action","Adventure","Comedy","Drama","Action","Comedy","Drama","Action","Adventure","Comedy","Drama","Action","Adventure","Animation","Comedy","Drama","Action","Comedy","Drama","Action","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Action","Adventure","Comedy","Drama","Action","Adventure","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Drama","Action","Comedy","Drama","Action","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Action","Adventure","Animation","Comedy","Action","Comedy","Drama","Action","Animation","Comedy","Drama","Action","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Drama","Action","Adventure","Animation","Action","Adventure","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Action","Adventure","Animation","Comedy","Drama","Action","Adventure","Animation","Comedy","Action","Adventure","Animation","Action","Adventure","Animation","Action","Animation","Comedy","Action","Adventure","Animation","Comedy","Action","Adventure","Animation","Action","Adventure","Animation","Comedy","Action","Adventure","Animation","Action","Adventure","Animation","Drama","Action","Adventure","Action","Animation","Action","Adventure","Animation","Action","Animation","Action","Adventure","Animation","Action","Adventure","Animation"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "backgroundType":"panel",
     "colorBy":"genre",
     "colors":[
        "rgb(255,180,0)",
        "rgb(255,199,64)",
        "rgb(194,0,8)",
        "rgb(255,2,13)",
        "rgb(19,175,239)"
     ],
     "dataPointSizeScaleFactor":"0",
     "graphType":"Scatter2D",
     "panelBackgroundColor":"rgb(222,222,222)",
     "scatterStreamBandwidth":0.75,
     "scatterStreamExtraSpan":0.1,
     "scatterStreamNumber":"1000",
     "scatterStreamTrueRange":"both",
     "scatterStreamType":"mirror",
     "scatterType":"stream",
     "showConfidenceIntervals":"false",
     "showLoessFit":"genre",
     "xAxisGridMinorShow":"false",
     "yAxisGridMinorShow":"false"
  }
  

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


</script>