Multiple charts on one page

To display multiple charts on one page, you need a div element for every chart to be inserted into. Then you can define as many charts as you with inside the document.onChartLibLoaded = function()

Example of multiple div elements

Here is a simple example of two div elements for displaying one chart in each div.

<body>
	(...)
	<div id="chart1">Here comes the first chart</div>
	<div id="chart2">Here comes the second chart</div>
	(...)
</body>

The javascript part of displaying two charts

Inside the document.onChartLibLoaded = function() you can define as many charts as you wish and assign them to the particular divs by their id-values:

<script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js"></script>
<script type="text/javascript">
  
document.onChartLibLoaded = function() {
 
/* first chart */
    (...)     
    new ac.ACLineChartBuilder()
        .setTitle("First chart") 
        .setData(myData1)
        .build()
        .addToDom('chart1');
 
/* second chart */
   (...)
    new ac.ACLineChartBuilder()
        .setTitle("Second chart")
        .setData(myData2) 
        .build()
        .addToDom('chart2');  
}

A complete example of a html-page with two charts

Here is a complete example with html headers and data sets for each chart

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
 <title>Two charts in one page example</title>
</head>

<body>
<div id="chart1">          
</div>
<div id="chart2">          
</div>

<script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js"></script>
<script type="text/javascript">
 
document.onChartLibLoaded = function() {

/* first chart */        
        
    var myData1 = "Month, Max Temperature, Min Temperature\n"+
                 "Jan, 26.7, 18.7\n"+
                 "Feb, 26.9, 18.6\n"+
                 "Mar, 27.6, 19.6\n"+
                 "Apr, 28.2, 20.4\n"+
                 "May, 29.3, 21.3\n"+
                 "Jun, 30.3, 22.3\n"; 
    
    new ac.ACLineChartBuilder()
        .setTitle("First chart")  
        .setData(myData1) 
        .build() 
        .addToDom('chart1');
/* end of first chart */        


/* second chart */
  
var myData2 = "Month, Max Temperature, Min Temperature\n"+
                 "Jan, 26.7, 52.7\n"+
                 "Feb, 26.9, 48.6\n"+
                 "Mar, 27.6, 39.6\n"+
                 "Apr, 28.2, 40.4\n"+
                 "May, 29.3, 31.3\n"+
                 "Jun, 30.3, 32.3\n"; 
    
    new ac.ACLineChartBuilder()
    
        .setTitle("Second chart")
        .setData(myData2)  
        .build()
        .addToDom('chart2');
/* end of second chart */

        
}   // end of eventHandler function
 
</script>
</body>
</html>