Jqplot - Cannot read property 'startAngle' of undefined

Question

I'm trying to display a piechart via jqPlot plugin in Laravel.Jqplot scripts are compiled into main app.js file with laravel mix.

Errors that I'm getting:

jQuery.Deferred exception:
Cannot read property 'startAngle' of undefined TypeError: Cannot read property 'startAngle' of undefined (at doDraw)

doDraw function (from app.js):

function doDraw(rad) {
            // Fix for IE and Chrome that can't seem to draw circles correctly.
            // ang2 should always be <= 2 pi since that is the way the data is converted.
            // 2Pi = 6.2831853, Pi = 3.1415927
            if (ang2 > 6.282 + this.startAngle) {     **it fails on this if statement**
                ang2 = 6.282 + this.startAngle;
                if (ang1 > ang2) {
                    ang1 = 6.281 + this.startAngle;
                }
            }
            // Fix for IE, where it can't seem to handle 0 degree angles.  Also avoids
            // ugly line on unfilled pies.
            if (ang1 >= ang2) {
                return;
            }

            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.strokeStyle = color;
            ctx.lineWidth = lineWidth;
            ctx.arc(0, 0, rad, ang1, ang2, false);
            ctx.lineTo(0, 0);
            ctx.closePath();

            if (fill) {
                ctx.fill();
            } else {
                ctx.stroke();
            }
        }

Code for the piechart:

<div id="pie_seminar{{ $seminar->id }}" class="piechart"></div>

<script>
    var id, plot;
    $(document).ready(function () {
        id = '{{ $seminar->id }}';
        var plot{{ $seminar->id }} = $.jqplot('pie_seminar' + id, [[['Attempted',{{ $statisticResult['incomplete'] }}], ['Completed',{{ $statisticResult['completed'] }}]]], {
            gridPadding: {top: 1, right: 1, bottom: 1, left: 1},
            grid: {
                drawBorder: false,
                drawGridlines: false,
                background: '#ffffff',
                shadow: false
            },
            seriesDefaults: {
                renderer: $.jqplot.PieRenderer,

                rendererOptions: {
                    sliceMargin: 3,
                    // rotate the starting position of the pie around to 12 o'clock.
                    startAngle: -90,
                    showDataLabels: true,
                    diameter: null,
                    padding: 8,
                    margin: 1
                },
                trendline: {show: false}
            },
            legend: {
                show: false,
            },
            highlighter: {
                tooltipContentEditor: function (str, seriesIndex, pointIndex) {
                    return str;
                },
                show: false,
                useAxesFormatters: false,
                tooltipFormatString: '%s'
            },
            seriesColors: ["#cccccc", "#aaccff", "#F5811F"]
        });
    });
</script>

I managed to display the piechart plugin by manually importing the scripts into the public folder (which is not a solution, since all scripts need to be compiled into one file), so that shows that code should be ok.

Recompiling assets with laravel mix did not solve the problem. Code keeps falling at the startAngle undefined error. I'm losing my mind with jqplot. What is the issue here?

Answer 1

Since the compiled script in the app.js was falling at doDraw function (startAngle variable was inaccessible), modifying the doDraw function did the thing. startAngle variable was declared globally in doDraw function, and in the blade template also as startAngle, so that the variable gets accessed globally for each generated jqPlot pie chart. Of course, after compiling the assets via npm run dev/production.