Question

I am using google line chart api and no matter how big i make the div chart dimentions, it always shows a horizontal and vertical scroll bar. how can i stop this from happening.

Answer 1

CONTEXT: editable HTML of https://code.google.com/apis/ajax/playground/?type=visualization#line_chart (using Firefox or Chorme).

Instructions for help you in the problem:

• suppose you need a box with width=500px and height=400px.
• check Javascript at new google.visualization.LineChart(), if the width and height inicializations are 500 and 400.
• check if style of the HTML tag (perhaps div) of renderization place (id=”visualization”) is style=”width: 800px; height: 400px;”.
• check if style of the HTML parent tag (any) of renderization place is bigger than 500 and 400, or is 100%.

Another solution is by “HTML cut”: use overflow:hidden.

EXAMPLE OF CASE WITH SCROLL

        // ... piece of your javacascript.
    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 800, height: 400,
                    vAxis: {maxValue: 10}}
            );
    } google.setOnLoadCallback(drawVisualization);

<!-- ... piece of your HTML -->
<div id="container" style="width:400px;overflow:scroll;">
  <div id="visualization" style="width: 800px; height: 400px;"></div>
</div>

HTML SOLUTION (fix the container width)

<!-- ... piece of your HTML -->
<div id="container" style="width:800px;overflow:scroll;">
  <div id="visualization" style="width: 800px; height: 400px;"></div>
</div>

ANOTHER SIMPLE HTML SOLUTION (use overflow:hidden)

<!-- ... piece of your HTML -->
<div id="container" style="width:400px;overflow:hidden;">
  <div id="visualization" style="width: 800px; height: 400px;"></div>
</div>

… or reduce all, Javascript and HTML widths and heights, etc.