I created a field to choose a label for a highchart on wordpress backoffice like this:

$fields = array(

        array(
            'label' => esc_html( 'Gráfico' ),
            'description' => esc_html( 'Escolha o gráfico previamente criado' ),
            'attr'    => 'chart',
            'type'    => 'select',
            'options' => $charts,
        ),
        array(
            'label' => esc_html( 'Legenda de rodapé' ),
            'description' => esc_html( 'Escolha a legenda para o gráfico' ),
            'attr' => 'footer_caption',
            'type' => 'text',
            'options' => $charts,
        ),

    );

And i want to pass whatever is typed in footer_caption to this js that i took from this fiddle: http://jsfiddle.net/abenrob/ur02w4j5/

    Highcharts.setOptions({
  chart: {
          type: 'column',
          events: {
              load: function () {
                  var label = this.renderer.label("This text will adjust to chart resizing " +
                      "and redraws and will be visible on exported images.")
                  .css({
                      width: '400px',
                      fontSize: '9px'
                  })
                  .attr({
                      'r': 2,
                      'padding': 5
                  })
                  .add();

                  label.align(Highcharts.extend(label.getBBox(), {
                      align: 'center',
                      x: 0, // offset
                      verticalAlign: 'bottom',
                      y: 0 // offset
                  }), null, 'spacingBox');

              }
          },
          marginBottom: 120
      },
      legend: {
        align: 'center',
        verticalAlign: 'bottom',
        y: -30
    },

So that instead of that var label = this.renderer.label("This text will adjust to chart resizing " +
"and redraws and will be visible on exported images.")
i get the value of footer_caption.

I was thinking of something like this:

var labelText = document.querySelectorAll('[footer_caption]').text()
var label = this.renderer.label(labelText)

But it doesn’t work and im very new to javascript.

Read more here: Pass a textfield value from php to javascript


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: