Apexcharts tends to be unreliable upon dashboard loading, frequently appearing and disappearing unpredictably

Having trouble with displaying apexcharts on my dashboard. There are 5 charts on the dashboard and their behavior is acting strange. The charts only show up after reloading the page 3 to 4 times or when inspect element is clicked. Otherwise, only 2 or 3 charts are visible. Any ideas on how to resolve this issue?

Let's investigate further... This JavaScript file retrieves data using AJAX.
Upon console logging, I can see values in the data key.


var revenueData = [];
var fetchEarningData = function() {
    $.ajax({
        url: "dashboard/earning",
        type: "Get",
        dataType: "json",
        cache: false,
        success: function (data) {
            jQuery.map(data, function (n) {
                revenueData.push(n)

            });
        },
        complete: function (data) {
        },

        error: function (data) {

        }
    });

// Other AJAX calls for fetching customer, member, order, stockIn-amount, debit and credit data follow...
javascriptajaxlaravelapexcharts

Answer №1

It appears to have worked for me. For example, dynamically generating the chart div each time the function is called to display chart data.

<div class="card" style="padding:0" id="charts">                   
    <div class="card-body" style="padding:0" id="tagchart"> 
       <div id="chart"></div>                
   </div>

var c = document.getElementById("tagchart");
var d = document.getElementById("chart");
c.removeChild(d);

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "chart");
c.appendChild(newDiv);

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

Consistently scaling the Embla carousel slides for a seamless presentation experience

In my current project, I am utilizing Embla Carousels and aiming to incorporate a smooth slide scaling effect as users scroll through. The idea is for slides to enlarge the closer they get to the left edge of the carousel container, then decrease in size r ...

javascripthtmlreactjstypescriptembla-carousel

Retrieve the desired element from an array when a button is clicked

When I click on the button, I need to update an object in an array. However, I am facing difficulties selecting the object that was clicked. For better readability, here is the link to my GitHub repository: https://github.com/Azciop/BernamontSteven_P7_V2 ...

javascriptvue.js

The varying website layouts across different devices

I recently encountered an issue while working on my WordPress website. When I view the page, some features behave differently than expected. One example is a banner that moves in and out based on scroll position (using jQuery Waypoints). Interestingly, whe ...

javascriptphpjquerycsswordpress

Dealing with Javascript exceptions and sending email notifications in Django

I appreciate the traditional method of handling server-side exceptions in Django using Python. I am interested in finding a similar approach for client-side exception handling in JavaScript. So far, I have come across only one option which is DamnIT, but ...

javascriptdjangojquery-plugins

When iterating through HTML Elements using the forEach method, the getElementsByClassName function is not capable of targeting these specific elements

Allow me to elaborate, although you will grasp the concept better once you see the actual code. I am retrieving my div elements using the getElementsByClassName function and then converting them into an array using Array.from(). As I iterate through this a ...

javascripthtml

Node: Exploring folders through recursive traversal

Node.js is a new world to me, and I'm determined to grasp its async behavior and callback structure. Here's where I'm currently struggling: // IMPORT ------------------------------------------------------------------------ fs = r ...

javascriptnode.jsrecursioncallbacktraversal

Is there a way to change my cursor to a pointer finger when hovering over my box?

<script type="text/javascript"> function draw() { var canvas = document.getElementById('Background'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.lineWidth = 0.4 ctx.strokeRect(15, 135, 240, 40) Is there a w ...

javascripthtmlcss

Enhance User Experience by Dynamically Updating Google Maps Markers with Custom Icons Using Django and JSON

Hey StackOverflow Community! I've been working on creating a web interface to showcase the communication statuses of different network elements. I'm almost done with the challenging part that I had been procrastinating. To add an awesome touch, ...

ajaxjsondjangogoogle-mapsgoogle-maps-api-3

What are the different ways to interact with the object retrieved from the onloadedmetadata event

Having trouble accessing a specific value in an object that is the result of the onloadedmetadata event. When I log the entire object using audioDuration, I am able to see and retrieve the respective value without any issues. However, when I try to access ...

javascriptreactjs

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

javascripthtmlcssmaterial-ui

Utilizing Typescript to implement an interface's properties

After declaring an interface as shown below interface Base { required: string; } I proceeded to implement the interface in a class like this class MyClass implements Base{ method(): void { console.log(this.required); } } However, I ...

javascriptjqueryangularjsangulartypescript

When attempting to open a .pdf file in a new tab using React and Express, a void message appears on the screen

I have a situation where I am attempting to open a .pdf file in a new tab from the server's file system using Express, React, and MySQL. The problem arises when, upon clicking the "See" button, the displayCV function is triggered, a new tab opens, but ...

javascriptreactjsexpresspdfreact-context

The updates made to a variable within an ajax request are not immediately reflected after the request has been completed

My global variable is not displaying the expected result: function checkLiveRdv(salle, jour, dateus, heure) { var resu; var urlaction = myUrl; $.ajax({ type: "POST", dataType: "json", url: urlaction, data: myDatas, suc ...

javascriptajaxvariablesjquery

Tips for sending data scraped from a website using Express

I have created a web crawler using Axios and am attempting to upload a file through Express. I currently have 10 different crawlers running with corresponding HTML form methods in Express. However, when I click the button, it downloads a blank file first ...

javascriptnode.jsexpressaxios

After utilizing AJAX in a ASP.NET Core MVC application and rendering JSON data, the response is coming back as undefined

Don't miss out! Click here to view the debugged result and rendered data image I am currently working on a function within an ASP.NET Core MVC application that, when a dropdown list item is clicked, will render corresponding data based on the item&ap ...

c#ajaxasp.net-core-mvc

What is the best way to iterate through one level at a time?

Imagine a scenario where the structure below cannot be changed: <xml> <element name="breakfast" type="sandwich" /> <element name="lunch"> <complexType> <element name="meat" type="string" /> <element name="vegetab ...

javascriptphparraysiterationdomdocument

Tips for exiting a function at a particular point

How can I ensure that my async function only returns at a specific point and not void at the end? const fun = () => { const list = []; let streamFinished = 0; let streamCount = files.length; await fs.readdir(JSON_DIR, async(err, files) => ...

javascriptnode.jsasynchronousasync-await

Generate an array by filtering out null properties from a Javascript/Typescript object

I have a TypeScript plain old JavaScript object (POJO) structured as shown below: export interface Items { firstName?: String; lastName?: String; address?: String; phoneNumber?: number; city?: String; stat ...

javascriptarraysangulartypescriptobject

Sending a variety of data inputs to an API using ajax

I am a beginner in coding and facing some challenges in troubleshooting an issue. My goal is to allow my API to accept multiple data inputs provided by the user through textarea. However, I have encountered a problem where everything works fine when only ...

javascriptjsonajaxapifrontend