How to load two Google Line charts in one page?
<p>I had a deep look at somewhat similar questions asked <a href="https://stackoverflow.com/questions/33111930/more-than-two-google-charts-on-a-single-page">here</a> and <a href="https://stackoverflow.com/questions/18084781/google-charts-load-different-charts-on-one-page">here</a>. I tried their implementation. It didn't work !</p>

<p>Then I had a look at following link by Google : <a href="https://developers.google.com/chart/interactive/docs/basic_multiple_charts#using-a-single-callback-to-draw-multiple-charts" rel="nofollow noreferrer">tow charts in one page</a>. Followed the same procedure but still ended up showing only one chart at a time.</p>

<p>Below is my code :</p>

<pre><code> &lt;script type = "text/javascript" src = "https://www.google.com/jsapi" &gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!--Load the Ajax API--&gt;

    &lt;script type="text/javascript"&gt;

      google.load("visualization", "1", {packages:["line"]});         
        google.setOnLoadCallback(drawChart);    
        google.setOnLoadCallback(drawOutputChart);

        function drawChart() {
            var data = new google.visualization.DataTable(&lt;?= $jsonAnalogTable ?&gt;);
            var options = {
                chart: {
                    title: ' Data ',
                    is3D: 'true'
                },
                width: 550,
                height: 350,

            };       
            var chart = new google.charts.Line(document.getElementById('analogchart'));
            chart.draw(data, options);
        } 

        function drawOutputChart(){
           var data2 = new google.visualization.DataTable(&lt;?= $jsonOutputTable ?&gt;);
            var options2 = {
                chart: {
                    title: ' Data ',
                    is3D: 'true'
                },
                width: 550,
                height: 350,

            };

            var chart2 = new google.charts.Line(document.getElementById('outputChart'));
            chart2.draw(data2, options2); 
        }


    &lt;/script&gt;
</code></pre>

<p>**HTML Code to call it : **</p>

<pre><code>&lt;table&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;div id="analogchart" &gt;

                    &lt;/div&gt;  
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;div id="outputChart" &gt;

                    &lt;/div&gt;
                &lt;/td&gt;

            &lt;/tr&gt;
        &lt;/table&gt;
</code></pre>

<p>I seriously have no idea what is going wrong as it is able to show one chart at a time, but not both !</p>