1

Necesito que al cambiar la opción de un select cambie el titulo de Highcharts automáticamente. He estado probando varias formas de mostrarlo y no he podido dar con la configuración correcta.

HTML

<tr>  
  <td width="150" align="right"><font face="arial"><b>AÑO</b></font></td>
  <td>
    <select name="ANO_ACTA" id="ANO_ACTA" autofocus="autofocus">
      <option>Seleccione...</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
      </select>
  </td>
</tr>

<tr>
  <td width="150" align="right"><font face="arial"><b>MES</b></font></td>
  <td>
    <select name="MES_ACTA" id="MES_ACTA">
      <option>Seleccione...</option>
      <option value="ENERO">ENERO</option>
      <option value="FEBRERO">FEBRERO</option>
      <option value="MARZO">MARZO</option>
      <option value="ABRIL">ABRIL</option>
   </select>
</td>   

SCRIPT

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container',
    type: 'spline'
},

title: {
  text: '<b></b>Seleccione y Año y Mes...</b>'
},

subtitle: {
    text: 'Informe Rollout Mensual'
},

series: [

{
  name : "VALLE",
  data: [],
  }
}
}]
});

$( "#MES_ACTA" ).change(function() {
var ANO_ACTA = $('#ANO_ACTA').val();
var MES_ACTA = $('#MES_ACTA').val();

$.ajax({
  url: "procesar.php",
  method: "POST",
  data: { ANO_ACTA: ANO_ACTA, MES_ACTA: MES_ACTA},
  dataType: "json"
})

.done(function(data) {

  console.log(data);

  chart.series[0].setData(data[0]); 

    });
  });
});
1
  • ¿Y el código HTML del select? Commented el 25 oct. 2017 a las 20:47

1 respuesta 1

1

Por un lado necesitas acceder al contenido de la opción seleccionada con jQuery.text():

 $("#id option:selected").text();

Donde id es el atributo id del <select>.

Y luego necesitas cambiar el título usando chart.setTitle():

chart.setTitle({text: "Seleccionado: <b>" + $("#id option:selected").text() + "</b>"}); 

Presuponiendo que es el id que espera el evento del cambio:

$( "#MES_ACTA" ).change(function() {
    chart.setTitle({text: "Seleccionado: <b>" + $("#MES_ACTA option:selected").text() + "</b>"});
    /* ... */
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.