Welcome! Here's where you can take the first steps with your arcadiaCharts library. This chapter shows you how to create a basic bar chart and add it to an HTML page.
Please read this chapter carefully until you have understood every single line of code in the examples. All further documentation is based on these fundamentals. We assume that you have already downloaded and unzipped your arcadiaCharts library as described in our installation instructions.
The resulting chart will appear as shown in the screenshot below.
arcadiacharts.nocache.js
in your html page: document.onChartLibLoaded
will be called when the library is loaded and ready to be used.new ac.ACBarChartBuilder()
var mydata=“Title;One;Two\nFirstRow;1;2”;
.setData( mydata)
. Add some more properties like .setTitle(“My Title”)
..build()
.addToDom('myDIV')
If you have already completed one of the basic tutorials for a line chart or a pie chart you are welcome to read this tutorial but note that most of the explanations are identical. The only differences between the basic tutorials are:
new ac.ACLineChartBuilder()
, new ac.ACBarChartBuilder()
or new ac.ACPieChartBuilder()
according to the type of the chart you wish to draw.For this tutorial let´s start with an empty HTML-page. I would recommend saving your html file into the root folder where you extracted your library:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>my first bar chart</title> </head> <body> </body> </html>
The include command <script type=“text/javascript” src=“arcadiacharts/arcadiacharts.nocache.js”></script> can be used anywhere inside your webpage. Just make sure that it is called before using one of its library functions.
<body> <script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js"></script> </body>
Before a chart can be created the arcadiaCharts-library must be loaded completely. As soon as this has completed the event-handler “onChartLibLoaded” will be called. The best approach is to put the code which creates the chart directly into a routine which is assigned to the event handler. This is shown in the example below:
<body> <script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js"></script> <script type="text/javascript"> document.onChartLibLoaded = function(){ // As soon as arcadiaCharts has been loaded completely the following event handler 'onChartLibLoaded' will be called //Put chart-creation JavaScript-Code here ... } </script> </body>
The creation of the chart is done by the ChartBuilder.
<body> <div id="myChart"></div> <script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js"></script> <script type="text/javascript"> document.onChartLibLoaded = function() { // Your Data in CSV-Format var myData = "Month,Max Temperature, Min Temperature, Precipitation\n"+ "Jan, 26.7, 18.7, 90.2\n"+ "Feb, 26.9, 18.6, 56.1\n"+ "Mar, 27.6, 19.6, 55.9\n"+ "Apr, 28.2, 20.4, 39.1\n"+ "May, 29.3, 21.3, 28\n"+ "Jun, 30.3, 22.3, 12.7\n"; // Chart creation with ChartBuilder new ac.ACBarChartBuilder() .setTitle("Climate at Honolulu, Hawaii") .setData(myData) .build() .addToDom('myChart'); } </script> </body>
Preliminaries
<div id="myChart"></div>Empty DIV element which will contain the chart later on.
<script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js"></script>Adds the arcadiaCharts-library to the HTML page. The example assumes that the library is stored in the local directory
/arcadiacharts/
. This should be the case if you didn´t change the folder structure provided with our zipped file and you saved your html file in the same folder as all the other html files that came with our library.
<script type="text/javascript">
The actual JavaScript code creating the chart resides between <script type=“text/javascript”>
and </script>
at the end of the page.
var myData = "Month,Max Temperature, Min Temperature, Precipitation\n"+ "Jan, 26.7, 18.7, 90.2\n"+ "Feb, 26.9, 18.6, 56.1\n"+ "Mar, 27.6, 19.6, 55.9\n"+ "Apr, 28.2, 20.4, 39.1\n"+ "May, 29.3, 21.3, 28\n"+ "Jun, 30.3, 22.3, 12.7\n";In these lines, a string with data in CSV-format is assigned to the variable “myData”. In this example we use one long string which is distributed over multiple lines for better legibility. The order of the data is equivalent to the one used by the Excel export format.
Chart creation
The actual chart creation takes place now, after all preliminaries have been completed. The chart builder allows many different configuration settings which are covered in other tutorial articles and the Reference Manual. For simplicity's sake we only set a title and the dataset in this case. Please note that you can chain method calls by using the fluent interface pattern.
The line
new ac.ACBarChartBuilder()causes a new builder object to be created. This is the line where you define the chart type. In this tutorial it is going to be a bar chart
.setTitle("Climate at Honolulu, Hawaii")This sets the chart title. This line can be omitted if no title is required.
.setData(myData)Adds the dataset defined above to the chart.
.build()Creates the chart. Set this when your configuration is complete.
The chart has now been created but it it is not displayed on your website yet. You have to tell the chart the ID of the div where it has to be placed:
.addToDom('myChart');Adds the created chart object to the DOM (the HTML page).
To recapitulate, here is the complete html page we have built so far:
Download this example file here
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>my first bar chart</title> </head> <body> <div id="myChart"></div> <script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js"></script> <script type="text/javascript"> document.onChartLibLoaded = function() { // Your Data in CSV-Format var myData = "Month,Max Temperature, Min Temperature, Precipitation\n"+ "Jan, 26.7, 18.7, 90.2\n"+ "Feb, 26.9, 18.6, 56.1\n"+ "Mar, 27.6, 19.6, 55.9\n"+ "Apr, 28.2, 20.4, 39.1\n"+ "May, 29.3, 21.3, 28\n"+ "Jun, 30.3, 22.3, 12.7\n"; // Chart creation with ChartBuilder new ac.ACBarChartBuilder() .setTitle("Climate at Honolulu, Hawaii") .setData(myData) .build() .addToDom('myChart'); } </script> </body> </html>
And this is a full scale screenshot of the resulting chart:
Congratulations, you have just created your first bar chart.
to be edited once the articles are done…
Now that you have understood the basics you could move on to the more complex topics: