How to place chart top and bottom?

debugcn Published at Dev

sxxxxxxx

I want to display one of the chart underneath the other but for now only the 1st chart is showing and I can't seem to display the other chart at the bottom of it. Also, how do I make the chart align to the middle?

 <section>
    <html>
    <div class="container"></div>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <div id="columnchart_values" style="width: 1200px; height: 700px;"></div>
      <script type="text/javascript">
        google.charts.load("current", {packages:['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
          var data = google.visualization.arrayToDataTable([
            ["Week", "# of F2F=0"],
            ["Copper", 8.94],
            ["Silver", 10.49],
            ["Gold", 19.30],
            ["Platinum", 0]
          ]);

          var view = new google.visualization.DataView(data);
          var options = {
            title: "Period: ASEAN 2Q F2F = 0 Dashboard",
            'backgroundColor': 'transparent', 
            width: 600,
            height: 400,
            bar: {groupWidth: "70%"},
            legend: { position: "right" },
          };
          var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
          chart.draw(view, options);
         }
      </script>

    <div id="piechart_3d" style="width: 1200px; height: 700px;"></div>
        <script type="text/javascript">
          google.charts.load("current", {packages:["corechart"]});
          google.charts.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Number of calls made', 'Number of people'],
              ['F2F = 0', 6],
              ['1 < F2F < 5', 8],
              ['F2F > 9', 5]
            ]);

            var options = {
              title: 'Period: ASEAN2QWK3',
              titleTextStyle: {
                fontSize: 21
              },
              'backgroundColor': 'transparent',   
              is3D: true,
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
            chart.draw(data, options);
          }
        </script>

    </html>
    </section>

Krishnakant

You are calling '.load' method twice, which is incorrect.

Just comment below line for second chart and both chart will be loaded.

google.charts.load("current", {packages:["corechart"]});

Collected from the Internet

Please contact [email protected] to delete if infringement.