bensholdice's avatar

5.6, webpack & plot.ly

I'm struggling to get plot.ly javascript charting working. My charts display fine if I use the plotly CDN in my app.blade.php:

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

and then the necessary javascript in my blade:

<script>
    var url = '{{ route('chart_api_data') }}';
    Plotly.d3.json(url, function (error, chartdata) {
        if (error) return console.warn(error);

        var layout = {
            title: 'Node Events - last 7 days',
            barmode: 'stack'
        };

        var data = [];
        for (var i = 0; i < chartdata.nodelist.length; i++) {
            var trace = {
                type: "bar",
                name: chartdata.nodelist[i],
                x: chartdata['dates'],
                y: chartdata[chartdata.nodelist[i]]
            };
            data.push(trace);
        }

        Plotly.newPlot('crash7d', data, layout);
    });

</script>

So far all good. But i'd prefer to manage the assets, so I install plot.ly via npm:

npm install plotly.js --save

and add this to my webpack.mix.js

mix.js('./node_modules/plotly.js/dist/plotly.min.js', 'public/js');

then update my app.blade.php:

<script src="{{ asset('js/plotly.min.js')}}"></script>

I run npm run dev, then reload my page and see no graph, with a javascript warning: Uncaught ReferenceError: Plotly is not defined

I'm missing a step, likely something related to a javascript import/require, but a few hours of tinkering with edits to app.js have not solved my issue. Can someone more capable please help me out?

Thanks in advance!

0 likes
2 replies

Please or to participate in this conversation.