If you have any problems with arcadiaCharts or the displayed chart doesn´t meet your expectations, you can display logs of everything from errors to theme options. There are five levels of log output:
ac.DivLogger.addLevel( ac.LogLevel.ERROR ); ac.DivLogger.addLevel( ac.LogLevel.WARN ); ac.DivLogger.addLevel( ac.LogLevel.INFO ); ac.DivLogger.addLevel( ac.LogLevel.DEBUG ); ac.DivLogger.addLevel( ac.LogLevel.TRACE );
ac.LogLevel.ERROR - There are errors in the code or a configuration is wrong.
ac.LogLevel.WARN - Something was wrong but the library could correct it.
ac.LogLevel.INFO - Information about decisions that were automatically taken by the library.
ac.LogLevel.DEBUG - More information to help find mistakes.
ac.LogLevel.TRACE - Very detailed information on every aspect of the chart.
ac.LogLevel.ERROR and ac.LogLevel.WARN are on by default and don´t need to be activated. If you have errors or warnings in your chart and wish to publish the chart anyway, you can disable the logs with the code:
ac.DivLogger.removeLevel( ac.LogLevel.ERROR ); ac.DivLogger.removeLevel( ac.LogLevel.WARN );
Sometimes its hard to find an error, e.g. a variable expected a certain data type and a string was inserted. In this case we recommend a try…catch statement.
The following example has only a small typo: It calls .setTidtle(”…”) instead of the correct .setTitle(”…”)
<script type="text/javascript"> document.onChartLibLoaded = function() { try { // Your Data in CSV-Format var myData = "Month,Temperature, Precipitation\n"+ "Jan, 4, 79\n"+ "Feb, 4, 56\n"+ "Mar, 7, 70\n"+ "Apr, 10, 46\n"+ "May, 13, 59\n"+ "Jun, 16, 59\n"; // Chart creation with ChartBuilder new ac.ACLineChartBuilder() .setTidtle("Climate at Loch Ness, Scotland") .setData(myData) .build() .addToDom('myChart'); } catch (err) { txt="There was an error in this chart.\n\n"; txt+="Error description: " + err + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script>
The result is:
Learn more about try…catch statements in JavaScript at developer.mozilla.org
When testing arcadiaCharts locally by editing html-files and starting them with your browser, you may encounter problems whey you use the Internet Explorer or Google Chrome. These browsers have same-origin policies which stop the execution of the arcadiaCharts library when executed locally.
Ways to counter this:
Learn more about same-origin policies at w3.org.
Please check our website for the latest versions of arcadiaCharts. Should you be unsure which version you are using, you can get the version number by calling ac.Version. E.g. by inserting alert(ac.Version); at the end of your script:
<script type="text/javascript"> document.onChartLibLoaded = function() { // Your Data in CSV-Format var myData = "Month,Temperature, Precipitation\n"+ "Jan, 4, 79\n"+ "Feb, 4, 56\n"+ "Mar, 7, 70\n"+ "Apr, 10, 46\n"+ "May, 13, 59\n"+ "Jun, 16, 59\n"; // Chart creation with ChartBuilder new ac.ACLineChartBuilder() .setTitle("Climate at Loch Ness, Scotland") .setData(myData) .build() .addToDom('myChart'); alert(ac.Version); } </script>
When using CSV data blocks please remember that every row and every column needs a heading for describing and allocating the data correctly. So the smallest possible csv block with only a single data entry contains two rows and two columns:
var myData = "Description, Value\n"+ "Sales, 123 \n";
The following example will not work in arcadiaCharts and will result in an error message ”[ERROR] - com.arcadiacharts.charts.linechart.LineChart2DBuilder - Uncaught exception during build: java.lang.IndexOutOfBoundsException - Index: 0, Size: 0”
Not working CSV data:
var myData = "ValueOne\n123\n";
For best results in Internet Explorer we recommend the following HTML doctype and header:
<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > <title>Your title</title> (...) </head> <body> (...) </body> </html>