Integrating ApexCharts with Laravel

ApexCharts.js is a modern and powerful open source charting library that allows interactive visualization of business data sets. 

Scaffolding the Laravel App

We will be working with a fictious company that sells toys. As a first step we will build an empty laravel project called ToySales. From the Ubuntu terminal window, the following command will build the empty project. Run this from the directory where you want your working files to be created.

Once the project is created, the next step is to install apexcharts library. The library can be installed locally on the development server as well as served via a CDN link in the web application. For this project, we will install it on our development server.

Its fairly very simple to configure ApexCharts once its installed. Scripts that need to be accessible throughout the laravel web application are configured in the resources/js/app.js file available in the project directory. Using a text or any code editor add the following entries at the end of the app.js file and save changes. We will be working with Visual Studio Code for this project.

Now the node package manager needs to be executed so all the project assests like the javascript files are optimized and bundled for production environment. Run the command npm run build from the Visual Studio terminal accessible by the keyboard shortcut CTRL+` or from the menu item View → Terminal.

Voila! Our base laravel application is ready. We can launch a local development server to access this web application using the command php artisan serve from the Visual Studio Code terminal window.

Pressing CTRL+click on the link http://127.0.0.1:8000 opens up the default laravel welcome page in your browser. If you have reached at this stage, CONGRATS you have successfully setup a  working laravel application skeleton.

Building the Data Dictionary in MySQL