Images of chart not displaying properly

[RIPcounties]

Thank you very much for this plugin. Tried many but most prevented CSV upload (in their free versions) or didn't allow easy theme customization. So was delighted to find yours and deploy it! It'll save a LOT of work each month. We used to manually make, name, upload, then embed 81 images each month. You've rescued us from that tedium! Thank you!

However, while the charts themselves work well, the PNG image generated for each chart doesn't seem to work. For example...

The chart works well:
https://ripcounties.ie/the-national-picture/

But the image version (of the first chart on that page:
https://ripcounties.ie/wp-content/uploads/2024/09/ireland-ripie-death-notices-by-year-and-month-4199-1.png

The site is running Wordpress 6.6.2. Here is some server / site info in case that helps?

---

MEDIA HANDLING

Active editor	WP_Image_Editor_Imagick
ImageMagick version number	1691
ImageMagick version string	ImageMagick 6.9.11-60 Q16 x86_64 2021-01-25 https://imagemagick.org
Imagick version	3.7.0
File uploads	Enabled
Max size of post data allowed	1G
Max size of an uploaded file	1G
Max effective file size	1 GB
Max number of files allowed	20
Imagick Resource Limits	area: 122 MBdisk: 1073741824file: 768map: 512 MBmemory: 256 MBthread: 1time: 9.2233720368548E+18
ImageMagick supported file formats	3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVIF, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DJVU, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, H, HALD, HDR, HEIC, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
GD version	2.3.3
GD supported file formats	GIF, JPEG, PNG, WebP, BMP, AVIF, XPM
Ghostscript version	9.53.

---

SERVER

Server architecture Linux 5.10.0-32-amd64 x86_64
Web server Apache
PHP version 8.3.11 (Supports 64bit values)
PHP SAPI fpm-fcgi
PHP max input variables 1000
PHP time limit 300
PHP memory limit 256M
Max input time 60
Upload max filesize 1G
PHP post max size 1G
cURL version 7.74.0 OpenSSL/1.1.1w
Is SUHOSIN installed? No
Is the Imagick library available? Yes
Are pretty permalinks supported? Yes
.htaccess rules Custom rules have been added to your .htaccess file.
Current time 2024-09-16T10:58:44+00:00
Current UTC time Monday, 16-Sep-24 10:58:44 UTC
Current Server time 2024-09-16T10:58:42+00:00

[methnen]

I somehow deleted my initial reply. So here goes again.

The image generation actually all happens on the browser/client side. The Chart.js canvas object gets converted to a PNG and then saved into a hidden input which gets send to the server and then just saved. So there's a chance that the PNG is corrupted before it makes it to the server.

Can I get the exactly Operating System (Windows/Mac/Etc...) with the version number as well as the Browser and version number and I can see if I can replicate this issue.

Also looks like you're in Ireland? So possibly that's a factor too? Being able to duplicate the issue somehow on my end is gonna be key for this one.

[RIPcounties]

Tried multiple browsers on this old 2012 MacBook Pro (OS Catalina 10.15.7)

Mullvad 13.5.3 (based on Mozilla Firefox 115.15.0esr)
LibreWolf 118.0.1-1
Firefox Developer Edition 131.0b7 (64-bit)
Brave Version 1.69.168 Chromium: 128.0.6613.138 (Official Build) (x86_64)
Safari Version 15.6.1 (15613.3.9.1.16, 15613)
Tor 12.5.1 (based on Mozilla Firefox 102.13.0esr) (64-bit)

Also tried on...
iPad Air 2 – OS 15.8.3
browser: Safari 15.6

... and...
Google Pixel 4a – Graphene OS, build 2024080800
browser: Vanadium version 127.0.6533.103.0 (org.chromium.chrome versionCode 653310333)

Also had two friends try. One iphone, one Androi phone and one Win laptop they too get "this empty yellow screen" like I do.

Disabled Cloudflare too. Still the same :-(

So perhaps there's something amiss on/with the server? Unsuitable PHP version? Missing a module?

But

[methnen]

If you turn down the image multiplier in the settings what happens? I wonder if it's the size the resulting image causing issues maybe?

I'd be happy to jump on a zoom call at some point if we can't figure this out via text, sometimes seeing something in action gives me ideas, also happy to take a look where this is occurring if you're comfortable giving me access.

You're welcome to email me directly at jamie AT methnen.com with any additional information, let me know when/if you do so the first time though so I can make sure my spam filter doesn't catch you for any reason.

[RIPcounties]

Setting multiplier to 1x made no difference :-(

when you suggested access, did you mean to the wp-admin area, to the server or both?

[methnen]

Damn was hoping that would result in something different.

Whatever level of access you feel comfortable with the more the better in terms of me being able to figure things out of course.

[RIPcounties]

Making some progress here I think. It might be a plugin conflict issue!

I set up a clean test site. Installed SSL, maintenance plugins as bare minimum, child theme + own M Chart theme. Then tried M Chart - which generated an image first time!

I'll introduce other plugins that are in use on the active site and generate a new chart each time. Will let you know when things 'break'

[methnen]

Ah, good thinking.

This isn't the first time I've failed to think of a potential conflict with another plugin as a reason for something like this.

Anyway, let me know what you find for sure.

[RIPcounties]

So it might not be a plugin conflict after all. Here's the news.

Each time I installed a plugin I made and published a new chart. Each time a PNG was generated just fine.

That left me thinking the issue might have been a residual conflict caused by one of the plugins I'd had there while building charts with M Chart - but didn't delete until a few days ago on the original site and hadn't installed on the test site . (I had Chartify, amCharts, Easy Charts... plus Optimole but not activated).

So I was thinking I'd try reintroducing them. But decided to first try updating some existing charts to see if the PNG would be updated. And doing that seems to have broken something in image generation.

1. I updated an existing chart (added new number to a blank cell), checked the PNG and it had turned into vertical lines.

2. To check if that was just one-off I created a new chart by importing a CSV and adding a number to a blank cell. The resulting PNG was also broken.

3. Created another new chart by uploading a CSV, but didn't add any new numbers to blank cells. (But did the usual of deleting contents of Cell A1 which I've found necessary to make Stacked Columns chart work out... which probably has no effect/relevance as I was already doing that for the previous successful charts/PNGs)

Now I'm left wondering if editing a table is triggering something on my particular server setup that breaks the PNG-generating-process?

Screenshot shows Media Library of all the successful PNGs and today's broken ones (+ maintenance image + map used for Draw Attention plugin).

I'll email you login details.

[RIPcounties]

Email sent

[methnen]

Finally had a chance to look at this tonight.

I can see the issue happening which is good. But I'd like to do a bit more investigation.

Can you send me a CSV file of an example data set that has the issue as well as the exact steps to duplicate it? Because as you mentioned some of these seem to render fine and others don't at all. I'd like to see if I can duplicate this locally on my dev machine in which case it'll be easier for me to investigate.

Second, I'd like to see if the image is rendering incorrectly before it's pushed to the server.

I've just sent you a new copy of M Chart with some small tweaks which will display the generated PNG below the Chart.js one while editing a chart. Obviously you wouldn't want this on a live production server.

This would eliminate the server as the issue or implicate the server based on what we see. If you get the borked version of the PNG showing below the Chart.js chart then it's not the server. If you get a proper looking image then something on the browser/Javascript end is failing. Either way it'll point me in a direction.

[RIPcounties]

Updated the plugin to that tweaked version (BTW 'test' site is on a different server than live site, so no worries if our testing crashes things)

I see the PMG updating itself while creating a chart. It also publishes fine.

After editing the chart (inserted 9999 into an empty cell) the original PNG remained unchanged (didn't take up 9999 entry) - but that's probably expected behaviour?

Started on a second new chart. Created just fine. Began editing, tried updating and "server returned unknown error". Refreshed, error was gone and updating went as above.

Went back to previous new test chart. 9999 edit was gone. Maybe due to that erver glitch... or perhaps you editing?

No sign of broken images yet though.

[methnen]

@RIPcounties and I have been discussing this issue via email so I'm just following up here for the public record.

This is an issue with the Mulvad browser where it, by default, does not allow Javascript to extract data from canvas objects on a page. Some privacy plugins for other browsers will apparently create a similar issue.

Chart.js draws charts as Canvas objects and M Chart creates the PNG backups by extracting the canvas image and converting it to a PNG.

Switching to a different browser (Chrome, Firefox, Safari) will fix the issue.

If you want to keep using Mulvad a workaround and explanation/demonstration of this int he screen recording below (it amounts to disabling the canvas extraction blocking for the domain/site you need the functionality for):

https://methnen-dropshare.s3.amazonaws.com/Screen-Recording-2024-10-05-12-27-28.mp4

Short term I do not see way to fix this in code and haven't found evidence of any other plugins or web software that have found elegant ways around this issue either, so I'm going to mark this as a won't fix item but it's worth leaving here for future reference.