Guide on incorporating amcharts into a Nuxt application

I am attempting to integrate amCharts into my Nuxt project.

Within the svg-map.vue component, I have added the following code snippet:

head() {
    return {
      script: [
        { src: 'js/amcharts/core.js' }
      ]
    };
  },

However, I encountered the following error:

Cannot read property 'bind' of undefined

(intermediate value)(intermediate value).push is not a function

Upon inspecting this in Chrome, it points to an error with the push function on the line below:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["pages_coutrypedia"],{

Does anyone have insights on what might be causing this issue?

Answer №1

To implement a custom plugin in Nuxt, create a file named plugins/amcharts.js

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import am4themes_dark from "@amcharts/amcharts4/themes/dark";
import Vue from "vue";
Vue.prototype.$am4core = () => {
 return {
  am4core,
  am4charts,
  am4themes_animated,
  am4themes_dark
 }
}

Next, add the following to your nuxt.config.js file:

plugins: [
    {
        src: '~/plugins/amCharts.js',
        ssr: false
    }
],

In your .vue component file, use the mounted hook to access the AmCharts variables:

mounted() {
 let {am4core, am4charts, am4themes_animated, am4themes_dark} = this.$am4core();
}

Answer №2

At last, the solution has been found.

After a thorough search, it was discovered that nuxt and amcharts were utilizing different versions of webpack. The older version of webpack utilized webpackJsonp as a function while the newer version used it as an array.

Initially, the amcharts js loaded and declared webpackJsonp as a function. Subsequently, when nuxt tried to use it by calling the push function, an error occurred.

To address this issue, a custom jsonpFunction string was provided in the webpack config within the nuxt.config file:

extend(config, ctx) {
  config.output = {
    jsonpFunction: 'webpackLoad'
  };
}

However, this adjustment did not resolve the error as expected. When running nuxt, localhost failed to load and only displayed a waiting message.

As a workaround, the amchart libraries were downloaded and instances of webpackJsonp were replaced with webpackLoad throughout. This successfully resolved the problem.

Edit:

The modules were downloaded using npm as specified here

Subsequently, the following code was employed:

if (process.browser) {
  var am4core = require('@amcharts/amcharts4/core'),
    am4maps = require('@amcharts/amcharts4/maps'),
    am4geodata_world = require('@amcharts/amcharts4-geodata/worldIndiaHigh').default,
    am4themes_animated = require('@amcharts/amcharts4/themes/animated').default;
}

Then, in the mounted hook:

mounted() {
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create(this.$el, am4maps.MapChart);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for modifying JSON property names during the parsing process

As outlined in the JSON.parse documentation, a reviver function can be utilized to modify the value of each property within the JSON data. Here is an example: JSON.parse('{"FirstNum": 1, "SecondNum": 2, "ThirdNum": 3}', function(k, v) { return ...

Django has a tendency to run view functions repeatedly after a form submission, even if the client has only submitted the form

I am facing an issue with uploading a user's image to the server in Django (version 1.8) for processing. Despite ensuring that the client only submits the form once, the backend seems to execute the related view function multiple times, leading to a 5 ...

Storing the current date and time in a MySQL database using NodeJs

I'm having an issue inserting a DATETIME field into my MySQL database. var dt = require('moment')().format('YYYY-MM-DD HH:mm:ss'); pool.query( `insert into login(id, id_utente, data_login) values(NULL,?,?)`, [result ...

The continuous resizing of the window is triggering a loop in flexslider when the resize function is called

I am currently working on a website that utilizes the flexslider plugin. My goal is to detect when the browser window is resized, and then reinitialize the slider so that it can adjust its size and other parameters accordingly. Initially, I was able to a ...

Steps for allowing the cells in a Data-Table column to be edited

Is it possible to have editable cells in a column of a Data Table with the support of the plugin? ...

JavaScript can be used to call a web service directly from a content page

Is there a way to call an autocomplete webservice from JavaScript in a content page that is part of the same web app? I have found that when I include a master page, the autocomplete feature stops working. I haven't added a script manager to the maste ...

Discover the steps for retrieving the <div> element using the swiper API

Link to my page: Click here Design reference: View design The design requires flexing the 2 arrow buttons, but these elements are missing in the code(source: autoplay swiper). How can I align them to the right-bottom corner? <div class="flex" ...

Retrieve information from a pair of models

Hey there, I need some help. Can someone please guide me on how to obtain the 'topics' array and append it to res.view()? I've tried multiple approaches but keep getting 'undefined' in the 'topics' array. Subjects.qu ...

The HSET command in the Redis client for Node.js is not working

I have been developing a DAO (data access object) for the project I am currently working on, which acts as an abstraction of a redis database. Below is the code relevant to my upcoming query: var redis = require("redis"); var _ = require("underscore"); va ...

Having trouble with Bing search API not functioning properly with AJAX?

Looking to incorporate Bing's search API using JavaScript. My goal is to allow the user to input a query and retrieve only images from Bing. I attempted to use Ajax for this task. When entering the URL directly in the browser, I successfully retriev ...

Ensuring data integrity within table rows using Angular to validate inputs

I am using a library called angular-tablesort to generate tables on my webpage. Each row in the table is editable, so when editMode is enabled, I display input fields in each column of the row. Some of these input fields are required, and I want to indica ...

Utilize Javascript to extract data from a WordPress website and display it on a fresh platform

Just dipping my toes into the world of JavaScript, would appreciate any help I can get. Recently tasked with creating a WordPress website, and as the title indicates, I'm struggling quite a bit with it. Encountering an error message: "SyntaxError: Un ...

Updating values using events within a v-for loop in a Vue template: A step-by-step guide

Just starting out with Vue and Laravel! Currently, I am retrieving data from an API Resource in Laravel. The API consists of 2 fields: Goal Value Here is the code snippet: <template> <div class="container"> <h1> Progress ...

Passing Selected Table Row Model Data to Backend in Angular 7

My goal is to send the selected data in a table row, which I select through a checkbox, to the server. However, I'm unsure about how to handle this via a service call. While I have the basic structure in place, I need assistance with sending the items ...

What is the best way to upload this HTML file to create my own visual representation?

Feeling a bit unsure about which way to go for this problem, I don't have many options at the moment. Lately, I've been diving into Deep Learning and I'm interested in experimenting with Stanford's CS231N's Convolutional Neural Ne ...

Maintaining form data while dynamically including more instances of a <div> element to the form

I am currently developing a SpringMVC Webapp with a view that contains a dynamic form. The dynamic elements of the form are listed below: At the moment, I am passing the variable ${worksiteCount} from my controller to the view (stored in my portlet sessio ...

Sending the array data to the component and executing it

Trying to familiarize myself with Vue2, but I am having issues with the "markers" array not updating on the map. How can I make this array reactive and ensure that the map markers change accordingly? Thanks for any assistance! views/Map.vue <template ...

Is it feasible to generate/save a JSON file to a hard drive using an HTML application and pure JavaScript without the need for Node.js or a server?

Imagine having an HTML document with forms and input fields, along with a submit button. Here's the challenge: when the user clicks the submit button, the goal is to create a JSON file containing the form data, all done without the need for Node.js o ...

Promise Pending awaiting response from function

Could someone please explain why the code I have written below is returning a Promise pending value for the 'out' variable? var out = dbConn.connect().then(function (){ var request = new sql.Request(dbConn); request.input("termin ...

group items into ranges based on property of objects

I've been grappling with this issue for far too long. Can anyone provide guidance on how to tackle the following scenario using JavaScript? The dataset consists of objects representing a date and a specific length. I need to transform this list into a ...