// Comentar fuera de es.stackoverflow
// El documento debe contener el formulario de recogida de datos para el gráfico
var es = {};es.stackoverflow = true;

// obtener
function obtener() {
  obtenerGrafico();
  obtenerTabla();
}

// renderizar gráfico
function renderizarGrafico(options) {
  console.log('Grafico');
  if(typeof chart === 'undefined') {
    console.log(' - Generando gráfico');
    chart = new Highcharts.Chart(options);
  }else{
    console.log(' - Actualizando gráfico');
    //chart.update(options);
  }
}

// renderizar tabla
function renderizarTabla(html) {
  console.log('Tabla!');
  console.log(' - Renderizando tabla');
  $('#tableUsersss').html(html);
}

// obtener gráfico
function obtenerGrafico(){
        
        // Obtengo la fecha de inicio del gráfico
        var grafinicio = (es.stackoverflow) ? '07/08/2018' :  document.getElementById("txtgfinicio").value;

        // Obtengo la fecha de final del gráfico
        var graffin= (es.stackoverflow) ? '07/08/2018' : document.getElementById("txtgffin").value;

        // Obtengo la zona
        var zona = (es.stackoverflow) ? 'zona-ej' : document.getElementById("zonalabelidgraf").value;
        
        // Obtengo la agencia
        var agencia = (es.stackoverflow) ? 'agencia-ej' : document.getElementById("agencialabelidgraf").value;
        
        // Obtengo el tipo de observación
        var tipoobservacion = (es.stackoverflow) ? 'observacion-ej' : document.getElementById("tiobselabelidgraf").value;
        
        // Obtengo el producto
        var producto = (es.stackoverflow) ? 'producto-ej' : document.getElementById("prodlabelidgraf").value;

        // Info de consola
        console.log('Datos del gráfico:');
        console.log(' - F Ini: ' + grafinicio);
        console.log(' - F Fin: ' + graffin);
        console.log(' - Zona: ' + zona);
        console.log(' - Agencia: ' + agencia);
        console.log(' - Observacion: ' + tipoobservacion);
        console.log(' - Producto: ' + producto);

        // Validación de datos
        if(!grafinicio)
        {
            alert("Ingrese la Fecha inicio");
            return true;
        }
        if(!graffin)
        {
            return true;
            alert("Ingrese la Fecha Fin");
        }
        if(!zona||zona=='Seleccionar')
        {
            alert("Ingrese la Zona");
            return true;
        }
        if(!producto||producto=="Seleccionar")
        {
            alert("Ingrese el Producto");
            return true;
        }


        // Opciones para generar el grafico
        var options = {

            chart: {
                renderTo: 'containergrafico',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: ' '
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.point.name + '</b>: ' + this.y +'%';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>' + this.point.name + '</b>: ' + this.y +'%';
                        }
                    },
                    showInLegend: true
                }
            },
            series: []
        };
        
        // Datos de la petición
        // Url
        var url = "data/detalleobservaciongrafico.php";
        // data
        var data =
              "finicio="+grafinicio+
              "&ffin="+graffin+
              "&zona="+zona+
              "&agencia="+agencia+
              "&tipoobservacion="+tipoobservacion+
              "&producto="+producto;

        // Si es el ejemplo de stackoverflow no realizo la llamada a obtener gráfico,
        // en su lugar usaremos un ejemplo de la web de Highcharts para obtener la serie
        if(es.stackoverflow) {
            options.series = [{ data: [ ['EJ1', 25], ['EJ2', 80], ['EJ3', 50] ] }];
            renderizarGrafico(options);
        }else{
              
            // Usamos el método AJAX de jquery en vez GETJSON
            // Más información en caso de error
            $.ajax({
              dataType: "json",
              url: url,
              data: data,
              success: function(json){options.series = json; renderizarGrafico(options);},
              error: function(xhr) {
                // Control de errores más detallado
                console.log("Ups! Parece que tenemos problemas con la nave nodriza! No hemos podido obtener el gráfico.")
                console.log(" - resolution code:" + xhr.status);
                console.log(" - response:");
                console.log(xhr.responseText);
              }
            });
        }
}

// Obtener tabla
function obtenerTabla(){

        // Datos de la petición
        // Url
        var url = "Tablahistoricografico.php";    // Ojo, aquí no tienes data/... ¿Es correcto?
        // data
        // var data = "";                         // Aquí si necesio enviar algun dato, entiendo que se almacena en sesión segun tu ejemplo

        // Si es el ejemplo de stackoverflow no realizo la llamada a obtener la tabla
        // en su lugar incluire una tabla ejemplo en html
        if(es.stackoverflow) {
            renderizarTabla(" \
            <table style='width:100% border: 1px solid #000;'> \
            <tr> \
              <td>EJ1</td> \
              <td>25%</td> \
            </tr> \
            <tr> \
              <td>EJ2</td> \
              <td>80%</td> \
            </tr> \
            <tr> \
              <td>EJ</td> \
              <td>50%</td> \
            </tr> \
          </table> \
            ");
        }else{
              
            // Usamos el método AJAX de jquery en vez GETJSON
            // Más información en caso de error
            $.ajax({
              dataType: "html",
              url: url,
              //data: data,
              success: function(html){renderizarTabla(html);},
              error: function(xhr) {
                // Control de errores más detallado
                console.log("Ups! Parece que tenemos problemas con la nave nodriza! No hemos podido obtener la tabla!")
                console.log(" - resolution code:" + xhr.status);
                console.log(" - response:");
                console.log(xhr.responseText);
              }
            });
        }
}

table, th, td {
    border: 1px solid black;
    width: 100%;
}

<!-- highcharts -->
<script src="https://code.highcharts.com/highcharts.js"></script>

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<!--Form -->
<!-- No implementado en el ejemplo -->

<!-- Boton generar gráfico -->
<button type="button" name="btngenerargraficoporterritorio11" class="btn btn-primary" onclick="obtener();">Generar Gráfico</button>

<!-- Contenedor del gráfico -->
<div id="containergrafico"></div>

<!-- Contenedor de la tabla -->
<div id="tableUsersss"></div>


<!-- 
  Nota: Un contenedor de gráfico debe ser independiente a uno de tabla, no puede uno contener a otro, o se superpondría el resultado
-->