Google Charts

28 views

Skip to first unread message

Alexandr KOROLEV -KOTELNIKI-

unread,

Feb 10, 2019, 1:58:54 AM2/10/19

to contributor.pw

Добрый день!

Подскажите пожалуйста использую  Google Charts
 Данные получаю из гугл таблицы не могу задать стили для колонок изменить цвет . подскажите как  это сделать?  Когда данные прописывал вручную все получалось. script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});

     google.charts.setOnLoadCallback(drawChart);

    	function drawChart() {
  var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1FTCLBbMXawRZ_RrT0YOn1Xvw4h860-rwbwogmoC4Vuo/gviz/tq?gid=865468357&range=A570:B581");
  query.send(handleQueryResponse);

}
console.log(function drawChart())


var options = {'title':'User satisfaction',
                      displayAnnotations: 'tree', 
                      titleTextStyle: {color: 'white',fontName:'Roboto condensed',fontSize: '30' },
                      colors: ['#FFFFFF' ],
                      'width':600,
                      'height':300,
                      backgroundColor:'#0082C3',
                      isStacked: 'true',
                     legend: 'none', 
                      is3D: true,
                      hAxis : {textColor: 'white'},
                      vAxis : {textColor: 'white'}

                      };

function handleQueryResponse(response) {
  var data = response.getDataTable();
  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
  chart.draw(data, options);

}
    </script

Alexander Ivanov ✔

unread,

Feb 15, 2019, 12:02:01 PM2/15/19

to contri...@googlegroups.com

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var query = new
        google.visualization.Query("https://docs.google.com/spreadsheets/d/1R5b1L78_PblQpS5xVDq5nfHpVYvcDHndvYd335ewqI4/gviz/tq?gid=0&range=A1:C13");
      query.send(handleQueryResponse);

      var data = new google.visualization.DataTable(query);

    }

    var options = {
      'title': 'User satisfaction',
      displayAnnotations: 'tree',
      titleTextStyle: { color: '#212121', fontName: 'Roboto condensed', fontSize: '30' },
      textStyle: { fontName: "Roboto condensed" },
      // colors: ['red'],
      'width': 600,
      'height': 300,
      backgroundColor: '#FFF',
      isStacked: 'true',
      legend: 'none',
      hAxis: {
        textStyle: {
          color: "#212121",
          fontName: "Roboto condensed",
          fontSize: 13,
        }
      },
      vAxis: {
        textStyle: {
          color: "#212121",
          fontName: "Roboto condensed",
          fontSize: 13,
        }
      },
      annotations: {
        textStyle: {
          color: "#424242",
          fontName: "Roboto condensed",
          fontSize: 14,
          bold: true
        }
      }
    };

    function handleQueryResponse(response) {
      var data = response.getDataTable();
      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
        {
          calc: "stringify",
          sourceColumn: 1,
          type: "string",
          role: "annotation"
        }, {
          calc: "stringify",
          sourceColumn: 2,
          type: "string",
          role: "style"
        }]
      );

      var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
      chart.draw(view, options);
    }

  </script>
  <div id="columnchart" width="150" height="150">Loading ....</div>
</body>

</html>

Reply all

Reply to author

Forward

0 new messages