I’m trying to add a footer label to highcharts on wpdatatables wordpress plugin like in this fiddle: http://jsfiddle.net/abenrob/ur02w4j5/

This is the js i have for the label:

    Highcharts.setOptions({
  chart: {
    type: 'column',
    events: {
        load: function () {
            var labelText = getElementById('set_footer_label').text()
            var label = this.renderer.label(labelText)
            .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
},

And this is how i created the field where we set the label for each graph:

<tr>
      <td>
         <label for="set_caption_grid"><span><strong><?php _e('Footer label settings','wpdatatables');?></strong></span></label>
  </td>
   <td>
           <label for="set_footer_label"><?php _e('Footer label','wpdatatables'); ?></label> <input type="text" id="set_footer_label" value="" />
       </td>
  </tr>

Now im trying to save the value that the user will put on that field but for that ill have to edit files from the plugin. is there an easier way to achieve what i want without having to hack the plugin? (backoffice users being able to set/edit a footer label for the charts they create)

Read more here: how to create a new field for highcharts footer labels


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: