Google Visualizations Generated HTML

(It's not necessary for you to understand the generated HTML below, but you may find it interesting.)

<html>
   <body>
      Number of Sprockets Sold By Rep<br/>
      <span id="j_id0:j_id2">
         <div id="j_id0:j_id2:j_id3:chart_div" style="width:900px; height:300px;">

            <script src="http://www.google.com/jsapi" type="text/javascript"></script>
            
            <script type="text/javascript"> 
               google.load("visualization", "1", {packages: ["annotatedtimeline" ]}); 
               google.setOnLoadCallback(drawTimeline);    
               function drawTimeline() {     
                  var data = new google.visualization.DataTable( 
                     eval( '({
                          cols: [
		             {id: "col1", label: "Date", type: "date"},
		             {id: "col2", label: "Cosmo G. Spacely", type: "number"},
		             {id: "col3", label: "Account Name", type: "string"},
	                     {id: "col4", label: "Opportunity Amount", type: "string"}], 
                         rows: [
		             [{v: new Date(2008, 7, 1, 0, 0, 0), f: "7/1/2008"},{v: 1.0},
		              {v: "Edge Communications"},{v: 60000.0}],
		             [{v: new Date(2008, 7, 7, 0, 0, 0), f: "7/7/2008"},{v: 2.0},
		              {v: "Grand Hotels & Resorts Ltd"},{v: 90000.0}] 
                            ...
                         ]
                  })'));    
                  var chartDiv = document.getElementById('j_id0:j_id2:j_id3:chart_div'); 
                  var chart = new google.visualization.AnnotatedTimeLine( chartDiv );     
                  chart.draw(data, { displayZoomButtons: false, 
                                     zoomStartTime: new Date(2008, 07, 01), 	        
                                     zoomEndTime: new Date(2008, 09, 30), 
                                     colors: ['#C2CD23']}); 
                 }
            </script>

         </div>
      </span>
   </body>
</html>