api
Route::group(['prefix' => 'v1'], function() {
Route::get('/getuser', 'ChartController@getUser')->name('getuser');
});
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Response;
use Illuminate\Http\Request;
use App\User;
use DB;
class ChartController extends Controller
{
public function getUser() {
$queryUser = User::select('year', 'cars', 'motorcycles', 'bicycles')->get();
return \Response::json($queryUser);
}
public function index()
{
if(request()->ajax()){
return User::all();
}
return view('welcome');
}
}
html
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5 Chart example using Charts Package</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
max-height: 600px;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div id="chartdiv"></div>
</div>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script>
//alert();
// atlet(window.location.href)
var chart = am4core.createFromConfig({
"titles": [
{
"text": "Chart For data",
"fontSize": 25,
"marginBottom": 10
}
],
"dataSource": {
"url": "http://localhost:8000/api/v1/getuser"
// "url": window.location.href,
// "format" : "json"
},
"xAxes": [
{
"type": "CategoryAxis",
"dataFields": {
"category": "year"
}
}
],
"yAxes": [
{
"type": "ValueAxis",
// "min": 0,
"tooltip": {
//"disabled": true
}
}
],
"series": [
{
"type": "LineSeries",
"name": "Cars",
"dataFields": {
"categoryX": "year",
"valueY": "cars"
},
"tooltipText": "cars: {valueY.value}",
"sequencedInterpolation": true,
"columns": {
"cornerRadiusTopLeft": 10,
"cornerRadiusTopRight": 10,
"strokeWidth": 1,
"strokeOpacity": 1,
"propertyFields": {
"strokeDasharray": "stroke",
"fillOpacity": "opacity"
}
},
"bullets": [
{
"type": "CircleBullet",
"fill": "#dcaf67",
"radius": 4
}
]
},
],
"cursor": {
"behavior": "none",
"lineX": {
"opacity": 0
},
"lineY": {
"opacity": 0
}
}
},
"chartdiv", am4charts.XYChart
);
</script>
</body>
</html>
resule
Comments
Post a Comment