javascript - Display Half Portion of Google Charts -
i using following code display chart. size of chart 500x500. want display half portion of chart. 500x250. when change values in div, instead of showing half resizing whole chart.
what need hide area shows 'yellow', (i don't want make transparent)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>website code analyzer</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <script src="js/boostrap.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setonloadcallback(drawchart); function drawchart() { var data = google.visualization.arraytodatatable([ ['pac man', 'percentage'], ['analyzer score', 75], ['', 25], ['', 100] ]); var options = { piehole: 0.5, tooltip: {text: 'value'}, title: 'my daily activities', legend: 'none', width: 500, pieslicetext: 'none', piestartangle: 270, slices: { 0: { color: '#3366cc' }, 1: { color: '#eae8e8'}, 2: { color: 'yellow'} } }; var chart = new google.visualization.piechart(document.getelementbyid('pacman')); chart.draw(data, options); } </script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div id="pacman" style="width: 500px; height: 500px;"></div> </div> </div> </div> </body> </html>
thank guys, got answer myself
<div style="max-height:250px;overflow:hidden"> <div id="pacman" style="width: 500px; height: 500px;"></div> </div>
Comments
Post a Comment