Сброс диаграммы, визуализация API google earth

Question

Я работаю над приложением, чтобы показать высоту маршрута из файла gpx. Я использую визуализацию API из Google для построения результатов, в частности, я использую колонку.

Когда я читаю один маршрут, диаграмма отображается правильно, но когда я читаю второй gpx, на диаграмме показаны два маршрута одновременно и так далее. Я хочу показать только один, как я могу сбросить диаграмму, когда я построю один маршрут?

Вот весь код:

//Variables 
var map=null; 
var poly; 
var rutaActual; 
var chart; 
var mousemarker = null; 
var results={"latitud": [], "longitud": [],"elevacion": []}; 

google.maps.event.addDomListener(window, 'load', initialize); 

google.load("visualization", "1", {packages: ["columnchart"]}); 
google.setOnLoadCallback(initialize); 


/** 
* Inicializar Google Maps 
*/ 
function initialize() { 

var myLatlng = new google.maps.LatLng(43.373112,-5.669632); 

var mapOptions = { 
      zoom: 9, 
      center: myLatlng, 
      mapTypeControl: false, 
      mapTypeId: google.maps.MapTypeId.TERRAIN, 
      mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
       }, 

       zoomControlOptions: { 
        position: google.maps.ControlPosition.LEFT_CENTER 
       }, 

       panControlOptions: { 
        position: google.maps.ControlPosition.LEFT_CENTER 
       } 

    }; 


    map = new google.maps.Map(document.getElementById('mapa'),mapOptions); 

    inicializarElevacionMaps();  

} 


function inicializarElevacionMaps(){ 

chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 

    google.visualization.events.addListener(chart, 'onmouseover', function(e) { 

     if (mousemarker == null) { 
      mousemarker = new google.maps.Marker({ 
      position: new google.maps.LatLng(results.latitud[e.row],results.longitud[e.row]), 
      map: map, 
      icon: "http://maps.google.com/mapfiles/ms/icons/green-dot.png" 
     }); 
     } else { 
     mousemarker.setPosition(new google.maps.LatLng(results.latitud[e.row],results.longitud[e.row])); 
     } 


    }); 
} 


/** 
* Cargar rutas GPX 
*/ 
function rutaGPX(nombre){ 

rutaActual = nombre; 

if(poly){ 

    poly.setMap(null); 

} 

iCl.ajax({ 
    type: "GET", 
    url: "rutas/ficheros_gpx/"+nombre+".gpx", 
    dataType: "xml", 
    success: function (xml) { 

     var points = []; 
     poly = new google.maps.Polyline(); 
     var bounds = new google.maps.LatLngBounds(); 
     iCl(xml).find("trkpt").each(function() { 
       var lat = iCl(this).attr("lat"); 
       var lon = iCl(this).attr("lon"); 
       var ele = iCl(this).find("ele").text(); 
       var p = new google.maps.LatLng(lat, lon); 
       points.push(p); 
       bounds.extend(p); 
       results.latitud.push(lat); 
       results.longitud.push(lon); 
       results.elevacion.push(ele); 

     }); 

     poly = new google.maps.Polyline({ 
       // use your own style here 
       path: points, 
       strokeColor: "#FE2E2E", 
       strokeOpacity: .7, 
       strokeWeight: 4 
     }); 

     poly.setMap(map); 
     map.fitBounds(bounds); 

     //Draw chart 
     plotElevation(results); 

    } 
    }); 


} 

//Takes an array of ElevationResult objects, draws the path on the map 
// and plots the elevation profile on a ColumnChart 

function plotElevation(results) { 
    var elevations=[]; 

    elevations = results.elevacion; 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Sample'); 
    data.addColumn('number', 'Elevation'); 
    for (var i = 0; i < elevations.length; i++) { 
    data.addRow(['', parseInt(elevations[i])]); 
    } 

    document.getElementById('chart_div').style.display = 'block'; 
    chart.draw(data, { 
    width: 512, 
    height: 200, 
    legend: 'none', 
    titleY: 'Elevation (m)', 
    focusBorderColor: '#00ff00' 
    }); 
} 

Здесь изображение chart

Answer 1

Я думаю, что самый простой способ будет сделать следующее:

var chart = app.getElementById('chart_div'); 
chart.clearChart(); 

Перед конкретизации вашей карты внутри inicializarElevacionMaps().

См: https://developers.google.com/chart/interactive/docs/gallery/columnchart#Methods