Back Button Tooling
Charting and You

Charting and You

At some point, you'll be called upon to prepare a series of graphs, or charts for your business. It's scary at first; where do you even begin? But, luckily, you'll find that, thanks to tools like Chart.js, it has never been easier to accomplish such a task. I'll show you how, one easy-to-understand step at a time.

Intermediate
8 episodes
1h 17m
Begin
8
Latest Episode in This Series

Added 4 years ago

Dynamic Graphs

How might we make our graphs more dynamic? Maybe we want to limit revenue to only x...

Watch
Charting and You

Charting and You

At some point, you'll be called upon to prepare a series of graphs, or charts for your business. It's scary at first; where do you even begin? But, luckily, you'll find that, thanks to tools like Chart.js, it has never been easier to accomplish such a task. I'll show you how, one easy-to-understand step at a time.

Begin
8
Latest Episode in This Series

Added 4 years ago

Dynamic Graphs

How might we make our graphs more dynamic? Maybe we want to limit revenue to only x...
Watch

Your Teacher | Jeffrey Way

Visit Website
https://laracasts.s3.amazonaws.com/avatars/jeffrey-avatar.jpg's avatar
Hi, I'm Jeffrey. I'm the creator of Laracasts and spend most of my days building the site and thinking of new ways to teach confusing concepts. I live in Orlando, Florida with my wife and two kids.
    1. EPISODE 1

      Run Time 5:03

      Free

      Line Graph in 5 Minutes

      Let's begin with the "hello world" of graphs, using the excellent Chart.js library.

      View the source for this first example on JSBin.com.

    2. Let's take another step. What if we pull Chart.js in through NPM, and then leverage Browserify, so that we may write modern ES6+ code? Let's get started on that workflow in this episode.

    3. EPISODE 3

      Run Time 8:41

      A Graph Vue Component

      Let's continue working on structure, as we create a reusable graph Vue component. If you've worked your way through any of the Vue series at Laracasts, this should all be a cinch!

      View the relevant source for this lesson on GitHub.

    4. EPISODE 4

      Run Time 7:29

      Legends

      Chart.js can automatically generate a chart "legend" for you; however, it's up to you to insert it into the DOM and add any applicable styling. I'll show you the basic workflow in this lesson.

    5. EPISODE 5

      Run Time 15:18

      Dedicated Graph Vue Components

      In this lesson, we'll create a master Graph component, to which all other specific graphs may extend. This way, we may use custom properties that are unique to each type of graph that are application requires.

      View the source for this lesson on GitHub.

    6. EPISODE 6

      Run Time 10:15

      Render Monthly Revenue

      Imagine that your boss assigns you the task of rendering a graph to display the company's monthly revenue. Well, it sounds like we'll need to perform the proper database query (which groups and sums the revenue for the month), and then we'll of course pass that data to our graph component. Let's get started.

      View the source for this lesson on GitHub.

    7. EPISODE 7

      Run Time 10:37

      Graphs and AJAX

      Now what if you want your graph to instead fire an AJAX request to fetch your desired data? No problem! Let's add a url custom property to our graph component, and then leverage the Vue Resource plugin to perform the request.

      View the source code for this lesson on GitHub.

    8. EPISODE 8

      Run Time 16:55

      Dynamic Graphs

      How might we make our graphs more dynamic? Maybe we want to limit revenue to only x number of days; and, further, we should be able to modify this range on the fly, without requiring a page reload. Well, I'll show you how!

      View the source code for this lesson on GitHub.

Want us to email you occasionally with Laracasts news?