title: Reset Chart, API visualization google earth
body: <p>I'am working on aplication to show the elevation of a route from a gpx file. I use the API visualization from google to plot the results, in particular i'm using the columnchart.</p>
  
  <p>When I read one route, the chart appears correctly but when I read the second gpx, the chart shows the two routes at once and so on. I will want to show only one, how can I reset the chart when I plot one route?</p>
  
  <p>Here all the code:</p>
  
  <pre><code>//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 &lt; 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'
    });
  }
  </code></pre>
  
  <p>Here an image of <a href="http://i59.tinypic.com/344p1ep.jpg" rel="nofollow">chart</a>        </p>