0

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="https://www.gstatic.com/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"]
  • 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 Nov 23 '18 at 2:49
  • I've tried adding the code in the body and the chart won't render :( – user1726126 Nov 23 '18 at 3:23
  • Also, you would be better off with something like [chart values="75,20,5"] – Tom J Nowell Nov 23 '18 at 16:52
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.org/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...)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.