Welcome to the “Inserting your data”-guide. In this tutorial you will learn:
This article covers only the very basics of data import. A complete description can be found in the reference manual.
In this and many other chapters you read a lot about “value sets”. A value set is basically a single data column which can be added to an axis. In addition to just the column values, a value set contains “point values”.
Lets have a closer look at the data we used in the first tutorials:
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 table above can be broken up into the following value sets:
ValueSets
Month | Max Temperature | Min Temperature | Precipitation |
---|---|---|---|
Jan | 26.7 | 18.7 | 90.2 |
Feb | 26.9 | 18.6 | 56.1 |
Mar | 27.6 | 19.6 | 55.9 |
Apr | 28.2 | 20.4 | 39.1 |
May | 29.3 | 21.3 | 28 |
Jun | 30.3 | 22.3 | 12.7 |
Jul | 30.8 | 23.1 | 15 |
Aug | 31.5 | 23.4 | 11.2 |
Sep | 31.4 | 23.1 | 19.8 |
Oct | 30.5 | 22.4 | 57.9 |
Nov | 28.9 | 21.3 | 76.2 |
Dec | 27.3 | 19.4 | 96.5 |
Each data row in the table above is a value set which corresponds either:
Now we want to examine how to get data into a chart:
Data can be added in two ways to your chart
CSV stands for “comma separated values”, a format widely used for data interchange. A detailed description of csv can be found for example in wikipedia.
Each value in a string has to be separated by a comma. Lines have to be separated by the newline sign “\n”. The climate table above has to be expressed as a string using the following format:
var stringWithData = "Month,Max Temperature, Min Temperature, Precipitation\nJan, 26.7, 18.7, 90.2\nFeb, 26.9, 18.6, 56.1\nMar, 27.6, 19.6, 55.9\nApr, 28.2, 20.4, 39.1\nMay, 29.3, 21.3, 28\nJun, 30.3, 22.3, 12.7\nJul, 30.8, 23.1, 15\nAug, 31.5, 23.4, 11.2\nSep, 31.4, 23.1, 19.8\nOct, 30.5, 22.4, 57.9\nNov, 28.9, 21.3, 76.2\nDec, 27.3, 19.4, 96.5\n";
For better readability the string is often divided into multiple lines:
var stringWithData = "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 string containing the data is added to the chart using the setData( string )
command:
new ac.ACLineChartBuilder() // ... .setData(stringWithData) // ...
Instead of using data in a string you can load the data from an external file.
The data format is the same as for the data in the string, except that the “\n” characters have to be “real” line breaks as shown in the example below:
Month,Max Temperature, Min Temperature, Precipitation Jan, 26.7, 18.7, 90.2 Feb, 26.9, 18.6, 56.1 Mar, 27.6, 19.6, 55.9 Apr, 28.2, 20.4, 39.1 May, 29.3, 21.3, 28 Jun, 30.3, 22.3, 12.7 Jul, 30.8, 23.1, 15 Aug, 31.5, 23.4, 11.2 Sep, 31.4, 23.1, 19.8 Oct, 30.5, 22.4, 57.9 Nov, 28.9, 21.3, 76.2 Dec, 27.3, 19.4, 96.5
The data is loaded into arcadiaCharts using the command setDataUrl( csvFile )
.
new ac.ACLineChartBuilder() // ... .setDataUrl("/myPath/myData.csv") // ...
The default format uses a point ”.” as decimal separator, e.g. 1234.56
. If a comma or any other character is to be used you have to define the other character with the setDecimalSeparator( separator )
.
The example below specifies a comma as decimal separator:
new ac.ACLineChartBuilder() // ... .setDecimalSeparator(",") // ...
In many countries the semicolon ”;” is often used as a delimiter.
The delimiter can be defined with the .setCSVSeparator( delimiter )
command as shown in the example below:
new ac.ACLineChartBuilder() // ... .setCSVSeparator(";") // set the semicolon as delimiter. // ...
Congratulations, you know everything you need to start working with data sources.