Laravel
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.
Latest Episode in This Series
Added 3 years ago
Dynamic Graphs
How might we make our graphs more dynamic? Maybe we want to limit revenue to only x...
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.
Latest Episode in This Series
Added 3 years ago
Dynamic Graphs
Your Teacher | Jeffrey Way
-
-
EPISODE 1
Run Time 5:03
FreeLine Graph in 5 Minutes
EPISODE 2Run Time 3:06
Leveraging NPM, Browserify, and Elixir
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.
EPISODE 3Run Time 8:41
A Graph Vue Component
Let's continue working on structure, as we create a reusable
graphVue 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.
EPISODE 4Run 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.
EPISODE 5Run Time 15:18
Dedicated Graph Vue Components
In this lesson, we'll create a master
Graphcomponent, 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.
EPISODE 6Run 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
graphcomponent. Let's get started.View the source for this lesson on GitHub.
EPISODE 7Run 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
urlcustom property to ourgraphcomponent, and then leverage the Vue Resource plugin to perform the request.View the source code for this lesson on GitHub.
EPISODE 8Run Time 16:55
Dynamic Graphs
How might we make our graphs more dynamic? Maybe we want to limit revenue to only
xnumber 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.
You May Also Enjoy...
Here are some additional series that may be up your alley.
The most concise screencasts for the working developer, updated daily.
There's no shortage of content at Laracasts. In fact, you could watch nonstop for days upon days, and still not see everything!
-
