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()
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>
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'); }
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>