In order to drill down on the ratings behind the average, we need a simple page which will show a list of ratings for a specific given court. To do this we can use the standard court ratings view and modify it but we will need to adapt things slightly so that we can pass [...]
Category: Integrating Components
This section describes how to integrate third party components and plugins into your application
Adding Interactive Maps to Laravel Applications with Leaflet js - Step 1 - get json data
Leaflet is a lightweight javascript library for interactive maps which relys on the openstreetmap.org free geospatial data open source community mapping tool. I previously had an example which integrated with google maps. Google map moved behind a paywall and while they are still very good value and have a freemium model which allows you to [...]
Adding Interactive Maps to Laravel Applications with Leaflet js - Step 2 - Installing Leaflet with Laravel Mix
To complete this step you will need to ensure Node is installed and Laravel mix is working. If you need to review this step checkout this post on installing a Star rating system http://learnlaravel.net/953/adding-a-star-rating-system-to-your-application-step-4-adding-the-star-rating-component/. To install Leaflet with node package manager type npm install leaflet To instruct mix to add leaflet to the app.js file [...]
Adding Interactive Maps to Laravel Applications with Leaflet js - Step 3 - Adding Markers to the Map based on Json
The next step uses the getJson() jquery function which makes an Asynchronous Javascript And XML call to the courts.map.json route to retrieve json data relating to the courts in the database. This function is an asychronous call meaning that the app and code will continue to execute while it is retrieving the json data. If [...]
Adding Interactive Maps to Laravel Applications with Leaflet js - Step 4 - Adding a new Location/Marker
In the last post in this series, I will explain how by clicking on a particular location on the map we can retrieve the latitude and longitude of that location and use it to create a new court in the tennis club. In order to create a new court without leaving the map itself we [...]
Displaying chart data with CanvasJs - Part 1 - Generating JSON datapoints for a chart
There are many many great javascript chart plugins that can be used to display data in a wide variety of chart formats. Canvasjs is very easy to use and deploy and can be integrated into your application. The documentation for Canvasjs here https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/ describes a simple vertical bar chart that can be rendered using approximately [...]
Displaying chart data with CanvasJs - Part 2 - Rendering the data using the Canvas plugin
**If you're not using Laravel mix you can simply add a link to a CDN of CanvasJs into the Larvel view below -if you google CanvasJS CDN you'll find links and script tags for a suitably hosted CDN of CanvasJS** Installing CanvasJS for use with npm Laravel Mix In order to install CanvasJs type the [...]
Adding Datatables to Laravel
Datatables is a javascript plugin that allows for data to be presented in a flexible table with options for sorting and paginating the table. Once you get datatables working it opens up a range of functionality in terms of presenting tabular information. Although you can pass datatables a range of formats it works nicely with [...]