Chart not appearing with .resize but does with .render

SimonJackson — Sun, 12 Dec 2021 00:21:14 GMT

I am dynamically creating a chart within a map popup (triggered when user clicks the map) using v3.3 (same behaviour exists with 3.2)

var c = dojo.create("div", {
          id: "demoChart"
        }, dojo.create('div'));

After setting the chart properties (data, theme, etc), if I call

chart.render

, the chart renders correctly but at the wrong size (too big for the infoWindow container div).

However, if I call

chart.resize(175, 145)

, the chart does get created at the correct size, but does not get created on first click, but the second click.

To replicate please see this JSFiddle, and refer to lines 49-53 in the Javascript.

  map.infoWindow.setContent(c);
  // Chart Resize will resize the DIV as needed.
  // However, the initial click will not show the chart
  chart.resize(175, 145);
  // Chart Render shows the chart on first click, but does not resize the div
  //chart.render();

I was under the impression that the resize method included calling render within it. Therefore I am not too sure why I am getting this behaviour.

I need to know what needs changing in order to create the chart div at the same size as the parent div that it sits within, and appear everytime.

(Bonus points for why my tooltips arent appearing as well).

Re: Chart not appearing with .resize but does with .render

SimonJackson — Fri, 18 Jan 2013 01:27:48 GMT

Answer here at Stack Exchange.

The reason that the chart is rendering with the default size (400 x 300px) is because the chart node (div#demoChart) does not have any dimensions.

Furthermore, until the chart node div is visible, it will not have any actual dimensions (only style dimensions) for the chart to use. It then falls back to the default size of 300 x 400px.

To make your code work:

Add a css style for the div

#demoChart {
width: 175px;
height: 145px;
}
Create the chart after you have shown the info window and the chart node is actually visible. The chart gets it dimensions upon instantiation (in the constructor() method, rather than in the render() method as you might expect).

However, still not sure why my tooltips are not appearing. Any ideas?

topic Re: Chart not appearing with .resize but does with .render in ArcGIS JavaScript Maps SDK Questions

Chart not appearing with .resize but does with .render

Re: Chart not appearing with .resize but does with .render