Example Share

4 years ago

bagwaa

Testing the share features of Tinkerwell

Controller:

// Change this for your specific country
$countryCode = 'GB';

$confirmed = Http::get(
  'https://coronavirus-tracker-api.herokuapp.com/confirmed'
)->json();

$confirmedData = collect($confirmed['locations'])
  ->where('country_code', $countryCode)
  ->first();

$chartData = [
	['Date', '# Confirmed']
];

collect($confirmedData['history'])
  ->sortBy(function ($numConfirmed, $date) {
		return Carbon\Carbon::createFromFormat('n/j/y', $date)
          ->startOfDay();
		})
  ->map(function ($numConfirmed, $date) use (&$chartData) {
  		$chartData[] = [$date, $numConfirmed];
  });

return view('__tinker__::tinker', [
  	'chartData' => $chartData,
	'country' => $confirmedData['country']
]);

View:

<body>
	<script type="text/javascript" 
  		  	src="https://www.gstatic.com/charts/loader.js">
	</script>
	<script type="text/javascript">
		google.charts.load('current', {'packages': ['corechart']});
		google.charts.setOnLoadCallback(drawChart);
        
		function drawChart() {
            var data = google.visualization.arrayToDataTable(
              @json($chartData)
            );
            
          	var chart = new google.visualization.AreaChart(
              document.getElementById('chart')
            );
            
          	chart.draw(data, {
				title: 'Corona cases in {{ $country }}',
                legend: { position: 'bottom' },
                width: '100%',
                height: '900'
            });
        }
    </script>
	
	<div style="height:100%;width:100%;" id="chart"></div>
</body>