Data visualization is a critical aspect of modern web applications. It helps developers make sense of complex data and turn it into actionable insights.

Laravel, a popular PHP framework, provides excellent support for data handling, but displaying data in an easy-to-understand way can still be challenging.

Fortunately, Chartello, a powerful data visualization library, makes it easy to create visually appealing charts and graphs in Laravel.

In this tutorial, we'll learn how to use Chartello to visualize data in Laravel and create engaging charts that make data interpretation easy and enjoyable.


To follow along with this tutorial, you'll need the following:

  • A local development environment with Laravel installed.
  • Basic knowledge of Laravel and PHP.
  • Basic knowledge of HTML, CSS, and JavaScript.
  • A Chartello account.

Installing Chartello

The first step is to create a Chartello account. Once you've created an account, log in and create a new chart. You can choose from a variety of chart types, such as bar charts, line charts, and pie charts. You can also customize the chart's appearance and data sources.

Once you've created a chart, Chartello will provide you with a unique URL and embed code. You can use this URL or embed code to include the chart in your Laravel application.

Creating a Data Visualization

Next, we'll create a data visualization in Laravel. Create a new Blade template called chart.blade.php in the resources/views folder with the following code:

<div id="chart"></div>

<script src=""></script>
    var chart = chartello.createChart({
        url: '{chart-id}',
        container: 'chart',

Replace {chart-id} with your Chartello chart ID.

This code creates a div with an ID of chart and includes the Chartello JavaScript library. We then create a new chart using the Chartello library, passing in the chart URL and container ID.

Displaying Data in the Chart

Finally, we need to pass data to the chart for display. In Laravel, we can retrieve data from the database and pass it to the chart as a JSON object. Add the following code to the chart.blade.php file:

    $data = [
        ['month' => 'January', 'visits' => 200],
        ['month' => 'February', 'visits' => 300],
        ['month' => 'March', 'visits' => 400],
        ['month' => 'April', 'visits' => 500],
        ['month' => 'May', 'visits' => 600],

    var chartData = {!! json_encode($data) !!};

This code defines a PHP array with some sample data, including the month and the number of visits. We then convert this data to a JSON object using the json_encode function and pass it to the chart's setData method.

Testing the Data Visualization

That's it! We can now test the data visualization by visiting http://localhost:8000/chart in our web browser. The chart should display the data we passed to it.


In this tutorial, we learned how to use Chartello to visualize data in Laravel. Chartello is a powerful library that simplifies data visualization in web applications. With this knowledge, you can now implement data visualizations in your Laravel projects with ease.

Recommended Posts

View All


It's an available fact that if you want to work at the big tech companies, you need to know how to make an impression.

How to install Adminer in Laravel application

In this article we will install Adminer in Laravel 8 application

Laravel 9 Socialite Login with LinkedIn Tutorial Example

How to use the Laravel socialite, Livewire, and Jetstream libraries to create a LinkedIn login system from scratch in Laravel

Laravel 9 Bootstrap 5 Auth Scaffolding

I'll show you how to make a Bootstrap 5 Auth Scaffolding in Laravel 9 in this tutorial. Auth Scaffolding uses the Laravel UI package to create a user...

Laravel Many to Many Polymorphic Relationship

Laravel many to many polymorphic relations, many to many polymorphic relations Laravel, polymorphic relations eloquent Laravel, Laravel morphToMany ex...