What is the reason for Firefox displaying the "excessive recursion" error message?

I have been working on generating an area Google chart using the code below, but I am running into an issue where Firefox is showing me a "too much recursion" error. The chart currently only has one point for testing purposes. Can anyone provide some guidance or help with this?

<?php

$equity_array = array(0);
$date_array = array(date("d/m/Y"));
$label_num = array(1);



echo"
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
   <script type='text/javascript'>
   google.charts.load('current', {'packages':['corechart']});
   google.charts.setOnLoadCallback(drawChart);


   function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Time', 'Retorno'],";


echo"       ['" . $date_array[0] . "', " . $equity_array[0] . "], ";

echo"   ]);

        var options = {
        focusTarget: 'category',
        chartArea: {left: 70, right:50, top: 30, bottom: 50},
        series: {
         0: { color: '#469DE4' },},
              legend: 'none',
        vAxis: {textStyle:{color: '#7F7F7F'}, baselineColor: '#CCCCCC', format: '#%', gridlines: {color: 'transparent'}}, 
        fontName: 'Source Sans Pro',
        hAxis: {textStyle:{color: '#7F7F7F'}, showTextEvery:" . $label_num . "}};
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        var formatter = new google.visualization.NumberFormat({pattern:'#,###%'});
        formatter.format(data, 1);

        chart.draw(data, options);
        }
    </script>
    <div id='chart_div' style='height: 450px;'></div>";

Answer №1

A callback function is defined for when the page loads:

google.charts.setOnLoadCallback(drawChart);

This function, `drawChart`, performs some data visualization tasks:

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Time', 'Return'],";


echo"       ['" . $date_array[0] . "', " . $equity_array[0] . "], ";

echo"   ]);

    var options = {
        focusTarget: 'category',
        chartArea: {left: 70, right:50, top: 30, bottom: 50},
        series: {
            0: { color: '#469DE4' },},
        legend: 'none',
        vAxis: {textStyle:{color: '#7F7F7F'}, baselineColor: '#CCCCCC', format: '#%', gridlines: {color: 'transparent'}}, 
        fontName: 'Source Sans Pro',
        hAxis: {textStyle:{color: '#7F7F7F'}, showTextEvery:" . $label_num . "}
    };
    
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    var formatter = new google.visualization.NumberFormat({pattern:'#,###%'});
    formatter.format(data, 1);

    chart.draw(data, options);
}

The callback function triggers the onload event, ensuring that the chart is drawn only once.

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

What is the reason behind receiving a CSS warning stating "Expected color but found '0' " when using Phaser's setText() function?

Here's how I created my text object: statusBarHP.text = game.add.text(0, 0, '', { font:"16px Arial", fill:"#ffffff", stroke:"#000000", strokeThickness:2 }); For the object that holds the text: statusBarHP = game.add.sprite ...

Is it possible to launch a Nextjs app on Vercel for production purposes? How well does it handle high volumes of traffic?

As a newcomer to Nextjs, I am looking to deploy my app to production. I'm curious about whether Vercel can effectively handle heavy traffic on the site. Should I consider utilizing platforms such as AWS or GCP for deployment instead? Any advice would ...

JavaScript recording speed

I am currently working on a project that involves video recording on my website. After creating a canvas and pushing the recorded frames to it, I have encountered an issue. The playback of the video is too fast - a 10-second video plays in around 2 second ...

Creating a custom jQuery plugin for exporting data

I am crossing my fingers that this question doesn't get marked as 'already answered' because I have thoroughly searched previous questions and unfortunately, my specific case is not listed anywhere. I have successfully created a jQuery func ...

showing a loading spinner while sending an ajax request, patiently awaiting the response, and preventing any further interactions on the page

On my page, I am utilizing multiple ajax calls to load specific parts of the response. However, I need to display a spinner on the section where the ajax call is being made to indicate that content is loading. Is there a way to create a universal method th ...

Styling and scripting with CSS and jQuery in an external JavaScript file

Is it possible to add the jquery library from "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" into an external .js file? And how can a .css file be included in a .js file? ...

Why won't applying a binding style affect the appearance of my Vue component?

const EventLevelBoard = { name: "EventLevel", data: { levelStyle: { display: "block" }, levelStyleinner: [ { display: "block" }, { display: "block" }, { display: "block&qu ...

Execute code after selecting the link

To simplify my question, I will provide an example: Suppose I have two sample pages that I want to demonstrate: Page 01 <script> var demo = 'X1'; alert(demo); $( document ).ready(function() { $("#cont").on("click" ...

Unexpected Error: Unable to access the 'position' property of an undefined element (D3.JS)

This error occurred when I attempted to fetch JSON data and convert it into a line graph. An unexpected TypeError was thrown: Unable to access the 'position' property of undefined Below is the relevant portion of the JS code: d3.json("../js/ ...

Acquiring the selector value from a tag

To summarize: This snippet of code: for(let i = 0; i <= items.length; i++){ console.log(items[i]) } Produces the following output: <a class="photo ajax2" target="_blank" href="/profile/show/3209135.html" data-first="1" data-next="3206884"> ...

Capture all Fetch Api AJAX requests

Is there a way to intercept all AJAX requests using the Fetch API? In the past, we were able to do this with XMLHttpRequest by implementing code similar to the following: (function() { var origOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.p ...

I'm curious as to why IPC messages from one menu item in Electron can successfully reach my window, but when sent from a different menu item, they do not seem to

I am working on a straightforward application that requires running a background process to fetch some data. I want to display a loading indicator while the data is being retrieved, but I am encountering difficulties implementing this feature. My approach ...

Marked checkboxes and Node.js

I'm having trouble grasping the concept of using HTML checkboxes with Node.js and Express. I have a basic form in EJS and before diving deeper into the backend logic, I want to ensure that the correct values are being retrieved. Despite my efforts to ...

Inability to submit page after clicking on lower half of button while eliminating validations

In my current Struts2 application, I am encountering a issue related to validations on textfields. The validations include checks for missing values and incorrect values. Below these fields, there is a button that should submit the form once all validation ...

Integrate the element offset into jQuery's offset calculations

I'm new to utilizing jQuery and currently facing a challenge in determining the correct offset for a specific div element within the body. My goal is to make this particular div stick to its position as I scroll down past its designated top offset. A ...

From javascript to utilizing ajax calls to interact with php scripts,

I am currently working on a page called edit.php where I need to pass a JavaScript variable to a modal window containing PHP in order to execute a query and retrieve data. Unfortunately, my experience with Ajax is limited and I haven't been able to fi ...

What's the most effective method to incorporate additional events into this element using the conditional operator?

Looking for help with this code snippet: <span role="link" tabindex="0" :class="tabDetails.showPayment ? 'link' : ''" @click="tabDetails.showPayment ? cTab('payments') : null" ...

Directly insert an image into your webpage by uploading it from the input field without the need to go through the server

Can an image be uploaded directly from <input type="file" /> into an HTML page, for example through the use of Javascript, without needing to first save the image to the server? I am aware that AJAX can accomplish this, but if there is a way to ...

Personal Information Management

After making a request for stormpath user custom data, I used the following code: res.render('home', { title: 'home', user: req.user.customData, }); Instead of receiving a JSON object of custom data as expected, a URL ('') ...

Changing the height of tablerows in Material UI v5: A step-by-step guide

I am attempting to adjust the height of the rows in this material-ui code example. import * as React from "react"; import { styled } from "@mui/material/styles"; import Table from "@mui/material/Table"; import ...