Now that you understand the basic workflow for rendering a chart, well now let's take a step further and switch over to a Laravel project and figure out what the workflow for that might be. And I will assume that you know how to install Laravel. All right, let's cd over. And let's see, first step, we want to pull chart.js in through npm, and that way we can hook it up with Browserify, we can write eth6, we can compile it down, it'll be great. So let's begin by running npm install, and for Laravel, that will pull in laravel-elixir and also gulp. Okay, those are installed. But next, yeah, we want to pull in chart.js. So npm install chart.js and save it to our dependencies list. There we go. Okay, so let's open this up in my editor, and maybe begin by going to our gulpfile.js, and then scrolling down, and we're going to use Browserify here.

Okay, so let's open this up in my editor, and maybe begin by going to our gulpfile.js, and then scrolling down, and we're going to use Browserify here. Laravel Elixir makes this really easy for us. Okay, so let's create that file, resources/assets/js/main.js. And while we're just getting started, and we don't really have a full project here, so we can do everything in line here. For example, let's pull in the charting library. And next, if we switch back, yeah, we can just grab this. Remember, we're going incrementally here. So this is the next step. Once you get a fuller project, we'll change the structure a bit. Obviously, we're not going to hard code the data in real life. That will be pulled from the server, and we'll eventually make an AJAX request to fetch that data. Anyways, we import our library, we set up our data, and then at the bottom, we're still tracking down an element with an

and we'll eventually make an AJAX request to fetch that data. Anyways, we import our library, we set up our data, and then at the bottom, we're still tracking down an element with an id of graph, and then newing up our chart, passing in the context, and creating a line graph. So important thing here, you have your chart library because we imported it at the top. So let's save this, come back, and compile this down with gulp, and notice we saved it to this file. All right, so now let's go to that welcome.blade.php view that Laravel provides, and let's see, we can get rid of all of this stuff. Okay, so we will create our canvas. Width is 400, or let's do 6. Height is 400, and then I believe the id is graph. Finally, at the bottom, we'll import our script, js/main.js, and that should be all we need. So if we boot up a server and take a look, so if we boot up a server and take a look, there we go. We get the exact same end result,

js, main.js, and that should be all we need. So if we boot up a server and take a look, so if we boot up a server and take a look, there we go. We get the exact same end result, but now, yeah, if we've switched over to Laravel, we're using Laravel Elixir, we're writing ECMAScript 6 that we're compiling down, we're leveraging npm to pull in any dependencies, this is a good next step. But of course, yeah, still a lot more to do. What we have here, yeah, it's not ideal to hard code it in our main.js file. So in the next lesson, we'll take another step.