osb/resources/views/theme/backend/adminlte/service/widget/broadband/usagegraph.blade.php

<div class="row">
	<div class="col-3">
		<table class="table table-sm">
			<thead>
			<tr>
				<th>Period</th>
				<th class="text-right">Traffic <small>(GB)</small></th>
			</tr>
			</thead>
			<tbody>
			@foreach ($o->usage_summary(6) as $key => $oo)
				<tr>
					<td>{{ $key }}</td>
					<td class="text-right">{{ number_format($oo/1024,2) }}</td>
				</tr>
			@endforeach
			</tbody>
		</table>
	</div>

	<div class="col-9">
		<div id="graph"></div>
	</div>
</div>

@section('page-scripts')
	@js(highcharts)

	<script>
		const timezone = new Date().getTimezoneOffset()

		Highcharts.setOptions({
			global: {
				timezoneOffset: timezone,
			},
			lang: {
				thousandsSep: ','
			}
		});

		Highcharts.chart('graph', {
			chart: {
				type: 'areaspline'
			},
			title: {
				text: 'Usage Traffic up to {{ $o->usage(30)->max('date')->format('Y-m-d') }}'
			},
			legend: {
				layout: 'vertical',
				align: 'left',
				verticalAlign: 'top',
				x: 150,
				y: 100,
				floating: true,
				borderWidth: 1,
				backgroundColor:
					Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF'
			},
			xAxis: {
				type: 'datetime'
			},
			yAxis: {
				title: {
					text: 'MB'
				}
			},
			tooltip: {
				shared: true,
				valueSuffix: ' MB'
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.5
				}
			},
			series: [{
				name: 'Traffic',
				data: {!! $o->usage(30)->map(function($item) { return ['x'=>$item->date->timestamp*1000,'y'=>$item->total];}) !!}
			}]
		});
	</script>
@append