Geek asks and answers

Why am I getting scroll bars when using the Google graphic ruler?

I use google graphical chart and no matter how big I use chart chart sizes, it always shows horizontal and vertical scroll bar. how can i stop this.

enter image description here

+3
source share
2 answers

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

Instructions for resolving the problem:

  • Suppose you need a box with width = 500px and height = 400px.
  • Javascript google.visualization.LineChart(), 500 400.
  • , HTML (, div) (id = "" ): style = "width: 800px; height: 400px;".
  • , HTML () 500 400 100%.

"HTML cut": overflow: hidden.

        // ... 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 ( )

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

HTML ( : )

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

... , Javascript HTML ..

+3

:

<script src="https://www.google.com/jsapi"></script>
<script>
  google.load("visualization", "1", {packages:["corechart"]});
var data = new google.visualization.DataTable();
//init your data
var options = {
      width: "100%", height: "100%",
      //other options

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

<body>
   <div id="chart"></div>
</body>

, div.

style="width: ...px; height: ...px;" :

<body>
  <div style="width: 800px; height: 400px;" id="chart"></div>
</body>
+1

More articles:


All Articles