How can I pass a shortcode value to the head in wordpress functions.php|Programmer puzzle solving

I'm trying to create a shortcode for charts on wordpress posts. So far I've got the shortcode working and I can see the shortcode values are being passed through, but what I need to know is how to pass through those values to the so Google Charts will work correctly. Here's the code that I have so far:

function chart_shortcode($atts) {

    $a = shortcode_atts( array(
   'value1' => '',
   'value2' => '',
   'value3' => ''
  ), $atts );

 return '<div id="donut" style="width: 745px; height: 500px;"></div>';
}

add_shortcode('chart', 'chart_shortcode');



function header_metadata() {

    // Post object if needed
    // global $post;

    // Page conditional if needed
    // if( is_page() ){}

  ?>

<script type="text/javascript" src=".js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['value1',     75],
          ['value2',     20],
          ['value3',     5],
        ]);

        var options = {
          title: 'Energy Breakdown',
          pieHole: 0.4,
          pieSliceTextStyle: {
            color: 'white',
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut'));
        chart.draw(data, options);
      }
</script>

<?php

}
add_action( 'wp_head', 'header_metadata' );


?>

So what I am after is a way to tell the chart the values of value1,2,3 here instead of 75, 20 and 5:

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Effort', 'Amount given'],
      ['value1',     75],
      ['value2',     20],
      ['value3',     5],
    ]);

The shortcode that works is:

[chart value1="75" value2="20" value3="5"]

function chart_shortcode($atts) {

    $a = shortcode_atts( array(
   'value1' => '',
   'value2' => '',
   'value3' => ''
  ), $atts );

 return '<div id="donut" style="width: 745px; height: 500px;"></div>';
}

add_shortcode('chart', 'chart_shortcode');



function header_metadata() {

    // Post object if needed
    // global $post;

    // Page conditional if needed
    // if( is_page() ){}

  ?>

<script type="text/javascript" src="https://www.gstatic/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['value1',     75],
          ['value2',     20],
          ['value3',     5],
        ]);

        var options = {
          title: 'Energy Breakdown',
          pieHole: 0.4,
          pieSliceTextStyle: {
            color: 'white',
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut'));
        chart.draw(data, options);
      }
</script>

<?php

}
add_action( 'wp_head', 'header_metadata' );


?>

So what I am after is a way to tell the chart the values of value1,2,3 here instead of 75, 20 and 5:

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Effort', 'Amount given'],
      ['value1',     75],
      ['value2',     20],
      ['value3',     5],
    ]);

The shortcode that works is:

[chart value1="75" value2="20" value3="5"]

Share Improve this question asked Nov 23, 2018 at 2:22 user1726126 1

1 Does the JS that draws the chart really have to go in the head? Could you not put the loader in the head then output the script somewhere else? – Tom J Nowell ♦ Commented Nov 23, 2018 at 2:49
I've tried adding the code in the body and the chart won't render :( – user1726126 Commented Nov 23, 2018 at 3:23
Also, you would be better off with something like [chart values="75,20,5"] – Tom J Nowell ♦ Commented Nov 23, 2018 at 16:52

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

Shortcodes, as I understand them, are to be used inside content of pages/posts, and (with 4.9) widgets. They aren't supported inside other spots on the page, only in the page/post/widget content.

From the Codex: https://codex.wordpress/Shortcode

[WP] only expands the shortcodes within the content of a Post, Page, or custom post type.

But I don't think your code should be setting a shortcode. Perhaps it should be setting a global variable that will be used elsewhere. (But it is late, and I am under the influence of excessive turkey...)

Programmer puzzle solving

How can I pass a shortcode value to the head in wordpress functions.php

1 Answer 1

Articles related to this article

comment list (0)