@extends('admin.layouts.app')
@section('title', getOption('app_name') . ' - Graph')
@section('content')
<div class="row">
<div class="col-md-10 col-md-offset-1" style="position: relative; ">
<canvas id="myChart">
</canvas>
</div>
</div>
@endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<script type="text/javascript">
var ctx = document.getElementById("myChart");
// if(screen.width < 600){
ctx.height = screen.height * .6;
// }
Chart.defaults.line.showLines=true;
Chart.defaults.global.animation.duration = 5000;
// Chart.defaults.scales.xAxes.gridLines.display=false;
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: {!! $gDate !!},
datasets: [{
label: "Daily Profit",
data: {!! $gData !!},
borderColor: 'rgba(0,99,132,1)',
borderWidth: 1,
pointRadius: 2,
},{
label: "Daily Order Price",
data: {!! $gData1 !!},
borderColor: 'rgba(255,0,0,1)',
borderWidth: 1,
pointRadius: 2,
}],
},
options : {
animation: {
duration: 5000
},
maintainAspectRatio: false,
}
});
console.log(screen.height);
</script>
@endpush
