Two Div next to each other where IDs contain an image

Question

Normally, float works for me, where I can just float left or right. However, this time I am working with Google Charts and this code uses getElementByID. Then each div ID contains an image of a chart. My goal is to place two charts next to each other, but what ends up happening is that the chart that is supposed to be on the left side just disappears.

So far I have tried using float in style and class for div. Neither seems to be working. I am not sure if I am doing it correctly, however I have gotten float to work before in other documents, so I am going to assume I need to use a different approach for this situation.

I can paste code if needed. What is the solution for placing two divs next to each other when both IDs contain an Google Chart?

EDIT : Here is a paste of my code http://pastebin.com/frhhEDYt

and using a class doesn't work – Hamish Jul 03 '12 at 03:58 — Hamish, Jul 03 '12 at 03:58
roger that. Even with a wrapper, it doesn't work – krikara Jul 03 '12 at 03:59 — krikara, Jul 03 '12 at 03:59

Anne · Accepted Answer · 2012-07-03T07:40:29.420

3

Try putting a parent container with the two charts in it, specify the width and height of each charts both in JS and CSS, set each charts as block (to ensure cross browser as well), float them, clear the next rows. Don't forget to set a specified width for the container enough to encase the charts. If its 100%, it will follow the window's / parent width, or if the value is lower than the width of the charts in total, one chart will fall below.

Here's my jsfiddle for it: http://jsfiddle.net/JSwth/

Hope it helps.

edited Jul 03 '12 at 07:40

answered Jul 03 '12 at 07:35

Anne

591
2
7

Bingo! I guess the container makes a big difference. – krikara Jul 03 '12 at 07:59
Sorry I'm not familiar with the Google Chart as a whole. You may open a new question regarding that topic as it is a separate problem. :) – Anne Jul 03 '12 at 09:39

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

Perhaps lay them out with a table, to start, if floats aren't working? That would at least make sure that it's the style causing the second chart to disappear, not Google Charts API.

This thread may help, too (this addresses Google Charts usage with two charts directly): How to add two Google charts on the one page?

edited May 23 '17 at 11:59

Community

1
1

answered Jul 03 '12 at 04:10

Jon Schroeder

307
3
8

Hmm I tried that already and I also have viewed that page. The difference between his and my situation is that I already know how to have multiple charts on the same page. I just need to know how to configure the divs to have a couple charts stand next to each other. His question was how to display multiple charts and the solution just showed charts on top of one another. – krikara Jul 03 '12 at 05:12

score 0 · Answer 3 · answered Jul 03 '12 at 05:28

#chart_div{
  width:250px;
  float:left;
}  
#chart_div2{
  width:250px;
  float:left;
} 

<script type="text/javascript" src="https://www.google.com/jsapi">
</script>

<div id="chart_div">
</div>
<div id="chart_div2">
</div>
<div id="chart_div3">
</div>

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
    'packages': ['corechart']
});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
    ]);
    // Create the data table.
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'Topping');
    data2.addColumn('number', 'Slices');
    data2.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 15],
        ['Zucchini', 1],
        ['Pepperoni', 2]
    ]);

    var data3 = new google.visualization.DataTable();
    data3.addColumn('string', 'Year');
    data3.addColumn('number', 'Sales');
    data3.addColumn('number', 'Expenses');
    data3.addRows([
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 860, 580],
        ['2007', 1030, 540]
    ]);

    // Set chart options
    var options = {
        'title': 'How Much Pizza I Ate Last Night',
        'width': 250,
        'height': 200
    };
    // Set chart options
    var options2 = {
        'title': 'How Much Pizza You Ate Last Night',
        'width': 250,
        'height': 200
    };
    // Set chart options
    var options3 = {
        'title': 'Line chart',
        'width': 250,
        'height': 200
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));
    chart2.draw(data2, options2);
    var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
    chart3.draw(data3, options3);

}

I have created a bin for you please check using this link http://codebins.com/codes/home/4ldqpc5

This may work for your code, but it certainly doesn't work for mine. Similar to what I have said before, float simply doesn't work, at least not in the standard procedure. Perhaps it is because your code uses basic charts. My code has a pie chart, an animated column chart, and a query chart obtained from google docs spread sheet. I guess I will upload my code now. — krikara, Jul 03 '12 at 05:50

Two Div next to each other where IDs contain an image

3 Answers3