How to generate charts from JSON data/REST endpoints

New hope! Let's say we want to plot the height and weight (nee mass) of different characters from everyone's favourite science fiction series Star Wars (the API is available here).

We will use the endpoint https://pokeapi.co/api/v2/pokemon/, which returns a lot of data, including the data we want to plot.

So STEP 1 is to provide this in the plugin:

You need to go to Import data from URL > Import from JSON and click on Create Parameters.

Visualizer has support for authentication for JSON imports. Clicking on HEADERS will open some new fields where you can enter the details needed for authentication for that specific JSON. In this case, make sure you click on Fetch Endpoint after the authentication fields are completed.

For accessing a password-protected JSON, the authentication token can be passed in the additional headers field as key:value, click to see image.

Below is a snippet of the JSON data that is returned from the endpoint. The data we want to plot is under the results element. Also note that the data returned is paginated (look at the element next below count) and this is the first page of many pages of data.

{
  "count": 1302,
  "next": "https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20",
  "previous": null,
  "results": [
    {
      "name": "bulbasaur",
      "url": "https://pokeapi.co/api/v2/pokemon/1/"
    },
    {
      "name": "ivysaur",
      "url": "https://pokeapi.co/api/v2/pokemon/2/"
    },
    {
      "name": "venusaur",
      "url": "https://pokeapi.co/api/v2/pokemon/3/"
    },
    {
      "name": "charmander",
      "url": "https://pokeapi.co/api/v2/pokemon/4/"
    },
    {
      "name": "charmeleon",
      "url": "https://pokeapi.co/api/v2/pokemon/5/"
    },
    {
      "name": "charizard",
      "url": "https://pokeapi.co/api/v2/pokemon/6/"
    },
    {
      "name": "squirtle",
      "url": "https://pokeapi.co/api/v2/pokemon/7/"
    },
    {
      "name": "wartortle",
      "url": "https://pokeapi.co/api/v2/pokemon/8/"
    },
    {
      "name": "blastoise",
      "url": "https://pokeapi.co/api/v2/pokemon/9/"
    },
    {
      "name": "caterpie",
      "url": "https://pokeapi.co/api/v2/pokemon/10/"
    },
    {
      "name": "metapod",
      "url": "https://pokeapi.co/api/v2/pokemon/11/"
    },
    {
      "name": "butterfree",
      "url": "https://pokeapi.co/api/v2/pokemon/12/"
    },
    {
      "name": "weedle",
      "url": "https://pokeapi.co/api/v2/pokemon/13/"
    },
    {
      "name": "kakuna",
      "url": "https://pokeapi.co/api/v2/pokemon/14/"
    },
    {
      "name": "beedrill",
      "url": "https://pokeapi.co/api/v2/pokemon/15/"
    },
    {
      "name": "pidgey",
      "url": "https://pokeapi.co/api/v2/pokemon/16/"
    },
    {
      "name": "pidgeotto",
      "url": "https://pokeapi.co/api/v2/pokemon/17/"
    },
    {
      "name": "pidgeot",
      "url": "https://pokeapi.co/api/v2/pokemon/18/"
    },
    {
      "name": "rattata",
      "url": "https://pokeapi.co/api/v2/pokemon/19/"
    },
    {
      "name": "raticate",
      "url": "https://pokeapi.co/api/v2/pokemon/20/"
    }
  ]
}

So, STEP 2, is to tell the plugin where our data is in the returned JSON:

Now, STEP 4 (not STEP 3, young padawan) is to tell the plugin what subset of data to use for plotting the chart and to define the data types of the columns:

In the free plugin, you can only plot the first page of the results but if you are using the PRO Addon, you can also mention where to find the other pages so that your chart data is comprehensive. After all, what's the fun of plotting heights and weights when Yoda is absent from our data set! PRO Addon user are you? Guide the plugin to the pagination element, you can!

To wit, STEP 3

Psst, you can change the number 5 above by using the filter below:

	add_filter( 'visualizer_json_fetch_pages', 'visualizer_json_fetch_pages', 10, 2 );
	function visualizer_json_fetch_pages( $pages, $url ) {
		if ( 'https://swapi.co/api/people/' === $url ) {
			$pages = 10;
		}
		return $pages;
	}<br>

Once you pick the columns you want to show, clicking on Save & Show Chart will show you the chart:

For true-blue Jedis who want to tinker around with our hooks, you can refer to our document here. May the force be with you!