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