A CSV visualisation is the most basic of visualisations, so if you are new to DVF this is a great place to start.
This page will cover creating a `Spline chart` visualisation on a `Basic page` using the data from an uploaded 
`CSV file`.

## Configure the field

A DVF field can be added to any entity type that uses the Drupal field API. For example `node`, `taxonomy`, `paragraph`,
etc. In this example we assume you are adding your visualisation to a `Basic page` also known as `Standard page` in 
govCMS. 

* Visit `Manage fields` on the `Basic page` content type (Structure > Basic page > Manage fields).
* Click `Add field` and under `Add new field`, select `Visualisation file` (if the CSV was on another server you would
  use Visualisation URL). Give the field a name (eg "DVF CSV File"), Save and continue.
* Defaults are fine for field settings, click Save field settings
* Select the `Visualisation source` and set it to `CSV file`, Set `Allowed file extensions` to `CSV`. Save settings
* Check `Manage form display` and `Manage display` to ensure your new field is visible. If using govCMS default content
  types, under `Manage display` click `Full content` then add to the default view mode.
  
### Uploading a CSV

For this example, the following CSV file will be used `fruit-grown-per-year.csv`. 

```
Fruits,2001,2002,2003
Apple,30,40,50
Orange,70,40,20
Banana,35,90,50
Peach,55,40,100
Blueberry,150,40,60
```

Create a new page (Content > Add content > Basic page) and you should see your new field "DVF CSV File" (or whatever you 
named it). Click "Choose file" and upload your `fruit-grown-per-year.csv` file.

### Define how it will be displayed

In this example, our goal is to do the following:

* Display a line for each year
* Display the fruit types along the bottom X axis
* The count of fruits will be the Y axis

It should look like this

![Example chart](images/csv-spline-example.png)

### Visualisation settings

* Select `Spline chart` under `Visualisation style`
* As we want a line (dataset) for each year, under `Data settings` > `Fields`, ensure each year is selected, do not
  select `fruits` as this will be our axis labels.
* As we want to display the fruit types along the bottom X axis, expand `Axis settings` then `X Axis settings`. In the
  Tick values field, select `Fruits` (the column with the labels).

Click save and view your data visualised as a graph, it should look like the above screenshot.

### Show years on the bottom axis

If you wanted to change up how this data is displayed and have a line for each fruit and the years displayed along the
X axis, you can easily do this using the `X axis grouping` setting (Settings > Axis settings > X axis settings). By 
default this is set to `Group by keys` but changing it to `Group by label values` will switch things around, and result
in your graph looking like this:

![Example chart](images/csv-spline-alt-group-example.png)