JSON Datasource

A JSON source is similar to a CSV but due to the multidimensional nature of JSON structure, some additional considerations are required. This page will cover creating a Bar chart visualisation on a Basic page using the data from an uploaded JSON 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 JSON File"), Save and continue.
• Defaults are fine for field settings, click Save field settings
• Select the Visualisation source and set it to JSON file, Set Allowed file extensions to json
• A key thing to note on this page is the Expression, this tells DVF where the data exists in the json document. Our example assumes that the root level of the file is an array that contains the data, so the expression will be $[*]. See here for more information on JSONPath expressions.
• 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 JSON file

For this example, the following JSON file will be used fruit-harvested.json.

[
  {
    "name": "Apple",
    "grown": 30,
    "harvested": 25
  },
  {
    "name": "Orange",
    "grown": 52,
    "harvested": 33
  },
  {
    "name": "Avocado",
    "grown": 48,
    "harvested": 40
  },
  {
    "name": "Banana",
    "grown": 22,
    "harvested": 18
  },
  {
    "name": "Peach",
    "grown": 60,
    "harvested": 42
  }
]

Create a new page (Content > Add content > Basic page) and you should see your new field "DVF JSON File" (or whatever you named it). Click "Choose file" and upload your fruit-harvested.json file.

Define how it will be displayed

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

• Display a bar for both grown and harvested for each fruit
• Display the fruit names along the bottom X axis
• The count of fruits will be the Y axis

It should look like this

Visualisation settings

• Select Bar chart under Visualisation style
• As we want a bar (dataset) for each fruit, under Data settings > Fields, ensure grown and harvested are selected, do not select name as this will be our axis labels.
• As we want to display the fruit names along the bottom X axis, expand Axis settings then X Axis settings. In the Tick values field, select name (the field with the labels).

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

Show types on the bottom axis

If you wanted to change up how this data is displayed and have a bar for each fruit with "grown" and "harvested" 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: