mardi 7 septembre 2021

Laravel undefined uPlot library

I'm trying to use the library uPlot into my view. But I'm getting an error of Uncaught ReferenceError: uPlot is not defined it seems that it can't find the uPlot library but this library is already loaded in the bootstrap as shown below

// resources/js/bootstrap.js

window._ = require('lodash');
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('admin-lte');

    require('../../node_modules/uplot/dist/uPlot.iife.min');

} catch (e) {}

Now the chart.js is loaded in the resource/js/app.js as shown below

require('./bootstrap');
require('./chart');

Now in my chart.js I have this

$(function () {

    function getSize(elementId) {
        return {
          width: document.getElementById(elementId).offsetWidth,
          height: document.getElementById(elementId).offsetHeight,
        }
      }

  let data = [
    [0, 1, 2, 3, 4, 5, 6],
    [28, 48, 40, 19, 86, 27, 90],
    [65, 59, 80, 81, 56, 55, 40]
  ];

  const optsLineChart = {
    ... getSize('lineChart'),
    scales: {
      x: {
        time: false,
      },
      y: {
        range: [0, 100],
      },
    },
    series: [
      {},
      {
        fill: 'transparent',
        width: 5,
        stroke: 'rgba(60,141,188,1)',
      },
      {
        stroke: '#c1c7d1',
        width: 5,
        fill: 'transparent',
      },
    ],
  };

  let lineChart = new uPlot(optsLineChart, data, document.getElementById('lineChart'));
  window.addEventListener("resize", e => {
    lineChart.setSize(getSize('lineChart'));
  });
});

Now the element lineChart is already defined but it's throwing an error when the script reaches the line new uPlot. I checked the pub/js/app.js and the uPlot was successfully imported. As well as the chart.js is included in the app.js. But one this I noticed is the script of chart.js is added at the very top of the app.js file while the uPlot is added at the bottom part.

How can I fix this? It doesn't seem like the uPlot library is being read or loaded in the chart.js file



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire