ajax - Can't have two simultaneous charts using Apex Charts

admin管理员组

文章数量:1122832

My problem is pretty simple: I have an HTML code block with an AJAX query that builds a perfectly fine chart using Apex Charts. When I duplicate this HTML block, it doesn't display one of the charts, only the first one.

I've tried using different links for the two AJAX calls but it still doesn't work. When logging the results on the console, no information regarding the second call is shown.

I'm fairly new to WP and JS so I'm worried that this is an expected behaviour and I'm just wasting time. Thanks for any help!

Edit: it shows both calls on the console after all. But the chart is not showing.

My problem is pretty simple: I have an HTML code block with an AJAX query that builds a perfectly fine chart using Apex Charts. When I duplicate this HTML block, it doesn't display one of the charts, only the first one.

I've tried using different links for the two AJAX calls but it still doesn't work. When logging the results on the console, no information regarding the second call is shown.

I'm fairly new to WP and JS so I'm worried that this is an expected behaviour and I'm just wasting time. Thanks for any help!

Edit: it shows both calls on the console after all. But the chart is not showing.

• ajax
• html-editor

Share Improve this question edited Mar 20, 2023 at 17:39 user38680 asked Mar 20, 2023 at 17:29 user38680user38680 111 bronze badge 3

• The HTML block just outputs whatever code you put in it. So if your code doesn’t work if you put it on a page twice it won’t work if you put it in two blocks. There’s probably a problem with your JavaScript. – Jacob Peattie Commented Mar 20, 2023 at 18:30
• you can, turn off animations ! seems a bug... Also many other bugs ive found. – Finch Commented Jun 26, 2023 at 11:49
• note that the HTML block still gets filtered by the same security checks so you can't put random iframes and scripts inside it unless you're an admin with the unfiltered_html capability, that also means if someone who is not an admin edits the post all that code dissapears. Putting JS script tags directly into post content is not how you embed things in WP, that's what shortcodes/blocks/OEmbed is for. In the meantime you should ask about this in an Apex charts community, both the problem and the solution are unlikely to be WordPress problems – Tom J Nowell ♦ Commented Jun 26, 2023 at 13:08

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I had a similar problem. I had two graphs on one html page. In JS I had two options variables.

When I used 'responsive' section in options of every graphs, the second graph wasn't displayed and there were an error in console 'Maximum call stack size exceeded'.

In my case helped to remove id fields from options of both graphs.

Before:

var options1 = {
  chart: {
    id: 'graph1',
    type: 'bar',
    ...

var options2 = {
  chart: {
    id: 'graph2',
    type: 'bar',
    ...

After:

var options1 = {
  chart: {
    type: 'bar',
    ...

var options2 = {
  chart: {
    type: 'bar',
    ...

It is strange anyway and it must be some bug in Apex Charts (I used version 3.49).

本文标签： ajaxCan39t have two simultaneous charts using Apex Charts