In this four-part videos we code an amazing radar chart that will show our team stats for the team, along with demonstrating the team's totals for defense, offense, and overall score. We leverage Chart.js and a React version of the library called React-chartjs-2 to build this quicker than manually coding the component. Finally we code a quick algorithm to calculate the totals for the team and return it into a percentage of the potential the team could attain if they had perfect scores on the ratings we gave them.
- [Instructor] In this video, we'll add a radar chart…to see the stats of the team,…plus an area with the team totals for defense, offense,…and the actual totals of the team.…We'll leverage a library called react-chartjs-2…which has built-in components for all kinds of charts.…So the very first thing you can see,…we added a few players to our team here,…so if you haven't done so, please pause the video and do so.…So go to this page where the repo…for react-chartjs-2 is, and then what you need to do,…scroll to the bottom here…and take a look at how you install it.…
So basically, we'll do an NPM install on react-chartjs…and make sure that we also install chart.js.…So let's copy that.…Let's go back to our server…and let's control c out of that,…and let's do a meteor, and then paste…npm install react-chartjs-2 and chart.js, save.…Let's go ahead and do that.…Once this is all installed,…you can go ahead and restart the meteor.…And let's go back to that particular repo.…
So what I want you to do is scroll back up…and go to the example folder, source,…
- Setting up your editor
- Understanding the file structure and player components
- Setting up static data
- Routing with React
- Creating a schema and player form
- Building functions to add a player
- Adding a user login
- Assigning players to the user
- Securing database transactions
- Editing and deleting players
- Using Chart.js to display team stats
Skill Level Intermediate
Q: This course was updated on 05/01/2018. What changed?
A: We updated 13 videos to reflect the changes in the latest versions of Meteor (v1.6) and Node.js (v8).
1. Setting Up
2. React Refresher: Basic Player View
3. Reduce Player Stats
4. Players CRUD and Team View
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.