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.
</p>
</figure>

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


<script
src=”https://code.jquery.com/jquery-3.6.0.min.js"
integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=”
crossorigin=”anonymous”></script>
<script src=”https://code.highcharts.com/highcharts.js"></script>
<script src=”https://code.highcharts.com/modules/exporting.js"></script>
<script src=”https://code.highcharts.com/modules/export-data.js"></script>
<script src=”https://code.highcharts.com/modules/accessibility.js"></script>

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

<?php
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 = [];
if($query!==null){
$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,

<script>
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’);
$.ajax({
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);
}
</script>

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