use add_action(‘wp_head’) in a widget

Hi I cant seem to find an answer out there to solve my issue.

what i am trying to do is fix this validation error ‘Element link is missing required attribute property.’

that is occurring because the style sheet isn’t in the head. what i wanted to do was use the wp_head action to place it into the header but as soon as i add the code to the widget i have the javascript breaks completely so i dont know how to add a style to the head?

this is the code i am using at the moment:

wp_register_script('piechart', get_template_directory_uri() . '/js/jquery.easypiechart.min.js', '', '2.0.4');
            wp_enqueue_script('piechart');
            wp_register_style('piechart-css', get_template_directory_uri() . '/css/jquery.easy-pie-chart.css');
            wp_enqueue_style('piechart-css');

what i am trying to do is get something like this: (this code is all in the widget function)

add_action('wp_head', 'pieChartScripts');
            function pieChartScripts() {
                wp_register_style('piechart-css', get_template_directory_uri() . '/css/jquery.easy-pie-chart.css');
                wp_enqueue_style('piechart-css');
            }

or i can write the whole link tag out etc but doing that would add it multiple times.

EDIT:

here is my widget function code:

public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );
        $barOrPie = apply_filters( 'barOrPie', $instance['barOrPie'] );
        $graphTitle = apply_filters( 'graph1_title', $instance['graph1_title'] );
        $graphQuote = apply_filters( 'graph1_quote', $instance['graph1_quote'] );
        $graph1Figure = apply_filters( 'graph1_figure', $instance['graph1_figure'] );
        $graph1Colour = apply_filters( 'graph1_colour', $instance['graph1_colour'] );
        $graph2Figure = apply_filters( 'graph2_figure', $instance['graph2_figure'] );
        $graph2Colour = apply_filters( 'graph2_colour', $instance['graph2_colour'] );
    ?>

    <?php
        $progressSlector = $args['widget_id'];

        echo $args['before_widget'];
        if ( ! empty( $title ) ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }

        if($barOrPie == 'progressBar') { ?>
            <script type="text/javascript">
                function progress(percent, $element) {
                    var progressBarWidth = percent + '%';
                    $element.find('div').animate({ width: progressBarWidth }, 500).html('<p>' + percent + "<sup>%&nbsp;</sup>" + '</p>');
                }
                jQuery(document).ready(function () {
                    progress(<?php echo $graph1Figure ?>, jQuery("#<?php echo $progressSlector ?> .progressBar1"));
                });
            </script>

        <?php
            echo '<div class="progress_containers">';
            echo '<div class="progressbar ' . $graph1Colour . '-progress progressBar1"><div></div></div>';
            if( !empty ($graph2Figure) )  {
                echo '<div class="progressbar ' . $graph2Colour . '-progress progressBar2"><div></div></div>';
            ?>
                <script type="text/javascript">
                    jQuery(document).ready(function () {
                        progress(<?php echo $graph2Figure ?>, jQuery("#<?php echo $progressSlector ?> .progressBar2"));
                    });
                </script>
            <?php
            }
            echo '</div>';
         } else {
            add_action('wp_head', 'pieChartScripts');
            function pieChartScripts() {
                wp_register_style('piechart-css', get_template_directory_uri() . '/css/jquery.easy-pie-chart.css');
                wp_enqueue_style('piechart-css');
            }


            wp_register_script('piechart', get_template_directory_uri() . '/js/jquery.easypiechart.min.js', '', '2.0.4');
            wp_enqueue_script('piechart');


            switch($graph1Colour) {
                case 'purple':
                    $pieColor="#78267B";
                    break;
                case 'yellow':
                    $pieColor="#ffc000";
                    break;
                case 'green':
                    $pieColor="#89bf3c";
                    break;
                default:
                    $pieColor="#78267B";
            }

            echo '<div class="chart chart1" data-percent="' . $graph1Figure . '"><span style="color: ' . $pieColor . ';">' . $graph1Figure . '<sup>%</sup></span></div>';

            if( !empty ($graph2Figure) )  {
                switch($graph2Colour) {
                    case 'purple':
                        $pieColor2 = '#78267B';
                        break;
                    case 'yellow':
                        $pieColor2 = '#ffc000';
                        break;
                    case 'green':
                        $pieColor2 = '#89bf3c';
                        break;
                    default:
                        $pieColor2 = '#78267B';
                }

                echo '<div class="chart chart2" data-percent="' . $graph2Figure . '"><span style="color: ' . $pieColor2 . ';">' . $graph2Figure . '<sup>%</sup></span></div>';
            }
            ?>
            <script type="text/javascript">
                jQuery(function() {
                    jQuery('#<?php echo $progressSlector ?> .chart1').easyPieChart({
                        barColor: "<?php echo $pieColor; ?>",
                        lineWidth: 31,
                        lineCap: 'square',
                        trackColor: '#e9ecec',
                        scaleColor: false,
                        size: 143
                    });

                    jQuery('#<?php echo $progressSlector ?> .chart2').easyPieChart({
                        barColor: "<?php echo $pieColor2; ?>",
                        lineWidth: 31,
                        lineCap: 'square',
                        trackColor: '#e9ecec',
                        scaleColor: false,
                        size: 143
                    });
                });
            </script>
        <?php
        }

        echo '<h5 class="' . $graph1Colour . '-title">' . $graphTitle . '</h5>';
        echo '<p>"' . $graphQuote . '"</p>';

        echo $args['after_widget'];
    }

Thanks for anyones help

You can call wp_enqueue_script() directly in your Widget output, and WordPress will enqueue the script. No need to add it to a callback. Try changing this:

else {
    add_action('wp_head', 'pieChartScripts');
    function pieChartScripts() {
        wp_register_style('piechart-css', get_template_directory_uri() . '/css/jquery.easy-pie-chart.css');
        wp_enqueue_style('piechart-css');
    }

    wp_register_script('piechart', get_template_directory_uri() . '/js/jquery.easypiechart.min.js', '', '2.0.4');
    wp_enqueue_script('piechart');

// etc
}

…to this:

else {
    wp_register_style('piechart-css', get_template_directory_uri() . '/css/jquery.easy-pie-chart.css');
    wp_enqueue_style('piechart-css');

    wp_register_script('piechart', get_template_directory_uri() . '/js/jquery.easypiechart.min.js', '', '2.0.4');
    wp_enqueue_script('piechart');

// etc
}