CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-visualizationresponsive
Ronald
Ronald

Reputation: 557

Responsive Google Chart - Column Chart

I am trying to make this Google Chart responsive to no avail. It contains the latest and most current Google Chart code. Please help me make this code responsive. I have included a jsfiddle.

https://jsfiddle.net/rbla/h8faga72/1/

The HTML is

<div id="visualization_wrap">
    <div id="Sarah_chart_div"></div>
</div>

The CSS is

body {
    width:80%;
    margin:10% auto;
    background:#e6e6e6;
}
#visualization_wrap {
    border:2px solid gray;
    position: relative;
    padding-bottom: 80%;
    height: 0;
    overflow:hidden;
}
#Sarah_chart_div {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
}

the Javascript is

  // Load Charts and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

  // Draw the pie chart for Sarah's pizza when Charts is loaded.
  google.charts.setOnLoadCallback(drawSarahChart);



  // Callback that draws the pie chart for Sarah's pizza.
  function drawSarahChart() {

    // Create the data table for Sarah's pizza.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 1],
      ['Onions', 1],
      ['Olives', 2],
      ['Zucchini', 2],
      ['Pepperoni', 1]
    ]);

    // Set options for Sarah's pie chart.
    var options = {
                  title:'How Much Pizza Sarah Ate Last Night',
                   // width:400,
                   // height:300
                   //width: '100%',
                   //height: '100%',
                    chartArea: {
        left: "10%",
        top: "10%",
        height: "70%",
        width: "70%"
    }
                   };

    // Instantiate and draw the chart for Sarah's pizza.
    var chart = new google.visualization.ColumnChart(document.getElementById('Sarah_chart_div'));
    chart.draw(data, options);

     $(document).ready(function () {
         $(window).resize(function(){
     drawSarahChart();
     });
   });
  }

Upvotes: 2

Views: 2646

Answers (1)

Doggy
Doggy

Reputation: 90

just add this to your .html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

In addition that you must be clear where the method comes from which library. It helps your coding.

Upvotes: 2

Related Questions