To create a Chart from your JSON API, the first step is to create a new Widget which connects your API with API Widgets. We can then start to configure which data the Chart will use and setup some styling options to get the Chart looking the way we need.
Selecting JSON data from the API
After creating the Widget, you will see Setup Tab and the JSON data from the API will be displayed in the side tab.
Click on one of the yellow highlighted nodes within the JSON data and all data (nested data included) within that node will be used within the Chart.
If the data within the node contains items you don’t need to use in the Chart, you can easily turn these off in the next steps.
Depending on the API being used, you may want to use the entire data within the API or just a small section of the data.
After selecting a JSON node
Once you have selected the node you require, you will see that the data will be highlighted. If this data does not look correct, you can simply click another node.
In the below example, we have clicked the quarterly node and the data within that node is highlighted.
After clicking the node, there will be some options shown in the Setup Tab on how you want the data to be used. These options will be different depending on chart type (Bar, Line or Pie) and also how the JSON data is setup (arrays, objects, nested objects etc).
Choose the most appropriate type for your Chart and then click Select This Data, followed by clicking on the Build Chart button.
Customizing the Chart
For this example, we selected the Inner Items options and chose the date items to be on the x-axis. After clicking the Build Chart button, this is what our Chart looks like.
At this stage, your Chart may be perfect and just what you needed, but you may also want to customize the look and feel of the Chart.
Let’s start with the Settings that are shown directly on the Preview Tab above the Chart. Hovering over each field or button here will show a tooltip that explains what each item does. These items control the overall features of the Chart.
- Legend – options here are to hide the Legend or place it Top, Bottom, Left or Right
- Tooltips – toggles the display of Tooltips when hovering over a data point on the Chart
- Stacked – toggles the Chart from being Stacked or not
- Horizontal – switches the axis
- Aspect – adjusts the height-to-width ratio of the chart
- x axis & y axis
- Label – adds a label to the axis
- Prefix – adds a prefix to each items shown on the axis ‘ticks’
- Suffix – adds a suffix to each items shown on the axis ‘ticks’
- Min – add a number to set the minimum value shown on the axis
- Max – add a number to set the maximum value shown on the axis
Customizing individual datasets
Clicking on the Data Tab will show you each individual dataset within the Chart.
You can click the eye icon to hide a dataset, drag to reorder the datasets, type a new name for each dataset or click the Format button to bring up formatting options for that dataset.
The image below shows the formatting options available for a line Chart. The options are slightly different for Bar Charts and for Pie Charts.
Final Chart from JSON API data
After a bit of tweaking with the formatting of each dataset and modifying a few settings, this is the final Line Chart we have created from our JSON API data, ready to be embedded into our website.
(Obviously the settings wont be shown once embedded, we have just shown this in the screenshot to see which settings were modified)
As you can see it only takes a few clicks to create a Chart from JSON API data and right off the bat the Chart looks pretty good. But with the extra formatting and styling options, you can get the Chart to match the look of your own website quite easily.