dojo / dojo/dojox

dojox/charting: Canvas renderer not working with Tooltip

Open
#306 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
151
Forks
222
PR merge metrics
No merged PRs in 30d

Description

When using one the latest Dojo Toolkit releases (either 1.11, 1.12, 1.14, 1.15 – doesn't matter which one), the canvas based rendering of charts doesn't work with dojox/charting/action2d/Tooltip. It throws an error inside dojo.js, saying e.contains is not a function. The problem seems to arise from dojox/charting/Element.js, inside the cleanGroup method. To be honest, I haven't tested it with other actions so the same problem might occur with them as well.

I've created a JSFiddle which shows the issue:
https://jsfiddle.net/urbandrone/dxog68hk/1/

HTML

<div class="chart"></div>

JavaScript

require([
  'dojox/charting/Chart',
  'dojox/charting/plot2d/Columns',
  'dojox/charting/axis2d/Default',
  'dojox/charting/action2d/Tooltip'
], function (Chart, PlotType, Axis2D, Tooltip) {

  var container = document.querySelector('.chart');
  var data = [10, 20, 30, 20, 50, 40];
  
  var chart = new Chart(container);
  chart.addPlot('default', {
    type: PlotType,
    labels: true,
    labelStyle: 'inside',
    omitLabels: false,
    gap: 10,
    minBarSize: 33,
    maxBarSize: 33
  });
  chart.addAxis('x', { type: Axis2D,	vertical: false });
  chart.addAxis('y', { type: Axis2D, vertical: true });
  chart.addSeries('series a', data);
  
  var tooltip = new Tooltip(chart, 'default');
  
  chart.render();
})

As shown in the JS panel of the fiddle, it uses version 1.12.2 to create a simple chart with tooltips but throws the above mentioned error when the chart is created. Switching the version to 1.10 prevents it from throwing the error, so there must have been a change between 1.10 and 1.11 which causes the problem.

For the application I'm working on I cannot switch back to an older release. However, I also cannot just use the SVG based rendering, because that'll create an awful lot of nodes inside the DOM which massively drops performance in all browsers (all in all, SVG based rendering currently produces ~16.000 nodes while canvas based rendering "only" produces less then 9.500 nodes for the same page) and sometimes causes them to freeze completely.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in dojox/charting/Element.js at the cleanGroup method and reproduce the failure using the linked JSFiddle with Dojo 1.12.2. Compare the behavior with 1.10; done means the Canvas renderer works with dojox/charting/action2d/Tooltip without the e.contains error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.