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

Why won't Node.js let me redirect to my error page?

I've been putting together my newsletter project with the Mailchimp API, everything seems to be working fine except for when I try to redirect to a failure page if the status code is not 200. The browser shows an error message saying 'localhost r ...

javascriptnode.jsnewslettermailchimp-api-v3.0

Is Local Storage compatible with phonegap?

I am looking to integrate local storage into my phonegap application in order to store an array of data. Here is a snippet of my code: <div data-role="collapsibleset"> <div data-role="collapsible"> <h3>LOG ...

javascriptjqueryjsoncordova

Crafting LayerGroups on the Fly with Leaflet

Dynamic Creation of LayerGroups: Is it Achievable? I am currently working on a web map showcasing the various tree species present in parks. My goal is to create a separate LayerGroup for each species so that users can toggle visibility using a LayerContro ...

javascriptajaxdynamicleafletleaflet.markercluster

What is the way to bypass certificate validation when making a Fetch API request in the browser?

The code snippet below is currently being executed in the browser: const response = await fetch(`${url}`, { method: 'POST', headers: { Authorization: `Basic ${authorization}`, }, body: loginData, }) Upon calling this co ...

javascriptfetch-api

The MUI Module is missing: Unable to locate '@emotion/react'

Attempted this solution, but unfortunately it did not work Currently using the latest version of Material-UI Error: Module not found: Can't resolve '@emotion/react' Let's try installing it then.. npm i @emotion/react @emotion/style ...

javascriptnpmmaterial-ui

The old DLL is causing a reference error when called upon

While working with a TwitchLib reference and utilizing Newtonsoft.Json 7.0.0, I encountered an error every time I visited the page that calls Twitch lab. The error message displayed is: "Could not load file or assembly 'Newtonsoft.Json, Version=7.0.0 ...

c#jsonjson.net

Attempting to feed information into a computed property within Vue.js

I'm currently working on a project that involves Vue JS, specifically Nuxt JS. Within my web page, I am required to render certain classes onto an element that exists within a v-for loop. To achieve this, I need to pass data to a computed property alo ...

javascriptvue.jsnuxt.js

Updating input values in AngularJS using a custom directive in AngularJS

When the value of an input does not meet a certain condition, I need to change it. In this example, if the unit price input is changed to a non-numeric value when adding a Detail, I want to set the value to "0.00". scope.$watch(attrs.ngModel, function(new ...

javascriptangularjsangularjs-directiveangularjs-scope

Modification of window size using jQuery animations

Currently, I am working on creating a sidebar that slides in from the left side of the screen. To achieve this effect, I have set the menu element to float left with a width of 40% and a margin-left of -40%. However, when I try to reveal the sidebar by sw ...

javascriptjqueryhtmlcss

Modify the colors of names within an array of point names and their corresponding y values using Highcharts

I am trying to customize the color for each point in an array based on its name and y value. This is what I have so far: (function(H) { H.wrap(H.Series.prototype, 'getColor', function(proceed) { this.color = generateColorForString(this.na ...

javascripthighchartscolorsprototypeseries

What are the steps for implementing middleware that relies on a socket connection?

Using express.io, I am currently working on creating a middleware that necessitates a connection to a remote server through two sockets. However, I have encountered an issue. var net = require('net'); module.exports = function (host, port) { ...

javascriptnode.jssocketsexpresssocket.io

Issue: parsing error, only 0 bytes out of 4344 have been successfully parsed on Node.js platform

I've been attempting to utilize an upload program to transfer my files. The specific code I'm using is as follows: app.post('/photos',loadUser, function(req, res) { var post = new Post(); req.form.complete(function(err, fields, fil ...

javascriptnode.jsmongodbexpressmongoose

I am looking to optimize my WordPress posts to load in increments as the user scrolls down the page, similar to how Facebook does

I am looking to implement a feature on my WordPress post where the content loads a few at a time as the user scrolls, similar to Facebook. Specifically, I would like my webpage to automatically load 10 posts and then continue loading 10 more as the user re ...

phpjavascriptjquerywordpress

Running and halting multiple intervals in Javascript - a guide

Imagine a scenario where I am setting up 3 intervals with times of 500ms, 1s, and 1.5s. When I click on the button for the 500ms interval, I want to stop the other two intervals and only run the 500ms one. The same goes for clicking on the 1s or 1.5s butto ...

javascriptnode.jsexpressintervals

Using async/await in a POST handler within Express.js

My goal is to invoke an async function within a POST handler. The async function I'm trying to call looks like this (the code is functional): const seaport = require("./seaport.js"); // This function creates a fixed price sell order (FPSO) ...

javascriptnode.jsexpressasync-awaitopensea

What are the best ways to engage with a div element using keyboard shortcuts?

Is it possible to enable keyboard shortcuts for interacting with div elements? I am working on a project tailored for seniors who may have difficulty using a mouse. Is there a way to utilize keyboard shortcuts to click on divs and access their contents? H ...

javascriptjqueryhtmlcss

Tips for choosing elements in JavaScript using querySelector even after they've been included in the code using innerHTML

Within the scenario below, a parent element is present in the HTML code and the span element with a class of 'child' is nested within the parent element using the createChild function. Subsequently, the content of the child element is modified el ...

javascripthtmldomqueryselector

Issue with triggering (keyup.enter) in Angular 8 for readonly HTML input elements

My goal is to execute a function when the user presses Enter. By setting this input as readonly, my intention is to prevent the user from changing the value once it has been entered. The value will be populated from a popup triggered by the click attribut ...

javascripthtmlangulartypescript

What is the process for parsing JSON and inserting custom text snippets?

I am working with JSON data that is generated by Spark: val df = spark.read.parquet("hdfs://xxx-namespace/20190311") val jsonStr = df.schema.json The structure of the jsonStr is as follows: { "type":"struct", "fields":[ { "na ...

jsonraku

Working with JSON Arrays within PL/SQL

I have a collection of geonames stored in my database under the doc column of the myjson table. { "totalResultsCount": 19, "geonames": [ { "geonameId": 2593109, "fcode": "ADM1" }, ...

sqljsonoracleplsqloracle19c