WordPress display issue: AMCharts chart won't appear

I recently crafted an XY 2 series chart using the Amcharts library and have successfully integrated it into my WordPress website with the necessary plugin.

This particular chart showcases load span values for construction spreader beams, and it was built using the code snippet below:

<div id="$CHART$" style="width: 100%; height: 400px;"></div>

and the JSON code

var chart = am4core.create("$CHART$", am4charts.XYChart);
chart.data = [{
        /* data omitted for brevity */
    }],
    /* more settings and configurations */

Even though the chart displays perfectly in the Amcharts editor, unfortunately, on my WordPress page, all I see is a blank 400px high rectangle. I've double-checked the sources and everything seems to be correct.

The URL where this issue is occurring is

According to my plan, the chart should be visible under the title "Load Span Data." I've attached a screenshot as well. Can anyone shed light on why the chart isn't appearing as expected?

Thanks https://i.stack.imgur.com/BAxw0.png
javascriptjsonwordpressamcharts

Answer №1

This code snippet is fully functional:

var chart = am4core.createFromConfig({
   
   "data" : [{
        "category": 0.5,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 1,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 1.5,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 2,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 2.5,
        "value1": 8,
        "value2": 5
    }, {
        "category": 3,
        "value1": 6.5,
        "value2": 3.7
    }, {
        "category": 3.5,
        "value1": 5,
        "value2": 2.9
    }, {
        "category": 4,
        "value1": 3.9,
        "value2": 2.3
    }],
    
    "xAxes": [{
        "type": "CategoryAxis",
        "id": "id-1",
        "title": {
            "type": "Label",
            "id": "span",
            "text": "Span in Metres"
        },
        "dataFields": {
            "category": "category"
        },
        "startLocation": 0.5,
        "endLocation": 0.5,
        "renderer": {
            "grid": {
                "template": {
                    "type": "Grid",
                    "location": 0.5
                }
            },
            "minGridDistance": 20
        }
    }],
    "yAxes": [{
        "type": "ValueAxis",
        "id": "id-2",
        "title": {
            "type": "Label",
            "id": "swl",
            "text": "S.W.L in Tonnes",
            "propertyFields": {}
        },
        "min": "0",
        "max": "10",
        "renderer": {
            "maxLabelPosition": 0.98
        }
    }],
    "series": [{
        "type": "LineSeries",
        "name": "30° Sling To Vertical Angle",
        "xAxis": "id-1",
        "yAxis": "id-2",
        "baseAxis": "id-1",
        "dataFields": {
            "valueY": "value1",
            "categoryX": "category"
        },
        "fillOpacity": 0.5,
        "strokeWidth": 2,
        "sequencedInterpolation": true,
        "sequencedInterpolationDelay": 100,
        "tooltipText": "{name}\n{categoryX}: {valueY}"
    }, {
        "type": "LineSeries",
        "name": "45° Sling To Vertical Angle",
        "xAxis": "id-1",
        "yAxis": "id-2",
        "dataFields": {
            "valueY": "value2",
            "categoryX": "category"
        },
        "simplifiedProcessing": true,
        "calculatePercent": true,
        "fillOpacity": 0.5,
        "strokeWidth": 2,
        "sequencedInterpolation": true,
        "sequencedInterpolationDelay": 100,
        "tooltipText": "{name}\n{categoryX}: {valueY}"
    }],
    "legend": {
        "type": "Legend",
        "setStateOnChildren": true,
        "showOnInit": true,
        "visible": true,
        "disabled": false,
        "dataFields": {},
        "position": "top"
    },
    "cursor": {
        "type": "XYCursor",
        "tooltipPosition": "fixed"
    },
    "dataFields": {},
    "colors": {
        "type": "ColorSet",
        "wrap": false,
        "shuffle": false,
        "reuse": false,
        "baseColor": "#6b7894"
    }


}, "$CHART$", am4charts.XYChart);

Check out the live example: https://jsfiddle.net/a4ujzoxh/

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

Clicking will open the link in both a new tab and the current tab

I'm looking to enable ng click functionality to work in both new tabs and the current tab. The URL is dynamically generated based on a certain condition. Here is the HTML: <a ng-href="{{myPathVariable }} " ng-click=" GoToThemes()" class="shift-l ...

javascriptjqueryhtmlangularjs

Is jQuery Autocomplete functioning properly on outdated browsers, but not on newer ones?

Here is the JSON data I have for my auto complete feature { "list" : [ { "genericIndicatorId" : 100, "isActive" : false, "maxValue" : null, "minValue" : null, "modificationDate" : 1283904000000, "monotone" : 1, "name":"Abbau", ...

phpjavascriptjqueryjsonjquery-ui-autocomplete

Tips for sending and retrieving parameters using the POST technique

Currently, I am in the process of building a user authentication form for my website using Javascript. I am utilizing Vue JS on the client-side and NodeJS with ExpressJS on the server-side. For the server-side functionality, I have implemented the followi ...

javascriptnode.jsexpressvue.js

Tips for incorporating a favicon in a React application

Having trouble adding a favicon to my React application. I followed the instructions in this post, but it's not working for me. I placed the favicon.ico file inside the public folder where index.html resides. This is how my directory structure looks ...

javascriptreactjswebpackhtml-webpack-pluginwebpack-plugin

Ensure that the form is submitted when a checkbox is clicked, while also maintaining the native browser

My form contains a text input field and a checkbox. The text input must not be left empty when the form is submitted, which is why the required attribute is used. I want the form to be submitted every time the checkbox is clicked, while still maintaining ...

javascripthtmlreactjs

Accessing QML Functions from JavaScript

Currently, I am faced with a challenge in my app development using Qt. I need to trigger a QML function from JavaScript when a specific event is triggered from my HTML page. I attempted the following method: app.html <html> <head><title& ...

javascripthtmlfunctionqml

Why does one of the two similar javascript functions work while the other one fails to execute?

As a new Javascript learner, I am struggling to make some basic code work. I managed to successfully test a snippet that changes text color from blue to red to ensure that Javascript is functioning on the page. However, my second code attempt aims to togg ...

javascripthtmlcss

Unlimited scrolling feature in Ionic using JSON endpoint

Trying to create an Ionic list using data from a JSON URL. JSON Code: [{"id":"1","firstName":"John", "lastName":"Doe"}, {"id":"2","firstName":"Anna", "lastName":"Smith"}, {"id":"3","firstName":"Peter", "lastName":"Jones"},{......................}] app.j ...

javascripthtmlangularjsionic-framework

Enhance permalink with custom post types' meta values through appending or prepending

How can I add meta values to custom post types in permalinks for my website, www.abc.com? Specifically, I want to include the date as year/month and the name of the company in the permalink for my custom type posts. I am expecting the final permalink stru ...

phpwordpressurl-rewritingcustom-post-typepermalinks

Utilize Express JS to send a JSON-formatted string in the HTTP response

How can I send a JSON string in an HTTP response using express JS? I'm attempting to do so but encountering errors. Could you please point out what mistake I might be making? msg = '{"foo": "bar"}'; msgJSON = JSON.parse(msg); res.status(200 ...

jsonexpress

Extracting a dynamic parameter from a JSON object

Hey there, I'm new to JavaScript and have been searching for answers online for hours with no luck. I have a question regarding calling an API and receiving the following result: { "return_status":1, "return_message":"success", "data":{ ...

jsonreactjsparsing

The issue of Access-Control-Allow-Origin not functioning properly when using Ajax for a POST request

I am encountering an issue with the header "Access-control-allow-origin" when making a request using the following code: <script type='text/javascript'> function save() { $.ajax( { type: 'POST', ur ...

javascriptjavaajaxcorscross-domain

Differences between addEventListener and jQuery's on method, as well as form.submit and jQuery's

I encountered a situation where callbacks registered using jQuery's on method were not being called when trying to trigger form submission with the HTML Form element object instead of jQuery. After some testing, I discovered that changing the code to ...

javascriptjqueryhtmldom-events

Implementing controller-to-view communication in your application

I would like to display a notification indicating success or failure after submitting the form. Within my code, I have a Partial View named _Appointment.cshtml that contains the form. To load this Partial View on my main view, Index, I use the following ...

asp.net-mvcjsonasp.net-mvc-4controller

Issues with AngularJS service not properly parsing JSON data retrieved through HTTPGET请求

I'm struggling to send a HTTP request to a WebAPI using an AngularJS service and display an HTML page with two nested ng-repeat's (posts and replies). The {{ post.displayName }} is showing up in my browser, but the replies are not loading. Can so ...

jsonangularjshttp

Is it possible to utilize the "let" keyword in JavaScript as a way to prevent global-scope variables?

While working on a JavaScript test, I came across an interesting observation related to the let keyword. Take a look at this code snippet: let variable = "I am a variable"; console.log(window.variable); Surprisingly, when I tried to access the variable p ...

javascriptscopeecmascript-6

Issue with PassportJS and Express 4 failing to properly store cookies/session data

I have a situation with my Express 4 app using Passport 0.3.2. I've set up a passport-local strategy, and it's successfully retrieving the user information when the /session endpoint is provided with a username and password. The issue arises whe ...

javascriptnode.jsexpresscookiestypescript

expanding the expressjs res feature

I am currently working on implementing an error and notification feature for my expressjs app. My approach was to add a function by calling: app.use(function (req, res, next) { res.notice = function (msg) { res.send([Notice] ' + msg); } }); ...

javascriptnode.jsexpress

The store for WrappedApp was just initialized using withRedux(MyApp) { initialState: undefined, initialStateFromGSPorGSSR: undefined }

I am trying to create multiple routes with express and next.js. After running npm run export, I encountered the following message: next export info - using build directory: C:_PROJECT.next info - Copying "static build" directory info - Launching 3 wor ...

javascriptnode.jsreactjsnext.js

Locate the div element containing specific text and remove the text from the

Is there a way to locate a div that contains specific text and remove only that specific text from the div? For instance: <div> DeleteText <span>Something text</span> <div>Something span inner text </div> </div> I am l ...

javascriptjqueryhtml