Re: div inside a div not accessible

asgallant

unread,

Oct 11, 2012, 12:10:49 PM10/11/12

to google-visua...@googlegroups.com

There shouldn't be any issue accessing "chart_tip", unless you draw a chart in "chart_div" first. See example here: http://jsfiddle.net/asgallant/Fs7S7/

On Thursday, October 11, 2012 11:42:45 AM UTC-4, jiggi wrote:

I am getting an exception the container is null or not defined when I try to use div inside a div. I can access chart_div but not chart_tip in the below code. Please help.

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type = "text/javascript" src = "/life/web/js/jquery-1.7.1.min.js"></script>
     <script type = "text/javascript" src="/life/web/js/jquery.qtip-1.0.0-rc3.js"></script>

    <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
      //google.setOnLoadCallback(drawChart);

function drawBar() {
          var data = google.visualization.arrayToDataTable([
            ['K', 'S', 'Y'],
            ['0', 1000,      400],
            ['50', 1170,      460],
            ['75', 660,       1120],
            ['100', 1030,      540]
          ]);

          var options = {
            hAxis: {titleTextStyle: {color: 'red'}},
            isStacked: true,
            width:70,
            height:70,
            fontSize:5

          };

          var chart = new google.visualization.ColumnChart(document.getElementById('chart_tip'));
          chart.draw(data, options);

        }
    </script>
</head>
<body>

<div id="chart_div" >
<div id = "chart_tip"></div>

drawBar();

</div>

       </body>
</html>

jiggi

unread,

Oct 12, 2012, 11:07:02 AM10/12/12

to google-visua...@googlegroups.com

I am sorry. You are right. I would like to draw chart on chart_div and also chart_tip. I would like to hide the chart_tip and display it on mouse over. Why is that a problem? Kindly advise.

asgallant

unread,

Oct 12, 2012, 2:00:24 PM10/12/12

to google-visua...@googlegroups.com

When you draw a chart in a container div, all of the contents of the div are overwritten, so chart_tip doesn't exist when you try to use it. Put chart_tip outside chart_div and it should work fine.

As an aside, drawing charts in hidden divs can be problematic. There are multiple ways around the issues, but generally I recommend unhiding the div prior to drawing the chart and hiding it again in a "ready" event listener for the chart, eg:

var tip = document.getElementById('chart_tip');
tip.style.display = 'block';
var chart = new google.visualization.ColumnChart(tip);
var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
  tip.style.display = 'none';
  google.visualization.events.removeListener(runOnce);
});
chart.draw(data, {
  height: 400,
  width: 600
});

Reply all

Reply to author

Forward