За последние 24 часа нас посетили 18890 программистов и 1571 робот. Сейчас ищут 1743 программиста ...

Несколько диаграмм Google Chart

Тема в разделе "JavaScript и AJAX", создана пользователем vah-smile, 8 ноя 2015.

  1. vah-smile

    vah-smile Активный пользователь

    С нами с:
    13 апр 2009
    Сообщения:
    162
    Симпатии:
    1
    Адрес:
    Украина, Ровно
    Есть инструмент для построения диаграмм Google Chart. Вопрос состоит в сделующем: как при помощи этого инструмента можно вставить две отдельные диаграмы на страницу?

    Вот пример для построения линейной диаграммы:

    Код (PHP):
    1.   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    2.   <script type="text/javascript">
    3.     google.load('visualization', '1.1', {packages: ['line']});
    4.     google.setOnLoadCallback(drawChart);
    5.  
    6.     function drawChart() {
    7.  
    8.       var data = new google.visualization.DataTable();
    9.       data.addColumn('number', 'Day');
    10.       data.addColumn('number', 'Guardians of the Galaxy');
    11.       data.addColumn('number', 'The Avengers');
    12.  
    13.       data.addRows([
    14.         [1,  37.8, 80.8],
    15.         [2,  30.9, 69.5],
    16.         [3,  25.4,   57],
    17.         [4,  11.7, 18.8],
    18.         [5,  11.9, 17.6],
    19.         [6,   8.8, 13.6],
    20.         [7,   7.6, 12.3],
    21.         [8,  12.3, 29.2],
    22.         [9,  16.9, 42.9],
    23.         [10, 12.8, 30.9],
    24.         [11,  5.3,  7.9],
    25.         [12,  6.6,  8.4],
    26.         [13,  4.8,  6.3],
    27.         [14,  4.2,  6.2]
    28.       ]);
    29.  
    30.       var options = {
    31.         chart: {
    32.           title: 'Box Office Earnings in First Two Weeks of Opening',
    33.           subtitle: 'in millions of dollars (USD)'
    34.         },
    35.         width: 900,
    36.         height: 500
    37.       };
    38.  
    39.       var chart = new google.charts.Line(document.getElementById('linechart_material'));
    40.  
    41.       chart.draw(data, options);
    42.     }
    43.   </script>
    44.  
    45.  
    46. <div id="linechart_material"></div>
    PHP, JavaScript, SQL и другой код пишите внутри тегов
    Код ( (Unknown Language)):
    1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]
     
  2. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    вот эту логику повторить Н раз, наверное
     
  3. vah-smile

    vah-smile Активный пользователь

    С нами с:
    13 апр 2009
    Сообщения:
    162
    Симпатии:
    1
    Адрес:
    Украина, Ровно
    Тоже так сначала подумал: задал новый DIV с другим ID и вписал его в скрипт
    Код (PHP):
    1. var chart = new google.charts.Line(document.getElementById('linechart_material'));
    2. chart.draw(data, options);
    3.  
    4. var chart2 = new google.charts.Line(document.getElementById('NEW_DIV_ID'));
    5. chart2.draw(data, options); 
    Но проблема в том, что первая диаграмма отображается, а вместо второй - выделяется место под диаграмму (с указаными размерами width: 900, height: 500), а самого графика - не видно!

    PHP, JavaScript, SQL и другой код пишите внутри тегов
    Код ( (Unknown Language)):
    1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]