Data table is rendered incorrectly for charts with bullet and line series

[AleksueiR]

Expected behaviour

Headers for bullet and line series rendered on a single line; bullet series subheaders underneath the corresponding header.

Actual behaviour

Headers for bullet series are rendered as the top line and the line series header is rendered underneath one of the bullet header.

Live demo with steps to reproduce

http://jsfiddle.net/ouroborosDragon/aga1k7nd/7/

Affected browser(s)

Chrome, IE11, likely others.

[pawelfus]

Hi @AleksueiR

Thank you for reporting this bug. It looks like issue comes from accessibility module, without this module it works better: http://jsfiddle.net/aga1k7nd/9/

I tried to workaround the issue by setting columnHeaderFormatter, but unfortunately it's wrapped and top row of series names can not be accessed. That's how far I got: http://jsfiddle.net/twkvLhd0/ - still we are missing some cell for the first category/year.

@oysteinmoseng

[pawelfus]

Hi @AleksueiR

Thank you for reporting this bug. It looks like issue comes from accessibility module, without this module it works better: http://jsfiddle.net/aga1k7nd/9/

I tried to workaround the issue by setting columnHeaderFormatter, but unfortunately it's wrapped and top row of series names can not be accessed. That's how far I got: http://jsfiddle.net/twkvLhd0/ - still we are missing some cell for the first category/year.

@oysteinmoseng

[TorsteinHonsi]

@oysteinmoseng I think it would be cleaner if we just do what we have to do in the export-data module instead of wrapping it from the accessibility module.

[TorsteinHonsi]

@oysteinmoseng I think it would be cleaner if we just do what we have to do in the export-data module instead of wrapping it from the accessibility module.

[oysteinmoseng]

Yes, it would for sure be a lot cleaner to build the accessibility functionality into export-data. We are just talking about simple markup after all.

[oysteinmoseng]

Yes, it would for sure be a lot cleaner to build the accessibility functionality into export-data. We are just talking about simple markup after all.

[AleksueiR]

@pawelfus Thank you for the workaround with the formatter since I do need to keep the accessibility module enabled.

Missing cells in the first row can be fixed by adding a null data point ({ x: 6, y: null }) to the "Bullet Series 4": https://jsfiddle.net/ouroborosDragon/twkvLhd0/2/

[AleksueiR]

@pawelfus Thank you for the workaround with the formatter since I do need to keep the accessibility module enabled.

Missing cells in the first row can be fixed by adding a null data point ({ x: 6, y: null }) to the "Bullet Series 4": https://jsfiddle.net/ouroborosDragon/twkvLhd0/2/

[AleksueiR]

@TorsteinHonsi I think this will be the best solution as I ran into another problem.

I need the table to be rendered in a different node, not immediately after the chart, so I specify a custom viewData.onclick implementation under menuItemDefinitions.

viewData: function() { customDiv.innerHTML = this.getTable(); }

This works well enough and the table is rendered where specified. However, none of the accessibility attributes are applied to this table anymore since the accessibility module wraps the original viewData prototype function to add these attributes. The original function is no longer called and no attributes are applied.

Any suggestions on how to deal with this?

[AleksueiR]

@TorsteinHonsi I think this will be the best solution as I ran into another problem.

I need the table to be rendered in a different node, not immediately after the chart, so I specify a custom viewData.onclick implementation under menuItemDefinitions.

viewData: function() { customDiv.innerHTML = this.getTable(); }

This works well enough and the table is rendered where specified. However, none of the accessibility attributes are applied to this table anymore since the accessibility module wraps the original viewData prototype function to add these attributes. The original function is no longer called and no attributes are applied.

Any suggestions on how to deal with this?

[TorsteinHonsi]

You can create your own chart.dataTableDiv to hijack the logic in the viewData function: http://jsfiddle.net/quL1ajuc/

[TorsteinHonsi]

You can create your own chart.dataTableDiv to hijack the logic in the viewData function: http://jsfiddle.net/quL1ajuc/

[AleksueiR]

@TorsteinHonsi thanks, that will do.

[AleksueiR]

@TorsteinHonsi thanks, that will do.

[AleksueiR]

Err, this doesn't work together with the accessibility module, since the function adding accessibility attributes is skipped if the dataTableDiv is already defined:

highcharts/js/modules/screen-reader.src.js

Line 818 in 9ece0d4

if (!this.dataTableDiv) {

[AleksueiR]

Err, this doesn't work together with the accessibility module, since the function adding accessibility attributes is skipped if the dataTableDiv is already defined:

highcharts/js/modules/screen-reader.src.js

Line 818 in 9ece0d4

if (!this.dataTableDiv) {

[oysteinmoseng]

@AleksueiR I think you would want to add these attributes manually here, the accessibility module will not really make intelligent guesses with your custom table regardless.

[oysteinmoseng]

@AleksueiR I think you would want to add these attributes manually here, the accessibility module will not really make intelligent guesses with your custom table regardless.

[AleksueiR]

@oysteinmoseng I'll probably do that, but I'm not using a custom table here - I'm just trying to render it in a custom location.

Works fine: http://jsfiddle.net/ouroborosDragon/quL1ajuc/3/
Stops working after adding the accessibility module: http://jsfiddle.net/ouroborosDragon/quL1ajuc/2/

[AleksueiR]

@oysteinmoseng I'll probably do that, but I'm not using a custom table here - I'm just trying to render it in a custom location.

Works fine: http://jsfiddle.net/ouroborosDragon/quL1ajuc/3/
Stops working after adding the accessibility module: http://jsfiddle.net/ouroborosDragon/quL1ajuc/2/

[oysteinmoseng]

@AleksueiR Ouch, yes, that is obviously not intentional. I'll push a quick fix.

[oysteinmoseng]

@AleksueiR Ouch, yes, that is obviously not intentional. I'll push a quick fix.

[AleksueiR]

@oysteinmoseng Thanks!

[AleksueiR]

@oysteinmoseng Thanks!

[oysteinmoseng]

@AleksueiR Try this: http://jsfiddle.net/quL1ajuc/4/

[oysteinmoseng]

@AleksueiR Try this: http://jsfiddle.net/quL1ajuc/4/

[AleksueiR]

Yeap, the table renders now, but no accessibility attributes are applied.
Is this the intended behaviour - if I'm rendering the table outside of the default location, I should be responsible for its accessibility attributes?

[AleksueiR]

Yeap, the table renders now, but no accessibility attributes are applied.
Is this the intended behaviour - if I'm rendering the table outside of the default location, I should be responsible for its accessibility attributes?

[oysteinmoseng]

@AleksueiR Intended for now, but we will be rewriting this logic and moving the accessibility attributes to the export-data module eventually. Looking at the code, however, I am not sure why the accessibility logic is bypassed in this case. I think it may have been meant as a safeguard against adding the table multiple times, but that does not seem to be an issue regardless now.

[oysteinmoseng]

@AleksueiR Intended for now, but we will be rewriting this logic and moving the accessibility attributes to the export-data module eventually. Looking at the code, however, I am not sure why the accessibility logic is bypassed in this case. I think it may have been meant as a safeguard against adding the table multiple times, but that does not seem to be an issue regardless now.

[AleksueiR]

@oysteinmoseng Fair enough. I'll write my own accessibility logic for now. Thank you for the help!

I wonder if it makes sense to modify the viewData prototype function so it accepts an optional node reference for the table to be rendered on top of. If not specified, it falls back to the default location.

[AleksueiR]

@oysteinmoseng Fair enough. I'll write my own accessibility logic for now. Thank you for the help!

I wonder if it makes sense to modify the viewData prototype function so it accepts an optional node reference for the table to be rendered on top of. If not specified, it falls back to the default location.

[oysteinmoseng]

@AleksueiR You can of course do that, although that is kind of what chart.dataTableDiv does

[oysteinmoseng]

@AleksueiR You can of course do that, although that is kind of what chart.dataTableDiv does

[TorsteinHonsi]

@oysteinmoseng Will you do the change we agreed on? Make the export-data.js table aria-compatible out of the box, so that we can remove the override in accessibility.js.

[TorsteinHonsi]

@oysteinmoseng Will you do the change we agreed on? Make the export-data.js table aria-compatible out of the box, so that we can remove the override in accessibility.js.