The error message "AmCharts: Uncaught TypeError: Unable to retrieve the property 'mouseX' as it is undefined" appeared

When utilizing AmCharts for stock-related events, I encountered an unusual error in my console window:

Uncaught TypeError: Cannot read property 'mouseX' of undefined
    at b.followCursor (amcharts.js:271)
    at b.showBalloonReal (amcharts.js:130)
    at amcharts.js:130

Here is a snippet of my code where I fill data into the dividendEventData variable:

function getCompanyEventChartData() {
        var jqhx = $.ajax({
            type: "GET",
            data: { 'marketID': '@Model.MarketID', 'companyID': '@Model.CompanyID' },
            url: "@Url.CompanyChartEvent()"
        })
        .done(function (data) {
            // Iterate over the data and process accordingly
        });

The format of dividendEventData array looks like this:

[["Sunday, 18, Dec, 2016",31],["Thursday, 24, Dec, 2015",31], ...]

I then add dividendEventData to my chart using the following code:

simpleDataSet.stockEvents = dividendEventData;
                setTimeout(function () {
                    $("#chartcurtain").hide();
                    chart.validateData();
                }, 1000);

Although initially working fine, my chart fails to display descriptions upon subsequent reloads. When hovering over event icons, the description does not appear and the aforementioned error pops up in the console. I have tried clearing cookies and verifying consistent data from the AJAX call, yet the issue persists.

javascriptchartsamchartstypeerror

Answer №1

Upon initializing the chart, it requires data/config in the form of JavaScript objects and arrays. These simple JS objects are then transformed into instances of suitable classes.

For Stock Events, the stockEvents array of objects is converted into an array of StockEvent instances.

This explains why the chart functions correctly initially.

However, when adding events to a previously initialized chart, you essentially add a basic object to the stockEvents array. Consequently, this results in an array containing a mix of StockEvent instances and basic objects.

Since the new objects are not converted into StockEvent instances, anomalies occur.

The solution is to instantiate a new event as a StockEvent and push that instance into the stockEvents array instead.

Here's an example:

var e0 = new AmCharts.StockEvent();
e0.date = new Date(data[i][0]);
e0.type = "sign";
e0.backgroundColor = "#85CDE6";
e0.graph = closeGraph;
e0.text = "D";
e0.description = "temporary";
e0.url = "https://www.google.com/";
e0.urlTarget = "_blank";
dividendEventData.push(e0);

Following these steps should resolve the issue.

A working example is provided below:

(Embed code for charts and sample data)

For a CodePen version of the same, click here: https://codepen.io/team/amcharts/pen/c37ef299206c6ab5a09c15b0f665e6f0?editors=0010

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

Sending data from a child component to its parent counterpart

A component called cartComponent has a data property named cartCount which increases every time a new item is added to the cart. I want to utilize this value to update another value in the template that is not part of the component. Is it achievable? Bel ...

javascriptvue.jscomponents

ExpressJS, defining routes, locating controllers, and documenting APIs

Utilizing expressJS 4.X and nodeJS 6.x In the past, I was defining my routes in this manner : /** * @api {get} /users/:userId Get a user * @apiName GetUser * @apiGroup User * * @apiParam {Integer} userId Users unique ID. * * @apiSuccess (Success 2 ...

javascriptnode.jsexpressapi-doc

What is the most effective method for identifying the initial timestamp for each day, week, or month within a collection of timestamps?

I am dealing with a lengthy array of sorted timestamps representing stock price quotes. These timestamps have minimal resolution, meaning that each timestamp is at least 1 minute bigger than the previous one. However, there can be gaps during the day, espe ...

javascriptarraysperformancetime-seriestimestamp

Is there a way to retrieve a large number of users through an API using async await?

I am trying to retrieve all users from an API and I want to identify which user receives the highest payment. For instance let users=['tom','jenny','smith','Joe'] async function getUsers() { let response = awa ...

javascriptnode.jsrestfetch

A tutorial on how to switch classes between two tabs with a click event in Vue.js

I am having an issue with my spans. I want to implement a feature where clicking on one tab changes its color to red while the other remains gray. I have tried using class binding in my logic but it's not working. How can I solve this problem and make ...

javascriptvue.jsvuejs2vue-component

Searching for nested divs with the same class name in jQuery can be achieved by using the

Need assistance in locating all divs with a specific class name. Some divs may have nested divs with the parent div's class name. Take this scenario for example: <div class="myForm"> <div class ="myDiv"> <div class ="myDiv"> ...

javascriptjqueryhtml

Issue: Invariant violation: The use of <NavLink> is restricted to within a <Router> when working with mbdreact

I'm working on creating a navigation bar using mbdreact, but I'm encountering an error that says: Error: Invariant failed: You should not use <NavLink> outside a <Router> Below is the code I'm using: import React, { Compon ...

javascriptreactjsreact-routermdbootstrap

"Sorry, but there seems to be an issue with

My shop: { customers: [ { id: 12345, name: Customer A }, { id: 54321, name: Customer B } ] } I am attempting to modify the name attribute for Customer A. I am utilizi ...

javascriptreactjsredux

Arrange the items that are missing from Array B to be located at the bottom of Array A, organized in a file tree structure

I have two arrays containing different types of objects. Each object in the arrays has a title assigned to it. My goal is to compare these two arrays based on their titles and move any files that are not included in the bottom part of the fileStructure arr ...

javascriptarraystypescriptsorting

ng-click="showInventory()" onClick="currentTemplate='/inventory.html'" Not

I'm facing an issue with my menu list. When I apply the ng-repeat directive, it seems to not work properly. However, when I remove the ng-repeat, everything functions as expected. <div class="reports_header_tabs_holder"> <span ng-repea ...

javascriptangularjsangular-template

Creating a function in AngularJS to select all checkboxes

I recently started working with Angular and I implemented a select all checkbox that checks all the boxes using ng-model/ng-checked. <th> <input type="checkbox" id="selectAll" ng-model="selectAll"/> </th> <th ...

javascriptangularjsfunctioncheckbox

Clicking a button to reset a json file

I have a task management program and I would like to implement a feature that allows users to reset the tasks to a predefined set of JSON data within the JSON file by simply clicking a button. For instance, if the JSON file contains multiple tasks, clickin ...

javascriptphphtmljson

Transferring files and information using the Fetch API

I am currently working on a React application and I have defined the state of my application as shown below: const [book, setBook] = useState({ title: '', cover: {} numberPages: 0, resume: '', date: date, }); The & ...

javascriptjsonreactjs

What could be causing the NaN error when parsing a number in Javascript?

I'm having trouble figuring out why I keep getting a NaN when I try to print a number with JavaScript. This code snippet is used in multiple places on the website and usually works without any issues. The URL where this issue is occurring is: Here ...

javascriptjqueryhtml

How can I transfer information from an HTML file (using the ejs template engine) to Node.js?

Currently, I am working on my own project using a combination of Node.Js (Express), MongoDB, JavaScript/jQuery, and HTML with EJS as the template engine. So far, I have some understanding of how to send data from the Node.js router to views and how to sen ...

javascriptnode.jsmongodbexpressejs

What are the steps for integrating Landbot into a Next.js application?

I've been attempting to integrate Landbot into my Next.js application, but I'm facing some difficulties. I tried to modify the _document.js file and insert the necessary code into the body section, however, it doesn't seem to have any impact ...

javascriptreactjsnext.js

"Discrepancy in results between JSON stringify and JavaScript object conversion

I need to save this object in a database, but first I have to send it to the backend. Recorder {config: Object, recording: false, callbacks: Object, context: AudioContext, node: ScriptProcessorNode…} However, after using JSON.stringify(recorder) The r ...

javascriptjson

I am having trouble locating my TypeScript package that was downloaded from the NPM registry. It seems to be showing as "module not found"

Having some challenges with packaging my TypeScript project that is available on the npm registry. As a newcomer to module packaging for others, it's possible I've made an error somewhere. The following sections in the package.json appear to be ...

javascriptnode.jstypescriptnpm

Exploring ways to loop through a multi-layered dictionary within a Django template

Trying to implement a nested for loop in a Django template to display multiple product images based on quantity. Here is a snippet of the template: {% for product_id, item in b_data.items %} {% for i in item.numItems %} <div class="col- ...

javascriptjquerydjangoajax

Angular Display of Scrolling Feature not Functioning Properly

After clicking on show5 and then goto5, everything functions as expected. However, when clicking on showngo5, it does not work as anticipated, despite the fact that the same methods are being called. What is causing showngo5 to not work in this plunker h ...

javascriptangularjs