Настроить диаграмму 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

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

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

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

// Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

Укажите параметры

Каждая диаграмма имеет множество настраиваемых параметров, включая заголовок, цвета, толщину линий, заливку фона и т. д. Хотя команда «Инструменты для диаграмм» усердно работала над внешним видом диаграммы по умолчанию, вы можете настроить ее, например, добавить заголовок или метки осей.

Укажите пользовательские параметры для своей диаграммы, определив объект JavaScript со свойствами option_name / option_value . Используйте имена опций, указанные в документации диаграммы. В документации к каждой диаграмме указан набор настраиваемых параметров. Например, параметры, доступные для круговой диаграммы, включают «легенда», «заголовок» и «is3D». Все параметры имеют документированное значение по умолчанию.

Следующий объект определяет положение легенды, заголовок диаграммы, размер диаграммы и параметр 3D для круговой диаграммы:

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

Обновите объект параметров в приведенном выше примере, указав эти значения, чтобы увидеть, как они повлияют на диаграмму.

Укажите размер диаграммы

Одним из очень распространенных вариантов установки является высота и ширина диаграммы. Вы можете указать размер диаграммы в двух местах: в HTML-коде контейнера <div> или в параметрах диаграммы. Если вы укажете размер в обоих местах, диаграмма обычно будет соответствовать размеру, указанному в HTML. Если вы не укажете размер диаграммы ни в HTML, ни в качестве опции, диаграмма может отображаться неправильно.

Указание размера в том или ином месте имеет свои преимущества:

  • Указание размера в HTML . Загрузка и отображение диаграммы может занять несколько секунд. Если у вас уже есть контейнер диаграммы с размером в HTML, макет страницы не будет переключаться при загрузке диаграммы.
  • Указание размера в качестве параметра диаграммы . Если размер диаграммы указан в JavaScript, вы можете скопировать и вставить или сериализовать, сохранить и восстановить JavaScript и последовательно изменить размер диаграммы.

Больше информации