Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как создать несколько графиков GoogleCharts на одной странице? (https://javascript.ru/forum/misc/53822-kak-sozdat-neskolko-grafikov-googlecharts-na-odnojj-stranice.html)

Sanu0074 20.02.2015 04:05

Как создать несколько графиков GoogleCharts на одной странице?
 
Этот код не работает, создается график только для первого блока:
google.load("visualization", "1", {packages:["corechart"]});
                    google.setOnLoadCallback(drawChart1);
                    function drawChart1() {
                      var data1 = google.visualization.arrayToDataTable([
                        ["Element", "", { role: "style" }, { role: 'annotation' }  ],
                        ['x1',27, "#07618e",'27'],
                        ['x2',41, "#00905c",'41'],
                        ['x3',1.031, "#e19035",'1.031']
                      ]);

                        var view1 = new google.visualization.DataView(data1);
                              view1.setColumns([0, 1,
                                               { calc: "stringify",
                                                 sourceColumn: 3,
                                                 type: "string",
                                                 role: "annotation" },
                                               2]);

                      var options1 = { 
                        titlePosition: 'in', axisTitlesPosition: 'in',
                        hAxis: {showTextEvery: '1', textPosition: 'out'}, 
                        vAxis: {textPosition: 'out'},
                        legend: {position: 'none'},
                        backgroundColor: { fill:'transparent' },
                        is3D: true
                      };
                      var chart1 = new google.visualization.BarChart(document.getElementById('map_1_dg'));
                        google.visualization.events.addListener(chart1, 'ready', myReadyHandler1);
                        function myReadyHandler1(){$('text').attr('fill','#ffffff');}
                        chart1.draw(view1, options1);
                    }
                                    google.load("visualization", "1", {packages:["corechart"]});
                    google.setOnLoadCallback(drawChart2);
                    function drawChart2() {
                      var data2 = google.visualization.arrayToDataTable([
                        ["Element", "", { role: "style" }, { role: 'annotation' }  ],
                        ['x1',27, "#07618e",'27'],
                        ['x2',41, "#00905c",'41'],
                        ['x3',1.031, "#e19035",'1.031']
                      ]);

                        var view2 = new google.visualization.DataView(data2);
                              view2.setColumns([0, 1,
                                               { calc: "stringify",
                                                 sourceColumn: 3,
                                                 type: "string",
                                                 role: "annotation" },
                                               2]);

                      var options2 = { 
                        titlePosition: 'in', axisTitlesPosition: 'in',
                        hAxis: {showTextEvery: '1', textPosition: 'out'}, 
                        vAxis: {textPosition: 'out'},
                        legend: {position: 'none'},
                        backgroundColor: { fill:'transparent' },
                        is3D: true
                      };
                      var chart2 = new google.visualization.BarChart(document.getElementById('map_2_dg'));
                        google.visualization.events.addListener(chart2, 'ready', myReadyHandler2);
                        function myReadyHandler2(){$('text').attr('fill','#ffffff');}
                        chart2.draw(view2, options2);
                    }
                                    google.load("visualization", "1", {packages:["corechart"]});
                    google.setOnLoadCallback(drawChart3);
                    function drawChart3() {
                      var data3 = google.visualization.arrayToDataTable([
                        ["Element", "", { role: "style" }, { role: 'annotation' }  ],
                        ['x1',27, "#07618e",'27'],
                        ['x2',41, "#00905c",'41'],
                        ['x3',1.031, "#e19035",'1.031']
                      ]);

                        var view3 = new google.visualization.DataView(data3);
                              view3.setColumns([0, 1,
                                               { calc: "stringify",
                                                 sourceColumn: 3,
                                                 type: "string",
                                                 role: "annotation" },
                                               2]);

                      var options3 = { 
                        titlePosition: 'in', axisTitlesPosition: 'in',
                        hAxis: {showTextEvery: '1', textPosition: 'out'}, 
                        vAxis: {textPosition: 'out'},
                        legend: {position: 'none'},
                        backgroundColor: { fill:'transparent' },
                        is3D: true
                      };
                      var chart3 = new google.visualization.BarChart(document.getElementById('map_3_dg'));
                        google.visualization.events.addListener(chart3, 'ready', myReadyHandler3);
                        function myReadyHandler3(){$('text').attr('fill','#ffffff');}
                        chart3.draw(view3, options3);
                    }

Sanu0074 20.02.2015 17:42

Хоть в какую сторону копать?

tsigel 20.02.2015 17:58

Sanu0074,
Дебажить надо, так трудно сказать.

Sanu0074 21.02.2015 03:43

tsigel,
подскажите пожалуйста, как можно выявить ошибку? мне позарез необходимо

tsigel 21.02.2015 16:01

Sanu0074,
Надо смотреть что консоль пишет. Есть ссылка на страницу?

Sanu0074 22.02.2015 23:34

tsigel,
отображается только у первой карты а должно у каждой быть

tsigel 22.02.2015 23:50

Sanu0074,
Посмотрю завтра в течении дня

Sanu0074 23.02.2015 00:15

tsigel,
спасибо

MallSerg 23.02.2015 06:31

.content .map-stat .map-dg {
height: 200px;
width: 240px;
position: absolute;
right: 5px;
top: 5px;

}

Все диаграммы складываются стопкой друг над другом

Sanu0074 23.02.2015 19:13

MallSerg,
вот это я ступил) спасибо)


Часовой пояс GMT +3, время: 15:26.