Missing chart id in the rendered chart markup

[larxn]

Description:

When you render a post that contains a chart, that chart's div container sometimes includes an element with the visualizer-action class and the data-visualizer-chart-id attribute. We need that attribute to always be present in order to guess that chart's id, but sometimes the attribute is not sent with chart markup.

How to reproduce:

1. Create a new WordPress instance in tastewp.com (it doesn't require an account).
2. Accept all the default configuration.
3. Install Visualizer Plugin.
4. Create a post that contains a chart.
5. Open that posts' public URL.
6. Open the browser's inspector and check the chart's markup: it will not contain any tag with the data-visualizer-chart-id attribute.

Expected behavior:

Posts that contain charts always render a container tag with the data-visualizer-chart-id attribute.

Technical info

• WordPress v5.9.3
• Visualizer: Tables and Charts for WordPress v3.7.10
• Visualizer: Tables and Charts Manager for WordPress AddOn v1.10.7

[girishpanchal30]

Hello @luvejo,

I can't replicate this issue on my local and tastewp instance. charts always render a container tag with the data-visualizer-chart-id attribute if we use frontend action(https://tinyurl.com/2j764mqq) otherwise it will render without the attribute.

You can check here:
With action: https://aspiringcorn.s3-tastewp.com/chart-demo-with-front-end-action/
Without action: https://aspiringcorn.s3-tastewp.com/chart-demo-without-front-end-action/

Can you please share your tastewp instance details here?

Thanks

[larxn]

Oh, I didn't know "Frontend Actions" were required. As a workaround, we're taking the ID out of a CSS class, like this:

document
      .querySelector('.visualizer-front-container .visualizer-front')
      .getAttribute('class')
      .match(/visualizer-front-(\d+)/)

But it doesn't seem very reliable. Could you possibly add a data-visualizer-chart-id attribute that is rendered every time? Or do you know a better way to retrieve the chart's ID from the received markup?

[girishpanchal30]

Hello @luvejo,

I have added the new filter for add/remove container attributes. for now, you can download the updated plugin from the PR #923.

Add the below filter in the active theme functions.php file.

add_filter(
	'visualizer_container_attributes',
	function( $attributes, $chart_id ) {
		$attributes['data-visualizer-chart-id'] = $chart_id;
		return $attributes;
	},
	10,
	2
);

Thanks

[ltroya-as]

Hi @girishpanchal30,

Is it possible to release that change as a patch version?

Thanks!

[girishpanchal30]

Hey @ltroya-as,
We will try to release the new version asap. for now, you can download the updated plugin from PR #923.

Thanks