JavaScript Charts for Beginners: Iterating Through Data
Using Charts
Using charts and data visualization tools within your apps can be a very daunting experience when it’s your first time. There are so many tools available such as GraphQL, Chart.JS, etc. One option I found very easy to use was AnyChart. AnyChart is a charting library designed for JavaScript that has documentation dated back to 2003. When using this tool, the main things you, the developer, must handle is the data you want imported and the styling. For the sake of this walkthrough, the focus will remain on the data.
Choosing Your Chart
AnyChart has many data visualization choices from pie & donut charts to graphs. For this walkthrough, we will be using the Donut Chart template found here.
Adding the Source Code
After accessing the donut chart link, select “Source Code” and add the items within the <head> tag into the head of your html and complete like steps for the <body> tag. Then, different from what is illustrated within the source code, add everything within the <script> tag into your javascript file within a function of your choosing, preferably in a function that will only handle the adding of this chart. Now, this code looks very daunting at first, but keep in mind that the only thing required to be changed is the first 10 lines of the <script> tag, specifically the data variable:
Data
The data variable appears differently depending on which chart you choose. However, with these steps, you should be able to switch from one chart type to another seamlessly. First, it is important that you define an array of what will serve as your data at the top of your javascript file, rather than within the function you created for the chart. Defining these variables globally will ensure that you can access the variable within different functions and change/alter data when need be. At the top of your page, you should have:
Please note that the chartData variable can be named anything as it will be passed into the data variable shown in the first image. Whatever it is named, it is advised to select a name that well identifies what the array contains or what it is for.
Iteration
In the case that your web application utilizes API’s that contains the data you want represented in the chart, hard coding these items as your data is not best practice. Instead, it is recommended that you iterate through your array of hashes all the while building your chartData variable. For the sake of this walkthrough, let’s assume that you have built an API containing users with each user having a set of expenses which has an “item” key and an “amount” key. You have also completed a Fetch GET request at the beginning of your page to access this resource.
Go into the function defined for building this chart. My function, as shown below, is named addChart and passes in user(following the convention of the Fetch GET request). If you have not already done so, within this function, paste in all the code which is contained in the <script> tag mentioned above (about 70 total lines of code). Now, the first lines of code within your function, above the provided <script> code, should be an iteration through the users object.
Within this iteration, the expense items and amounts are pushed into chartData, which, if you recall, was initialized as an empty array. Keep in mind that the format within the push method is chosen based on the initial snapshot of what data should look like as provided within the source code.
Passing in the Data
Finally, the chartData variable must be passed within the data variable as shown on line 97.
If we look at line 97, knowing what chartData is, this is the exact same as the original source code. There are about 70 additional lines of code for the building of this donut chart, however, adding in the data relevant to your project is all that is necessary to make the chart appear on your page.
Final Considerations
It is recommended that all variables provided by AnyChart be initialized through the const or let keywords, rather than the var keyword used within the source code.
Play around and see what charts you make part of your next project!
