Inserting your data

Welcome to the “Inserting your data”-guide. In this tutorial you will learn:

  • What a value set is.
  • How to set the chart´s data source from an internal string or an external csv file.
  • How to use other decimal separators and/or delimiters

This article covers only the very basics of data import. A complete description can be found in the reference manual.

What is a value set?

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:

  • to a single line in a line chart,
  • a set of columns in a column chart
  • or to a whole piechart, since piecharts can´t have more than one value set.

Now we want to examine how to get data into a chart:

How to set the chart's data source

Data can be added in two ways to your chart

  1. as a string (CSV-formatted)
  2. in an external file in CSV-format

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.

Using a string for data input

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)
    // ...

Using an external file for data input

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")
    // ...

Other decimal separators for floating point numbers

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(",")
    // ...

Other delimiters than the comma

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.