Change attribute in Jquery

Asked

Viewed 101 times

1

I was wondering if you could modify the attributes of a charts Google with a Jquery. Example:

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'teste',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }

  $(window).resize(function() {
    if( $(window).width() < 500){

      Alterar aqui!!!!
  }

  });

I wanted to change the title there in var options for example.

jquery google-charts

  • you will not be able to modify the variable within a function due to the scope of the function. You must set the variable options out of google.load. Recommended reading http://javascriptbrasil.com/2013/10/12/entenda-closures-no-javascript-withease/

  • ok, but how do I change the var options inside the if?

  • options.title = 'novo valor';

  • I made this change and it didn’t work.

  • What I’m trying to do is make Charts responsive. when the screen is less than 500 it changes some element from within Charts. I’m using the title as an example

1 answer

0

To make the graph responsive you must call the function resizeCharts() within the function drawChart().

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'teste',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);

    function resizeCharts() {
      // redraw charts, dashboards, etc here
      chart.draw(data, options);
    }

    $(window).resize(resizeCharts);
}

Browser other questions tagged jquery google-charts

You are not signed in. Login or sign up in order to post.