Rendering Charts in Laravel Applications
The easiest and quickest way to render charts in Laravel apps
People say that a picture is worth a thousand words. That couldn’t be truer for charts, which allow you to condense data into a meaningful message that one can easily digest.
In this article, we will discuss how to render charts in a Laravel application. The approach that we will take requires zero library installation, which translates to a quick and easy way to render the charts.
What We Will Build
Let’s pretend that we are building a report page for an online store. This report might contain:
- Monthly orders — The number of orders placed by customers per month
- Monthly revenue — The amount of revenue generated per month
- Share of products — A list of the top-selling products within a period
The report is accessed as a web page in a Laravel application.
Technology Selection
There are few approaches to rendering charts in Laravel. For example, using a JavaScript frontend library such as Chart.js, Highcharts, or Vega-Lite. However, this has the drawback of including the library in question in the frontend. For clients whose JavaScript is deactivated (e.g. emails), this is a no-go.
Another approach would be to render the chart in the server and send it to the client as an image. There isn’t much competition in this space. One option that I can find is c-pchart, which unfortunately feels too verbose for my taste. The downside of rendering the chart in the server is the increased processing power required for the server. Rendering charts is not as cheap as a typical server workload (getting data from a DB, transforming, etc.).
Another approach is to use GetChart.me for rendering the charts. In short, GetChart.me is a service that allows us to get a chart image from a chart definition encoded in a URL. This means embedding an image in an HTML page is as easy as <img src="{url}"/>. The downside of this approach is having a dependency on an external service, which means the availability of chart images is subject to the service's availability.
In this article, we will go with GetChart.me for the following reasons:
- It’s easy and quick to get started — Just build a URL and embed it as an image in the HTML document.
- No JavaScript — The charts can cover more clients (e.g. emails).
- Uses open source chart definition (Vega-Lite) — If the service is down, we can fall back to the “client-side library” approach by adding Vega-Lite to the HTML page.
Tutorial
I assume you already have a Laravel app set up. If not, you can set one up by following the official guide.
Setting up a Blade template
First, let’s create a new Blade template named report.blade.php in the resource/views folder. As the name suggests, this template will display the report page. The content of the Blade template is as follows:
There’s nothing fancy here. As you can see, the charts are basically images pointing to some URLs. The URLs will be passed in from the controller via three template parameters: monthlyOrdersImageUrl, monthlyRevenuaImageUrl, and shareOfProductsImageUrl.
Creating the controller and wiring up the Blade template
Create a new file named ReportController.php the in app/Http/Controllers folder. Put the following code inside the file:
From the source code, we wire up the Blade template that we created earlier using view('report', ...). We also pass in the three template variables, although they are all empty strings for now.
GetChart.me URL helper function
Before making the actual chart, let’s create a helper function for generating the GetChart.me URL.
The way GetChart.me works is by sending a URL-encoded Vega-Lite chart definition as a URL parameter. In PHP, we implement it as a simple one-liner like this:
This function receives a Vega-Lite chart definition (in PHP maps) and outputs a valid GetChart.me URL.
Creating the chart
Creating a chart involves two things:
- Defining how the chart will look.
- Defining the data for the chart.
The data for the chart can come from anywhere. A database is a typical data source. In this article, we will just hardcode the data for conciseness.
Defining the chart visuals is basically the same thing as writing a Vega-Lite chart definition. There are numerous charts in Vega-Lite examples. The library’s documentation is pretty solid too. In our case, we are using a bar chart, a line chart, and a horizontal bar chart.
The code for creating the charts is then as follows:
Refresh the page. You should see that the report page is now looking very useful with charts.
If you’ve successfully reached this point, then we are done. Pretty easy, right?
Conclusion
In this article, we created a report page containing charts in Laravel. There are various ways to render charts in a Laravel application: with a client-side chart library, server-side chart rendering, or a third-party chart-rendering service (GetChart.me). We chose to use GetChart.me due to its low complexity and portability.
