получение данных электронной таблицы для массива данных диаграммы - PullRequest
Новая
       31

получение данных электронной таблицы для массива данных диаграммы

1 голос
/ 29 марта 2020

Хотя я нашел похожие посты в другом месте, я все еще не могу решить свою проблему. Я хочу загрузить местоположения на боковой панели html в электронной таблице Google, но единственный пример, который я нахожу, это жестко закодированные местоположения.

Вот пример на странице HTML (я удалил ключ API): этот работает для меня. 

<body>

    <div class="container">   
        <div id="map_div" style="width: 500px; height: 500px"></div>
      </div> <!-- CLOSE CONTAINER -->

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

      google.charts.load("current", {
          "packages":["map"],
          "mapsApiKey": "xxxx"
      });

      google.charts.setOnLoadCallback(drawChart);
      function drawChart(arrayToData) {

        var data = new google.visualization.arrayToDataTable(

        [["Lat", "Long","Nom"],
           [45.7660889, 4.794056299999999, "Person1"], 
           [45.8167227, 4.8341048, "Person2"], 
           [45.7796433, 4.8037871, "Person3"], 
           [45.7780849, 4.921768399999999, "Person4"]]
           );

        var map = new google.visualization.Map(document.getElementById('map_div'));

        map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });

      }//function drawChart() {

    </script>

  </body>

И мне бы хотелось, чтобы что-то выглядело так, когда местоположения данных не жестко закодированы, а получены из данных электронной таблицы: 

      google.charts.setOnLoadCallback(drawChart);

      var ss = SpreadsheetApp.openByUrl("xxxx");
      var datatable = ss.getRange("listNamesAdresses");

      function drawChart(arrayToData) {

        var dataToArray=document.getElementById("listNamesAdresses");
        var data = new google.visualization.arrayToDataTable(
                         dataToArray
                    );

        var map = new google.visualization.Map(document.getElementById('map_div'));

       map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });

      }//function drawChart() {

Я знаю, что это не так правильно, но я пробовал много комбинаций, до сих пор не могу ее решить. Ваша помощь приветствуется!

Вот прекрасный пример того, что я сделал: Ссылка на копию моего теста карты

Я адаптировал ее из своей таблицы, но вышел моей квоты на мой ключ API, поэтому я пока не могу его проверить. Я надеюсь, что это будет хорошо! Заранее большое спасибо

РЕДАКТИРОВАТЬ 2:

Я следовал советам ziganotschka (большое спасибо за ваше время): я не смог применить индекс HtmlCreateOutputFromFil (". html "), поэтому я придерживался своего кода для отображения боковой страницы Html. В остальном: теперь у меня есть карта (первая победа!). Но он говорит: «нет точек данных для отображения».

Я проверил значения, возвращаемые функцией getAddresses, кажется, все в порядке. Чтобы мне было проще, я изменил функцию на более простую: getGeoCodesAndNames. Этот возвращает, как говорится, широту, долготу и имя геокода.

Вот мой новый пример кода и ссылка на новую версию электронной таблицы: Gs-code: 

function getGeoCodesAndNames(){
  //get addresses and names list
  var namesAddresses=ss.getRange("ListNamesAddresses");
  var a_values=namesAddresses.getValues();  

  Logger.log(a_values);
  /* returns
  [[Lat, Lon, Name], 
  [45.7660889, 4.79405629999999, person1], 
  [45.8167227, 4.8341048, person2], 
  [45.7796433, 4.8037871, person3], 
  [45.7780849, 4.921768399999999, person4]]  
  */
  return a_values;

}//function getGeoCodesAndNames(){



function testMap2(){   

  var template = HtmlService.createTemplateFromFile("carte2");  
  var html = template.evaluate();
   html.setTitle("Display Map 2").setHeight(550).setWidth(550);
  SpreadsheetApp.getUi().showModalDialog(html, "Locations")

}//function testCarte1(){

и HTML код: 

<script type="text/javascript">    

      window.onload = google.script.run.withSuccessHandler(onSuccess).getGeoCodesAndNames();

      function onSuccess (arrayToData){

          google.charts.load("current", {
             "packages":["map"],
             "mapsApiKey": "AIzaSyC4WPcWGMZRoqSAfZ0F4RzvWtN6Jy7hmdE"
                           });                  

          google.charts.setOnLoadCallback(drawChart);      

          function drawChart() {      
            var data = google.visualization.arrayToDataTable(arrayToData);        
            var map = new google.visualization.Map(document.getElementById('map_div'));       
            map.draw(data, {
              showTooltip: true,
              showInfoWindow: true
                    });        
          }// function drawChart() {

      }//function onSuccess (arrayToData){


    </script>

А вот ссылка на новую версию электронной таблицы: TestMap2

Нужно ли опубликовать sh как веб-приложение, если я просто хочу иметь дополнительную страницу? В предыдущих проектах, которые у меня были, я мог добавить данные из боковой страницы в электронную таблицу без нее. Противоположными способами, можете ли вы подтвердить, что мне нужно это сделать? Я пытался, ничего не изменил в моем текущем результате: возможно, я сделал что-то не так.

Еще раз большое спасибо за вашу помощь!

РЕДАКТИРОВАТЬ 3: Я наконец получил его : Моя функция геокодирования / адреса не возвращала правильный формат для координат, из-за двух вещей: 1) я использую французский язык, ie точка заменена запятыми в числах 2) мне пришлось добавить еще один "" " Символ в начале и конце каждой строковой части в массиве.

Вот правильная функция (может быть улучшена, но ... выполняет работу): 

function getGeoCodesAndNames(){
  //get addresses and names list
  var namesAddresses=ss.getRange("ListNamesAddresses");
  var a_values=namesAddresses.getValues();  

  for (var i=0;i<a_values.length;i++){   
    for (var j=0;j<a_values[0].length;j++){      
      var value=a_values[i][j];
      if (typeof value == "string"){
        a_values[i][j]="\"" + value + "\"";   
      }
    }    
  }      
  return a_values;      
}//function getGeoCodesAndNames(){

Большое спасибо люди, которые мне помогли!

1 Ответ

0 голосов
/ 30 марта 2020

Чтобы объединить использование API визуализации в Javascript с получением данных электронной таблицы с помощью скрипта Apps - вам нужно использовать WebApp

. Использовать google.script.run для передачи данных со стороны сервера в клиентская

Пример:

code.gs 

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index.html");
}

function getDatafromSheet(){
  var ss = SpreadsheetApp.openByUrl("xxxx");
  // getNamedRanges()[0] works if you have only one named range
  var datatable = ss.getNamedRanges()[0].getRange().getValues();
  return datatable;  
}

index. html

<body>
    <div class="container">   
        <div id="map_div" style="width: 500px; height: 500px"></div>
      </div> <!-- CLOSE CONTAINER -->

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

   window.onload = google.script.run.withSuccessHandler(onSuccess).getDatafromSheet();

   function onSuccess (arrayToData){
      google.charts.load("current", {
          "packages":["map"],
          "mapsApiKey": "AIzaSyDCKzjezYeUDd2ugtFnzokCIpV1YpLmmEc"
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.arrayToDataTable(arrayToData);

      var map = new google.visualization.Map(document.getElementById('map_div'));

        map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });

      }
  }
    </script>
  </body>
...