1

I would like to place the charts side by side but they are being rendered one below another . Please suggest how to do this. I don't want to use a Dashboard panel for it.

Can we achieve it by tweaking the HTML tags etc. so that the horizontal place in the screen can be used and less of scrolling vertically .

HTML Code

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1');
      google.setOnLoadCallback(drawVisualization);


    // Code for Bar chart

      function drawVisualization() {
        var columnChart = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwbYufmDPjvOT
/edit#gid=0',
          //query: 'select * where `Current Value`< 15000',
          options: {
          'title': 'Kaushik Profile',
          legend: { position: 'top' }
          },
          view:{"columns": [0,1,2]},
          containerId: 'col_chart'
        });
        columnChart.draw()

      // Code for Invested pie chart

         var investedpieChart = new google.visualization.ChartWrapper({
          chartType: 'PieChart',
          dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwoAYwVgPvOT1q2P-GQyzQ/edit#gid=0',
          options: {
          'title': 'Invested Amount', is3D: true},
          view:{"columns": [0,1]},
          containerId: 'investedpie_chart'
        });
        investedpieChart.draw()

        // Code for Current  pie chart

         var currentpieChart = new google.visualization.ChartWrapper({
          chartType: 'PieChart',
          dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1VwoAufmDPjvOT1q2P-GQyzQ/edit#gid=0',
          options: {
          'title': 'Invested Amount', is3D: true},
          view:{"columns": [0,2]},
          containerId: 'currentpie_chart'
        });
        currentpieChart.draw()



        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div>
    <div id="col_chart" style="width: 500px; height: 600px;">  </div>
    <div id="investedpie_chart" style="width: 700px; height: 700px;"></div>
    <div id="currentpie_chart" style="width: 700px; height: 700px;"></div>
    </div>
  </body>
</html>

2 Answers 2

1

This is a HTML Styling question. Whether HTML elements are displayed on a new line, or on the same line depend on a few different things. If the width is not sufficient to display two elements side by side, the second element will be wrapped to the next line. Basically there are two issues:

  • Is the width of the Parent Element wide enough to display the children side by side
  • Is the style setting, set to Inline or Block.

This is the HTML in question:

<div>
  <div id="col_chart" style="width: 500px; height: 600px;">  </div>
  <div id="investedpie_chart" style="width: 700px; height: 700px;"></div>
  <div id="currentpie_chart" style="width: 700px; height: 700px;"></div>
</div>

What happens if you set the width of the parent DIV?

<div style="width: 2000px;">
  <div id="col_chart" style="width: 500px; height: 600px;">  </div>
  <div id="investedpie_chart" style="width: 700px; height: 700px;"></div>
  <div id="currentpie_chart" style="width: 700px; height: 700px;"></div>
</div>

In some situations, using float: left or float: right can work or some combination of the two.

You can also research existing StackOverflow questions like these:

Align Elements Side by Side

Elements Side by Side in HTML

1

This worked for me:

<body>
 <table>
    <tr>
        <td><div id="chart_div" style="width: 300px; height: 300px;"></div></td>
        <td><div id="chart2_div" style="width: 300px; height: 300px;"></div></td>
    </tr>
 <table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.