title: CanvasChart: Cannot draw 2 charts in one page side by side
body: <p>I want to draw 2 canvas Charts side by side.</p>
  
  <p>For this, I took table row and drawing each of them in one column.
  But only 1 chart is drawn.</p>
  
  <p>However, When I draw them one after another, I can see both the charts.
  What's wrong here??</p>
  
  <p>P.S:This code is not from my application, but the situation is similar</p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
        &lt;!--        &lt;script src="jquery-1.11.3.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script src="canvasjs.min.js" type="text/javascript"&gt;&lt;/script&gt;--&gt;
        &lt;script src="http://canvasjs.com/assets/script/canvasjs.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script&gt;
  
  
  
           window.onload = function () {
              function1();
              function2();
           }
            function function1()
            {
               var chart = new CanvasJS.Chart("chartContainer1",
                      {
                         title: {
                            text: "Top Oil Reserves"
                         },
                         animationEnabled: true,
                         axisY: {
                            title: "Reserves(MMbbl)"
                         },
                         legend: {
                            verticalAlign: "bottom",
                            horizontalAlign: "center"
                         },
                         theme: "theme2",
                         data: [
                            {
                               type: "column",
                               showInLegend: true,
                               legendMarkerColor: "grey",
                               legendText: "MMbbl = one million barrels",
                               dataPoints: [
                                  {y: 297571, label: "Venezuela"},
                                  {y: 267017, label: "Saudi"},
                                  {y: 175200, label: "Canada"},
                                  {y: 154580, label: "Iran"},
                                  {y: 116000, label: "Russia"},
                                  {y: 97800, label: "UAE"},
                                  {y: 20682, label: "US"},
                                  {y: 20350, label: "China"}
                               ]
                            }
                         ]
                      });
  
              chart.render();
           }
           function function2()
            {
  
                 var chart1 = new CanvasJS.Chart("chartContainer",
                      {
                         theme: "theme3",
                         animationEnabled: true,
                         title: {
                            text: "Crude Oil Reserves Vs Production, 2011",
                            fontSize: 30
                         },
                         toolTip: {
                            shared: true
                         },
                         axisY: {
                            title: "billion of barrels"
                         },
                         axisY2: {
                            title: "million barrels/day"
                         },
                         data: [
                            {
                               type: "column",
                               name: "Proven Oil Reserves (bn)",
                               legendText: "Proven Oil Reserves",
                               showInLegend: true,
                               dataPoints: [
                                  {label: "Saudi", y: 262},
                                  {label: "Venezuela", y: 211},
                                  {label: "Canada", y: 175},
                                  {label: "Iran", y: 137},
                                  {label: "Iraq", y: 115},
                                  {label: "Kuwait", y: 104},
                                  {label: "UAE", y: 97.8},
                                  {label: "Russia", y: 60},
                                  {label: "US", y: 23.3},
                                  {label: "China", y: 20.4}
  
  
                               ]
                            },
                            {
                               type: "column",
                               name: "Oil Production (million/day)",
                               legendText: "Oil Production",
                               axisYType: "secondary",
                               showInLegend: true,
                               dataPoints: [
                                  {label: "Saudi", y: 11.15},
                                  {label: "Venezuela", y: 2.5},
                                  {label: "Canada", y: 3.6},
                                  {label: "Iran", y: 4.2},
                                  {label: "Iraq", y: 2.6},
                                  {label: "Kuwait", y: 2.7},
                                  {label: "UAE", y: 3.1},
                                  {label: "Russia", y: 10.23},
                                  {label: "US", y: 10.3},
                                  {label: "China", y: 4.3}
  
  
                               ]
                            }
  
                         ],
                         legend: {
                            cursor: "pointer",
                            itemclick: function (e) {
                               if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                  e.dataSeries.visible = false;
                               }
                               else {
                                  e.dataSeries.visible = true;
                               }
                               chart.render();
                            }
                         },
                      });
  
              chart1.render();
  
  
           }
  
        &lt;/script&gt;
        &lt;!--  &lt;script type="text/javascript" src="/assets/script/canvasjs.min.js"&gt;&lt;/script&gt;--&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;table&gt;&lt;tr&gt;&lt;td&gt;
        &lt;div id="chartContainer1" style="height: 300px; width: 50%;"&gt;
        &lt;/div&gt;
              &lt;td&gt;
        &lt;div id="chartContainer" style="height: 300px; width: 50%;"&gt;
  
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>