Chart not appearing with .resize but does with .render

920
1
01-16-2013 12:52 AM
SimonJackson
Occasional Contributor III
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).
0 Kudos
1 Reply
SimonJackson
Occasional Contributor III
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?
0 Kudos