javascript - How to make google chart same size with its container -
i'm trying develop custom donut component sap businessobjects design studio using google donut chart. it's dom(document object model).
i want make donut chart responsive because of compatibility other components. this, in classic dom used bootstrap "col-md-6" div container:
google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setonloadcallback(drawchart); function drawchart() { var data = google.visualization.arraytodatatable([ ['year', 'sales', 'expenses'], ['2000', 1000, 400], ['2001', 1170, 460], ['2002', 660, 1120], ['2003', 1030, 540], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540], ['2008', 1000, 400], ['2009', 1170, 460], ['2010', 660, 1120], ['2011', 1030, 540] ]); var options = { backgroundcolor: { fill: 'none' }, piehole: 0.4, pieslicetextstyle: { color: 'white', }, title: 'company performance', chartarea: { top: 20, width: "100%", height: "100%" }, legend: { position: 'labeled', textstyle: { fontsize: 15, color: '#000' } }, titleposition: 'out', titletextstyle: { color: '#000', bold: true, italic: true, fontsize: 16, position: 'centered' } }; var chart = new google.visualization.piechart(document.getelementbyid('chartdiv')); chart.draw(data, options); } google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setonloadcallback(drawchart2); function drawchart2() { var data = google.visualization.arraytodatatable([ ['year', 'sales', 'expenses'], ['2000', 1000, 400], ['2001', 1170, 460], ['2002', 660, 1120], ['2003', 1030, 540], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540], ['2008', 1000, 400], ['2009', 1170, 460], ['2010', 660, 1120], ['2011', 1030, 540] ]); var options = { backgroundcolor: { fill: 'none' }, piehole: 0.4, pieslicetextstyle: { color: 'white', }, title: 'company performance', chartarea: { top: 20, width: "100%", height: "100%" }, legend: { position: 'labeled', textstyle: { fontsize: 15, color: '#000' } }, titleposition: 'out', titletextstyle: { color: '#000', bold: true, italic: true, fontsize: 16, position: 'centered' } }; var chart = new google.visualization.piechart(document.getelementbyid('chartdiv2')); chart.draw(data, options); } $(window).resize(function() { drawchart(); drawchart2(); });.chart { width: 100%; min-height: 450px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="clearfix"></div> <div class="col-md-6"> <div id="chartdiv" class="chart"></div> </div> <div class="col-md-6"> <div id="chartdiv2" class="chart"></div> </div> </body> </html>but in design studio, need use component in grid layout cell. because of wrapping new divs, design broke down in design studio side. divs u see in picture, comes design studio sdk developer mode. can access them js. know div edit. both 2 photos of div hierarchy of html design , component design:
here snippet i'm working design studio, can't run it. me.init() method works main method.
sap.designstudio.sdk.component.subclass("com.try.donut.donut", function() { var me = this; var mydiv; me._width; me._height; me.drawchart = function() { //me.$().width(); var data = google.visualization.arraytodatatable([ [ 'year', 'sales', 'expenses' ], [ '2000', 1000, 400 ], [ '2001', 1170, 460 ], [ '2002', 660, 1120 ], [ '2003', 1030, 540 ], [ '2004', 1000, 400 ], [ '2005', 1170, 460 ] ]); var options = { backgroundcolor : { fill : 'none' }, piehole : 0.4, pieslicetextstyle : { color : 'white', }, title : 'company performance', chartarea : { top: "30", bottom: "30", height: "100%", width: "100%" }, legend : { position : 'labeled', textstyle : { color : '#000' } }, titleposition : 'out', titletextstyle : { color : '#000', bold : true, italic : true, fontsize : 16, position : 'centered' } }; var chart = new google.visualization.piechart(document.getelementbyid(mydiv.id+'_chart_div')); chart.draw(data, options); }; me.redraw = function() { mydiv = this.$()[0]; var componentdiv = d3.select(mydiv); componentdiv.selectall("*").remove(); var wrapperdiv = componentdiv.append("div").attr("class","col-md-6"); wrapperdiv.append("div").attr("class","chart").attr("id",mydiv.id+"_chart_div"); google.charts.load('current', {'packages':['corechart']}); google.charts.setonloadcallback(function(){ me.drawchart(); }); }; $(window).resize(function(){ me.redraw(); }); me.init = function() { me.redraw(); }; // /////***** set - *****\\\\\\ me.height = function(value) { if (value === undefined) { return me._height; } else { me._height = value; return me; } }; me.width = function(value) { if (value === undefined) { return me._width; } else { me._width = value; return me; } }; });what should new div's attribute fix problem?
Comments
Post a Comment