Real Time Data With Spline Highcharts And Laravel

Photo by Luke Chesser on Unsplash

I spent almost 3 hours integrating HighCharts with the Laravel application to show real-time data in the graphical representation. So I would like to share how did achieve it? Let’s start it.

Create blade file in to /resources/chart.blade.php directory, and add the following HTML code inside body

<figure class=”highcharts-figure”>
<div id=”container”></div>
<p class=”highcharts-description”>
Chart showing data updating every second, with old data being removed.

And then include required files from HighCharts and jQuery library, add following code before closing body tag

<script src=”"></script>
<script src=”"></script>
<script src=”"></script>
<script src=”"></script>

It would include all required files for the graph. Now let’s create GraphController.php into App/Http/Controllers/

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Graph;
use Illuminate\Support\Facades\Http;
use Carbon\Carbon;
class GraphController extends Controller
public function index()
return view(‘chart’);

In this controller we have Graph model, so it depends on which table you want to fetch records to show in the graph.

Now let’s create a route for the graph, so in routes/web.php add following,

Route::get(“/chart”, [GraphController::class, “index”])->name(‘chart’);

After this we a method which should fetch a single row from the table and return it into JSON response, so in the GraphController.php add following method,

public function fetchDataForChart()
$query = Graph::select(“graph_values”)
->orderby(‘id’, ‘desc’)->first();
$chartData = [];
$chartData[‘y_axis’] = (int)$query->graph_values;
return response()->json($chartData);

And add route into routes/web.php for the above method, like

Route::post(“/get-chart-json”, [GraphController::class, “fetchDataForChart”])->name(‘chartPostRequest’);

Now let’s go back to chart.blade.php and add the following script right before closing body tag,

var options = {
chart: {
type: ‘spline’,
events: {
load: fetGraphData
title: {
text: ‘Real Time Data with Highcharts’
xAxis: {
type: ‘datetime’,
yAxis: {
title: {
text: ‘your Y Axis Title’
legend: {
enabled: false
exporting: {
enabled: false
series: [{
name: ‘Your - Info Window Title’,
data: []
var chart = Highcharts.chart(‘container’, options);
function fetGraphData() {
setInterval(function() {
let CSRF_TOKEN = $(‘meta[name=”csrf-token”]’).attr(‘content’);
url: “{{ route(‘chartPostRequest’) }}”,
type: ‘POST’,
data: {_token: CSRF_TOKEN},
dataType: ‘JSON’,
success: function (response) {
chart.series[0].addPoint({ x: (new Date()).getTime(), y: Number(response.y) });
}, 2000);

That’s all. Thank you for reading it.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store