Chart not appearing with .resize but does with .render

Question

I am dynamically creating a chart within a map popup (triggered when user clicks the map) using dojo 1.7 (built into the Esri API that I am using).

 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.

Answer 1

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:

1. Add a css style for the div

   #demoChart {
     width: 175px;
     height: 145px;
   }
   

2. 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).

I have edited your JSfiddle to make it work (view JSfiddle).