<!-- 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" : [
          [9181,9336,9502,9645,9791,9944,10092,10220,10364,10509,10671,10796,10915,11082,11244,11347,11442,11527,11606,11536,11631,11879,12031,12119,12269,12316,12189,12111,11978,11734,11372,11179,10903,10612,10331,10170,10044,10009,10176,10418,10579,10850,11301,12016,12524,12979,13244,14406,14919,15607,16331,17252,17228,17548,17962,18467,18895,19379,19768,20175,20341,20522,20469,20342,20165,19824,19208,18563,17913,17376,17166,17244,17101,16851,16487,16121,15617,15564,15735,16063,16451,16893,17228,17547,17695,17842,17963,18052,18195,18508,18856,19208,19528,19729,19777,19627,19408,19233,19145,19136,19212,19364,19609],
          [16966,17158,17360,17524,17697,17888,18067,18240,18440,18670,18950,19214,19503,19904,20316,20660,21008,21369,21732,21849,22158,22515,22788,23089,23358,23614,23906,24152,24320,24470,24631,24629,24614,24531,24402,24213,23942,23564,23146,22701,22363,22089,21823,21699,21573,21599,21844,22257,23089,23770,24477,25055,26656,27880,29092,30248,31423,32515,33322,34564,35735,37031,37435,38124,38783,39426,40051,40496,40772,40884,40772,40490,39946,39309,38716,38240,37759,37034,36220,35392,34839,34360,34103,33922,33788,33692,33572,33807,34255,34714,35290,36037,36677,37367,38026,38645,39296,39855,40335,40819,41077,41118,41037],
          [14951,15242,15555,15858,16178,16526,16864,17184,17526,17871,18212,18355,18477,18649,18796,18844,18872,18836,18071,18465,18821,19140,19402,19798,20314,20691,21037,21430,21811,22151,22487,22617,22716,22820,22963,23130,23309,23487,23655,23819,24033,24074,24093,24065,23999,23705,23382,23122,22866,22570,22260,22018,21796,21658,21641,21667,21869,22311,23162,23988,24576,25242,26909,28223,29519,30773,32012,33196,34090,35236,36535,37948,38449,39240,40017,40812,41520,42039,42442,42699,42497,42204,41644,41020,40460,39992,39557,38890,38151,37391,36922,36504,36434,36464,36532,36674,36797,37308,38007,38676,39357,39982,40590],
          [12161,12442,12737,13019,13315,13631,13952,14257,14585,14923,15274,15530,15772,16070,16370,16580,16776,16913,16445,16912,17416,17747,17924,18231,18557,18720,18867,18948,18953,18941,19039,19242,19484,19750,20022,20275,20505,20723,20953,21176,21446,21691,21911,22194,22511,22734,22954,23236,23494,23729,23932,24085,24197,24233,24233,24175,24015,23737,23430,23169,22919,22692,22494,22410,22396,22465,22725,23156,23990,24681,25323,25958,27623,28939,30225,31471,32759,33998,34963,36203,37429,38900,39418,40208,40962,41696,42372,42841,43130,43236,43216,43224,42997,42653,42330,42052,41809,41345,40757,40178,39857,39815,39928],
          [9273,9504,9745,9974,10211,10461,10705,10945,11202,11471,11759,12003,12252,12562,12875,13130,13388,13647,13879,14008,14382,14665,14823,15066,15337,15576,15847,16172,16540,16921,17270,17412,17504,17569,17640,17712,17783,17866,18001,18178,18422,18692,18950,19226,19505,19787,20073,20421,20794,21187,21557,21833,22109,22359,22571,22818,23160,23496,23693,24023,24221,24392,24519,24584,24562,24447,24276,24038,23731,23383,23150,22978,22859,22810,22826,22831,23093,23563,24437,25176,25805,26394,28030,29267,30503,31691,33009,34227,35181,36415,37783,39329,39976,40912,41819,42711,43552,44229,44748,45077,45154,45141,44917],
          [6437,6606,6788,6964,7150,7350,7554,7755,7974,8204,8454,8657,8875,9135,9398,9618,9846,10068,10293,10402,10505,10721,10899,11068,11278,11521,11786,12092,12430,12761,13096,13296,13481,13684,13933,14208,14495,14785,15077,15336,15555,15759,15976,16199,16419,16642,16820,16970,17107,17260,17400,17623,17881,18171,18501,18824,19143,19513,19857,20262,20578,20875,21124,21346,21580,21839,22125,22440,22758,23047,23317,23519,23687,23807,23809,23756,23622,23370,23174,22942,22743,22580,22425,22356,22386,22460,22659,23096,23949,24633,25207,25820,27548,28864,30153,31480,32800,34178,35232,36578,38052,39228,40084],
          [4026,4122,4220,4313,4410,4517,4621,4724,4840,4964,5101,5234,5372,5542,5711,5866,6026,6194,6356,6456,6619,6791,6951,7165,7387,7605,7805,8003,8178,8315,8477,8735,8992,9249,9502,9739,9949,10132,10310,10487,10694,10959,11220,11472,11719,11988,12244,12528,12824,13145,13364,13654,13918,14135,14350,14586,14815,14973,15139,15401,15625,15847,16131,16436,16758,17077,17408,17752,18088,18390,18682,18963,19211,19428,19713,20045,20386,20780,21112,21448,21754,21913,22030,22112,22155,22135,21994,21751,21513,21241,21102,21046,20998,21028,21159,21320,21590,22099,23011,23778,24436,25315,26602],
          [3099,3174,3256,3335,3414,3505,3595,3684,3779,3878,3986,4074,4169,4281,4401,4501,4603,4714,4826,4886,4929,5080,5231,5411,5609,5786,5960,6127,6299,6474,6705,6928,7147,7363,7582,7804,8027,8258,8508,8764,9031,9288,9584,9867,10147,10494,10828,11185,11538,11921,12362,12768,13169,13582,14040,14489,14902,15353,15771,16248,16675,17089,17457,17778,18127,18451,18755,19071,19365,19680,20107,20561,21020,21525,22061,22696,23278,23892,24502,25134,25707,26221,26787,27361,27877,28415,29008,29625,30123,30682,31247,31812,32356,32903,33331,33769,34143,34401,34619,34798,35081,35352,35602]
        ],
        "smps" : ["1900","1901","1902","1903","1904","1905","1906","1907","1908","1909","1910","1911","1912","1913","1914","1915","1916","1917","1918","1919","1920","1921","1922","1923","1924","1925","1926","1927","1928","1929","1930","1931","1932","1933","1934","1935","1936","1937","1938","1939","1940","1941","1942","1943","1944","1945","1946","1947","1948","1949","1950","1951","1952","1953","1954","1955","1956","1957","1958","1959","1960","1961","1962","1963","1964","1965","1966","1967","1968","1969","1970","1971","1972","1973","1974","1975","1976","1977","1978","1979","1980","1981","1982","1983","1984","1985","1986","1987","1988","1989","1990","1991","1992","1993","1994","1995","1996","1997","1998","1999","2000","2001","2002"],
        "vars" : ["<5","5-14","15-24","25-34","35-44","45-54","55-64",">64"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "colorScheme":"CanvasXpress",
     "graphOrientation":"vertical",
     "graphType":"AreaLine",
     "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)",
     "legendKeyBackgroundColor":"rgba(255,255,255,0)",
     "legendPosition":"right",
     "lineThickness":"3",
     "lineType":"spline",
     "smpLabelInterval":"20",
     "smpLabelRotate":"45",
     "smpTitle":"Year",
     "subtitle":"gcookbook - uspopage",
     "title":"Age distribution of population in the United States",
     "xAxis":[
        "<5",
        "5-14",
        "15-24",
        "25-34"
     ],
     "xAxis2":[
        "35-44",
        "45-54",
        "55-64",
        ">64"
     ],
     "xAxisTitle":"Number of People (1000's)"
  }
  

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


</script>