Using CSV Data

Overview

By default AnyChart get data in proprietary XML format. This format gives the vary flexible way of controlling any settings of every point on the chart. At the same time XML can create pretty large, when data set includes thousands of points.

If you have no need to configure each point individually you can use CSV data input to make data file smaller and decrease loading time.

Using CSV allows to make data file smaller for each point description contains only data and fields separators and nothing more.

to top

Adding Data Sets in CSV format

The idea of working with CSV data is in adding the data sets themselves and mapping these data sets to regular AnyChart data series.

AnyChart can use several CSV data blocks, we call them data sets. These data sets are defined in <data_sets>, subnode of <anychart> node. The data set is described in <csv_data_set name="dataSetID"> node, name attribute is the unique identifier used to map series to the set. The data itself is contained in <csv_data_set> node.

Below you can see how one should define a single CSV data set in XML:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <data_sets>
04     <csv_data_set name="primaryDataSet"><![CDATA[
05 2005-10-31,55.20,57.98,54.75,57.59,33601600
06 2005-10-28,56.04,56.43,54.17,54.47,27492400
07 2005-10-27,56.99,57.01,55.41,55.41,14697900
08 2005-10-26,56.28,57.56,55.92,57.03,22556900
09 2005-10-25,56.40,56.85,55.69,56.10,16611700
10 2005-10-24,55.25,56.79,55.09,56.79,21776900
11 2005-10-21,56.84,56.98,55.36,55.66,28454500
12 2005-10-20,54.47,56.50,54.35,56.14,48491500
13 2005-10-19,52.07,54.96,51.21,54.94,36024400
14 2005-10-18,53.25,53.95,52.20,52.21,21771000
15 2005-10-17,53.98,54.23,52.68,53.44,22029800
16 2005-10-14,54.03,54.35,52.79,54.00,36984000
17 2005-10-13,49.44,53.95,49.27,53.74,66627700
18 ]]></csv_data_set>
19   </data_sets>
20 </anychart>

As you can see the data is contained in <csv_data_set> node. CSV often contains column names in the fist row - AnyChart doesn't accept this - <csv_data_set> can contain only data rows.

AnyChart use double quotes " (ASCII code 34) to enclose the strings that contain separator symbols, if you need to use double quote in the field value you should escape it with reverse slash. For example "\"a,b,c\"" allows you to get "a,b,c" string as the value.

By default AnyChart treats "," as the columns separator, and new line "\n" a as rows separator, if you'd like to use another separators - you need to define the explicitly using rows_separator and columns_separator attributes in <csv_data_set> node. XML Sample below shows CSV data with semicolon ";" used as the columns separator, and Carriage Return with Line Feed "\r\n" used to separate rows:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <data_sets>
04     <csv_data_set name="primaryDataSet"><![CDATA[
05 January;525.20
06 February;676.04
07 March;861.99
08 April;134.28
09 May;256.40
10 June;241.25
11 July;781.84
12 ]]></csv_data_set>
13   </data_sets>
14 </anychart>

to top

Mapping data from CSV Data Sets

After adding CSV data you need to map them to chart data series. For each series in the chart - mapping is configured individually. This mapping defines what column in CSV data set are used as the values for series.

XML below shows the mapping for the two different series:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <charts>
04     <chart plot_type="CategorizedVertical">
05       <data>
06         <series name="Series 1" type="Spline" data_source="CSV">
07           <csv_data_mapping data_set="simpleDataSet">
08             <field column="0" name="name" />
09             <field column="1" name="y" />
10           </csv_data_mapping>
11         </series>
12         <series name="Series 2" type="Bar" data_source="CSV">
13           <csv_data_mapping data_set="simpleDataSet">
14             <field column="0" name="name" />
15             <field column="2" name="y" />
16           </csv_data_mapping>
17         </series>
18         <series name="Series 3" type="SplineArea" data_source="CSV">
19           <csv_data_mapping data_set="simpleDataSet">
20             <field column="0" name="name" />
21             <field column="3" name="y" />
22           </csv_data_mapping>
23         </series>
24       </data>
25     </chart>
26   </charts>
27   <data_sets>
28     <csv_data_set name="simpleDataSet"><![CDATA[
29 P1,174,5854,3242
30 P2,197,4171,3171
31 P3,155,1375,700
32 P4,15,1875,1287
33 P5,66,2246,1856
34 P6,85,2696,1126
35 P7,37,1287,987
36 P8,10,2140,1610
37 P9,44,1603,903
38 ]]></csv_data_set>
39   </data_sets>
40 </anychart>

As you can see when CSV data is used data_source attribute should be set to "CSV" - if you don't set mapping info is ignored and series is treated as regular XML.

All mapping data is set in <csv_data_mapping> nod. So series can use any defined data set, you should set its name in data_set attribute: <csv_data_mapping data_set="simpleDataSet"> in XML sample above.

After the data source is defined you should map fields for the series. Mapping is set via listing <field> nodes in <csv_data_mapping> node. Syntax is the following: <field column="0" name="y"/>, where column - is the index of the column in CSV table (indexing start from zero), and name - is the name of XML attribute that will use this column data as the source.

Please take a look at the live sample of using one data set in CSV format and three data series, that get the same data for names (name="name")and different column for values ( name="y"):

Live Sample:  CSV - Data Mapping Simple Samples

For the different plot types and different series types - different columns should be used. For example to map scatter with bubbles the syntax looks like:

XML Syntax
Plain code
01 <csv_data_mapping data_set="data">
02   <field column="0" name="x" />
03   <field column="1" name="y" />
04   <field column="2" name="size" />
05 </csv_data_mapping>

Please refer to the table below that lists specific fields names for different plot types and series, with the fields keywords to be used for mapping:

CategorizedVertical
CategorizedHorizontal
CategorizedVerticalBySeries
CategorizedHorizontalBySeries

Series Type Field Keywords
Bar name, y
Line name, y
Spline name, y
StepLineForward name, y
StepLineBackward name, y
Area name, y
SplineArea name, y
StepLineForwardArea name, y
StepLineBackwardArea name, y
Marker name, y
Bubble name, y, size
RangeBar name, start, end
RangeArea name, start, end
RangeSplineArea name, start, end
OHLC name, high, low, open, close
Candlestick name, high, low, open, close

Map

Series Type Field Keywords
MapRegion name, y
Marker name(optional), x, y, link(optional)
Bubble name(optional), x, y, size, link(optional)
Line name(optional), x, y, size, link(optional)
Area x, y
Connector x, y

Scatter

Series Type Field Keywords
Bar x, y, name(optional)
Line x, y, name(optional)
Spline x, y, name(optional)
StepLineForward x, y, name(optional)
StepLineBackward x, y, name(optional)
Area x, y, name(optional)
SplineArea x, y, name(optional)
StepLineForwardArea x, y, name(optional)
StepLineBackwardArea x, y, name(optional)
Marker x, y, name(optional)
Bubble x, y, size, name(optional)
RangeBar x, start, end, name(optional)
RangeArea x, start, end, name(optional)
RangeSplineArea x, start, end, name(optional)
OHLC x, high, low, open, close, name(optional)
Candlestick x, high, low, open, close, name(optional)

to top

Using multiple data sets

Sometimes different series within one plot can have unsynchronized data and you can't use the same CSV data table. You can solve this problems using multiple data sets.

As it is said above - when you map series you define a certain data set. So the task is to define the data sets and map them in a right way.

Live sample below two data CSV sets with different data, and two series that use own set:

Live Sample:  CSV - Using Multiple DataSets

to top

Custom attributes mapping

Besides the data fields required to create chart of given series you can add custom data attributes from CSV table, which can be used in labels, tooltips and actions.

Syntax to define custom attribute:

XML Syntax
Plain code
01 <csv_data_mapping data_set="data">
02   <field column="0" name="name" />
03   <field column="4" name="y" />
04   <field column="2" name="MaxTemp" is_custom_attribute="true" />
05   <field column="3" name="MinTemp" is_custom_attribute="true" />
06   <field column="5" name="HeatDegDays" is_custom_attribute="true" />
07   <field column="6" name="TotalRain" is_custom_attribute="true" />
08   <field column="7" name="TotalSnow" is_custom_attribute="true" />
09   <field column="8" name="TotalPrecip" is_custom_attribute="true" />
10   <field column="9" name="SnowonGrnd" is_custom_attribute="true" />
11   <field column="10" name="SpdofMaxGust" is_custom_attribute="true" />
12 </csv_data_mapping>

As XML shows columns number 0 and 4 are used to set data, and all other columns are used as custom attributes. The name of the custom attribute is set in name attribute - names should be unique and doesn't be the same with value fields names. To define that field is a custom attribute is_custom_attribute attribute should be set to True.

Live sample below shows custom attributes defined in CSV data set used in tooltips:

Live Sample:  CSV - Custom Attributes

to top

Using actions with CSV Data

AnyChart has the very flexible system of actions that can be attached to the series or point. When you use CSV data set as a source for series you can't define action for the given point, but you still can define actions for the series parameterized for each point. Actions can accept custom attributes or values.

XML below shows how action should be attached to the series with CSV data, custom attribute url is contained in CSV data set:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <charts>
04     <chart plot_type="CategorizedVertical">
05       <data>
06         <series type="Bar" palette="Default" data_source="CSV">
07           <csv_data_mapping data_set="data">
08             <field column="0" name="name" />
09             <field column="1" name="y" />
10             <field column="2" name="ResourceURL" />
11           </csv_data_mapping>
12           <actions>
13             <action type="navigateToURL" url="{%ResourceURL}" target="_blank" />
14           </actions>
15         </series>
16       </data>
17     </chart>
18   </charts>
19   <data_sets>
20     <csv_data_set name="data"><![CDATA[
21 Google,2022776,"http://google.com/"
22 Yahoo,561753,"http://yahoo.com/"
23 Digg,287318,"http://digg.com/"
24 Wikipedia,195687,"http://wikipedia.org/"
25 ]]></csv_data_set>
26   </data_sets>
27 </anychart>

You can use custom attributes in all other actions, please take a look at the sample:

Live Sample:  CSV - Using Actions

to top

Using one Data Set in different dashboard views

The fact that data sets are not bound to any specific chart you can use them in diffent chart when arranging a dashboard.

Live sample below shows how a single data set is used to create different charts in the dashboard. Both charts use the same column to define the names, but the values are different:

Live Sample:  CSV Data - Candlestick and Bar Charts

to top