Create a chart with JavaScript

On this page we show you how to create a basic JavaScript chart and add it to a HTML page.

Start with a empty HTML page

Let´s start with an empty HTML-page. We 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 line chart</title>
</head>
 
<body>
</body>
</html> 

Include the arcadiaCharts-Library in the HTML page

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 JavaScript 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 event handler 
      // 'onChartLibLoaded' will be called.  
      // Put chart-creation JavaScript-Code here ...
    }  
  </script>
</body>

Chart creation with JavaScript

The creation of the chart is done by the ChartBuilder.

Complete example:

<body>
<div id="myChart"></div>
  
<script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js">
</script>
<script type="text/javascript">
  
document.onChartLibLoaded = function() {
 
    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"+
                "Jul, 30.8, 23.1, 15\n"+
                "Aug, 31.5, 23.4, 11.2\n"+
                "Sep, 31.4, 23.1, 19.8\n"+
                "Oct, 30.5, 22.4, 57.9\n"+
                "Nov, 28.9, 21.3, 76.2\n"+
                "Dec, 27.3, 19.4, 96.5\n";
  
    // Chart creation with ChartBuilder
    new ac.ACLineChartBuilder()
        .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 true if you didn´t change the folder structure provided with our zipped file and save 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"+
        "Jul, 30.8, 23.1, 15\n"+
        "Aug, 31.5, 23.4, 11.2\n"+
        "Sep, 31.4, 23.1, 19.8\n"+
        "Oct, 30.5, 22.4, 57.9\n"+
        "Nov, 28.9, 21.3, 76.2\n"+
        "Dec, 27.3, 19.4, 96.5\n";

The code above assigns a string with data in CSV-format 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 Microsoft Excel (R) export format.

The individual rows have to be separated by the characters “\n”.
The first row contains the title and the column titles. The following rows contain one data line each.

Chart creation

The actual JavaScript 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. To simplify we set only a title and the dataset in this case. Please note that you can chain method calls using the fluent interface style.

With the line

new ac.ACLineChartBuilder()

a new builder object is created. This is the line where you decide that the chart is going to be a line 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 above defined data set to the chart.

.build()

Creates the chart. Set this when you configuration is complete.

The chart was created but until now it has not been displayed in you 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).

Full source code of this demo

Here is once again the complete html page we built:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>my first line 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"+
                "Jul, 30.8, 23.1, 15\n"+
                "Aug, 31.5, 23.4, 11.2\n"+
                "Sep, 31.4, 23.1, 19.8\n"+
                "Oct, 30.5, 22.4, 57.9\n"+
                "Nov, 28.9, 21.3, 76.2\n"+
                "Dec, 27.3, 19.4, 96.5\n";
  
    // Chart creation with ChartBuilder
    new ac.ACLineChartBuilder()
        .setTitle("Climate at Honolulu, Hawaii")
        .setData(myData)
        .build()
        .addToDom('myChart');
}
</script>
  
</body>
</html>

Home | Features | Demos | Buy | Support | Company

© Arcadia Software GmbH | Heinestrasse 21 | 50931 Cologne | Germany