Форум Сайтостроение Веб-строительство

Как вставить диаграмму на страницу?

E
На сайте с 06.02.2016
Offline
1
eenforever
980

Доброго времени суток! Уважаемый, вебмастера, подскажите пожалуйста по сервису Google Charts Google Charts.

Мне необходимо на одну страницу, вставить несколько диаграмм: Pie Chart

Возьмем к примеру, предлагаемый там шаблон: 


<html>

  <head>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">

      google.charts.load('current', {'packages':['corechart']});

      google.charts.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: 'My Daily Activities'

        };

 

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

 

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id="piechart" style="width: 900px; height: 500px;"></div>

  </body>

</html>

Если его вставить в страницу, все работает.

Но как сделать так, что бы на странице были 3 таких диаграммы? Ничего не получается. Пробовал и id менять, и код копировать, не вторая не 3 диаграмма не отображается. Подскажите, пожалуйста решение.

A
На сайте с 04.11.2007
Offline
134
asteroid
#1 


        ...



        var chart = new google.visualization.PieChart(document.getElementById('piechart')); 

        chart.draw(data, options); 



        var chart2 = new google.visualization.PieChart(document.getElementById('piechart2')); 

        chart2.draw(data, options); 



        var chart3 = new google.visualization.PieChart(document.getElementById('piechart3')); 

        chart3.draw(data, options); 

      } 

    </script> 

  </head> 

  <body> 

    <div id="piechart" style="width: 900px; height: 500px;"></div> 

    <div id="piechart2" style="width: 900px; height: 500px;"></div> 

    <div id="piechart3" style="width: 900px; height: 500px;"></div> 

  </body> 

</html>
E
На сайте с 06.02.2016
Offline
1
eenforever
#2

asteroid, спасибо огромное! Заработало. А как для каждой диаграммы, задать свои параметры?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий