Jak tworzyć wykresy za pomocą chart.js w laravel blades? Wizualizacja danych

Wizualizacja przetwarzanych danych w Twojej aplikacji może ją bardzo wzbogacić. Możesz wykorzystać do tego tabele, czy uwypuklić konkretne dane za pomocą kart, jednakże najlepiej sprawdzą się wykresy.

Jak narysować wykres w aplikacji? To bardzo proste! W internecie znajdziesz wiele bibliotek odpowiedzialnych za rysowanie wykresów. Np: morris.js czy v-charts. Ja jednak pokaże Ci jak stworzyć wykres za pomocą chart.js w aplikacji, we frameworku Laravel.

Do stworzenia wykresu w laravel blades będziemy potrzebowali zagregowane dane, w moim przypadku będą to suma podpisanych umów oraz suma ich wartości, w konkretnych latach. Przejdźmy do działania!

Zakładam, że Twój projekt już istnieje i jedyne czego potrzebujesz to przykład użycia wykresu.

Krok 1. – Pobranie paczki chart.js

Musimy dołączyć do naszego szablonu blade bibliotekę chart.js.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Krok 2. – Wskazanie kontenera na wykres i utworzenie tagu <canvas>

Wykres warto umieścić w kontenerze, byśmy mogli sterować wielkością, jaką ma zajmować nasz wykres. Wewnątrz kontenera tworzymy tag <canvas> z ID, którego użyjemy przy rysowaniu wykresu.

<div class="container">
   <canvas id="myChart" ></canvas>                                                        
</div>

Krok 3. – Przygotowanie danych potrzebnych do utworzenia wykresu

Na potrzeby prezentacji przygotowałem tablice $data[’contracts_by_year’], której dane prezentują się w taki sposób:

{"total_contracts":1,"contracts_value":"7021","year":"2019"}{"total_contracts":1,"contracts_value":"3403","year":"2020"}{"total_contracts":30,"contracts_value":"162527","year":"2021"}{"total_contracts":2,"contracts_value":"7202","year":"2022"} 

Jak otrzymałem taką tablicę? W bazie danych przechowuję informacje o umowach (contracts), ich wartościach oraz dacie utworzenia każdej z umów. By pobrać i zagregować te dane wykorzystałem poniższe polecenie.

$data['contracts_by_year'] = LeadContract::select(DB::raw("(count(id)) as total_contracts"),DB::raw("(sum(contract_value)) as contracts_value"),DB::raw("(sum(costs)) as costs"), DB::raw("(DATE_FORMAT(created_at, '%Y')) as year"))
        ->orderBy('created_at')->groupBy(DB::raw("DATE_FORMAT(created_at, '%Y')"))->get();

Przejdźmy do etykiet danych, naszego wykresu. Etykiety tworzone są na podstawie elementów powstałej tablicy, ja uznałem, że etykiety będą składały się z roku oraz ilości umów w nim utworzonych.

const labels = [     
 @foreach ($data['contracts_by_year'] as $cby)
   '{{$cby['year']}} - umowy: {{$cby['total_contracts']}}',
 @endforeach                          
]; 

Kolejny element to dane, jakie będziemy prezentować, czyli w tym przypadku ma to być wartość umów w danym roku.

W tym zestawie danych ustalamy takie elementy jak:

– label – etykieta wykresu oraz prezentowanych danych;

– backgroundColor i borderColor – to nic innego jak kolor naszych słupków i ich ramek;

– data – czyli konkretne wartości liczbowe, jakie mają być przedstawione na wykresie. W tym przypadku jest to wartość umów. W tym konkretnym przypadku prezentujemy tylko jeden zestaw danych, jednak jeśli chcesz zaprezentować kilka zestawów, to możesz dodać go po przecinku w nawiasach klamrowych wewnątrz datasets.

– config – przechowuje informacje o typie wykresu i jego specyfice;

const data = {
  labels: labels,
  datasets: [{
     label: 'Wartość umów według lat',
     backgroundColor: [
       'rgb(53, 184, 224)'                                                        
     ],
    borderColor: [
       'rgb(53, 184, 224)'                                                         
     ],
    data: [
        @foreach ($data['contracts_by_year'] as $cby)
           '{{$cby['contracts_value']}}',
        @endforeach 
    ],
  }]
};
const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
       beginAtZero: true
      }
    }
  },
};

Krok 4. – Rysowanie wykresu

const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

Brawo, Twój wykres powinien już działać i prezentować się podobnie jak ten poniżej.

Chart.js pozwala na prezentowanie danych w postaci 9 typów wykresów (m.in kolumnowe, bąbelkowe, wartswowe, kołowe, punktowe), ale też możemy je łączyć np: liniowy z kolumnowym.

Wykresy mogą być również responsywne jeśli Twoja aplikacja lub strona jest w wykonana w RWD, to koniecznie o tym poczytaj tutaj, nim zaczniesz próbować dodawać style do <canvas>. O responsywność wykresu możesz zadbać, dodając odpowiednie opcje.

Przetestuj różne typy wykresów, a gdy coś nie działa, to zachęcam Cię do sprawdzenia konsoli przeglądarki, a następnie dokumentacji chart.js.