Menu
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.
330
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:
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.
154
Using :
<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>
You ensure that the graph will fit the div you're using.
Then to resize the graph set style="width: ...px; height: ...px;" with the desired size :
<body>
<div style="width: 800px; height: 400px;" id="chart"></div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
