first commit
This commit is contained in:
117
resources/views/pages/charts/apex.blade.php
Executable file
117
resources/views/pages/charts/apex.blade.php
Executable file
@ -0,0 +1,117 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Apex Charts</h6>
|
||||
<p>Modern & Interactive Open-source Charts. Read the <a href="https://apexcharts.com/" target="_blank"> Official ApexChart Documentation</a> for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Line chart</h6>
|
||||
<div id="apexLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bar chart</h6>
|
||||
<div id="apexBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Area chart</h6>
|
||||
<div id="apexArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Mixed chart</h6>
|
||||
<div id="apexMixed"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Donut chart</h6>
|
||||
<div id="apexDonut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Pie chart</h6>
|
||||
<div id="apexPie"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">HeatMap chart</h6>
|
||||
<div id="apexHeatMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Radar chart</h6>
|
||||
<div id="apexRadar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin grid-margin-xl-0 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Scatter chart</h6>
|
||||
<div id="apexScatter"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">RadialBar chart</h6>
|
||||
<div id="apexRadialBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/apexcharts.js') }}"></script>
|
||||
@endpush
|
||||
117
resources/views/pages/charts/chartjs.blade.php
Executable file
117
resources/views/pages/charts/chartjs.blade.php
Executable file
@ -0,0 +1,117 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Chart.js</h6>
|
||||
<p>Simple yet flexible JavaScript charts. Read the <a href="https://www.chartjs.org/" target="_blank"> Official Chart.js Documentation</a> for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bar chart</h6>
|
||||
<canvas id="chartjsBar"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Line chart</h6>
|
||||
<canvas id="chartjsLine"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Doughnut chart</h6>
|
||||
<canvas id="chartjsDoughnut"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Area chart</h6>
|
||||
<canvas id="chartjsArea"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Pie chart</h6>
|
||||
<canvas id="chartjsPie"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bubble chart</h6>
|
||||
<canvas id="chartjsBubble"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Radar chart</h6>
|
||||
<canvas id="chartjsRadar"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Polar area chart</h6>
|
||||
<canvas id="chartjsPolarArea"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin grid-margin-xl-0 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Grouped bar chart</h6>
|
||||
<canvas id="chartjsGroupedBar"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Mixed bar chart</h6>
|
||||
<canvas id="chartjsMixedBar"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/chartjs/chart.umd.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/chartjs.js') }}"></script>
|
||||
@endpush
|
||||
84
resources/views/pages/charts/flot.blade.php
Executable file
84
resources/views/pages/charts/flot.blade.php
Executable file
@ -0,0 +1,84 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Flot Charts</h6>
|
||||
<p>Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. Read the <a href="http://www.flotcharts.org/" target="_blank"> Official Flot Documentation</a> for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Line chart</h6>
|
||||
<div class="flot-chart-wrapper">
|
||||
<div class="flot-chart" id="flotLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bar chart</h6>
|
||||
<div class="flot-chart-wrapper">
|
||||
<div class="flot-chart" id="flotBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Area chart</h6>
|
||||
<div class="flot-chart-wrapper">
|
||||
<div class="flot-chart" id="flotArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Pie chart</h6>
|
||||
<div class="flot-chart-wrapper">
|
||||
<div class="flot-chart" id="flotPie"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Real-Time chart</h6>
|
||||
<div class="flot-chart-wrapper">
|
||||
<div class="flot-chart" id="flotRealTime"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.resize.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.pie.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.categories.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/jquery.flot.js') }}"></script>
|
||||
@endpush
|
||||
89
resources/views/pages/charts/peity.blade.php
Executable file
89
resources/views/pages/charts/peity.blade.php
Executable file
@ -0,0 +1,89 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Peity Charts</h6>
|
||||
<p>Peity (sounds like deity) is a jQuery plugin that converts an element's content into a <svg>. Read the <a href="https://benpickles.github.io/peity/" target="_blank"> Official Peity Documentation</a> for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Line charts</h6>
|
||||
<span data-peity='{"stroke": ["rgb(247, 126, 185)"], "fill": ["rgba(247, 126, 185, .2)"],"height": 50, "width": 80 }' class="peity-line">5,3,9,6,5,9,7,3,5,2</span>
|
||||
<span data-peity='{"stroke": ["rgb(126, 229, 229)"], "fill": ["rgba(126, 229, 229, .3)"],"height": 50, "width": 80 }' class="peity-line">5,3,2,-1,-3,-2,2,3,5,2</span>
|
||||
<span data-peity='{"stroke": ["rgb(251, 188, 6)"], "fill": ["rgba(251, 188, 6, .2)"],"height": 50, "width": 80 }' class="peity-line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bar charts</h6>
|
||||
<span data-peity='{"fill": ["rgb(247, 126, 185)"],"height": 50, "width": 80 }' class="peity-bar">5,3,9,6,5,9,7,3,5,2</span>
|
||||
<span data-peity='{"fill": ["rgb(126, 229, 229)"],"height": 50, "width": 80 }' class="peity-bar">5,3,2,-1,-3,-2,2,3,5,2</span>
|
||||
<span data-peity='{"fill": ["rgb(251, 188, 6)"],"height": 50, "width": 80 }' class="peity-bar">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Pie charts</h6>
|
||||
<span data-peity='{"fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"],"height": 50, "width": 60 }' class="peity-pie">1/5</span>
|
||||
<span data-peity='{"fill": ["rgb(126, 229, 229)", "rgba(126, 229, 229, .2)"],"height": 50, "width": 60 }' class="peity-pie">226/360</span>
|
||||
<span data-peity='{"fill": ["rgb(251, 188, 6)", "rgba(251, 188, 6, .2)"],"height": 50, "width": 60 }' class="peity-pie">0.52/1.561</span>
|
||||
<span data-peity='{"fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"],"height": 50, "width": 60 }' class="peity-pie">1,2,3,2,2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Donut chart</h6>
|
||||
<span data-peity='{"fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"],"height": 50, "width": 60 }' class="peity-donut">1/5</span>
|
||||
<span data-peity='{"fill": ["rgb(126, 229, 229)", "rgba(126, 229, 229, .2)"],"height": 50, "width": 60 }' class="peity-donut">226/360</span>
|
||||
<span data-peity='{"fill": ["rgb(251, 188, 6)", "rgba(251, 188, 6, .2)"],"height": 50, "width": 60 }' class="peity-donut">0.52/1.561</span>
|
||||
<span data-peity='{"fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"],"height": 50, "width": 60 }' class="peity-donut">1,2,3,2,2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Options</h6>
|
||||
<p class="peity-custom">
|
||||
<span data-peity='{ "fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"], "innerRadius": 10, "radius": 40 }'>1/7</span>
|
||||
<span data-peity='{ "fill": ["rgb(126, 229, 229)", "rgba(126, 229, 229, .2)"], "innerRadius": 14, "radius": 36 }'>2/7</span>
|
||||
<span data-peity='{ "fill": ["rgb(251, 188, 6)", "rgba(251, 188, 6, .2)"], "innerRadius": 16, "radius": 32 }'>3/7</span>
|
||||
<span data-peity='{ "fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"], "innerRadius": 18, "radius": 28 }'>4/7</span>
|
||||
<span data-peity='{ "fill": ["rgba(16, 183, 89, .5)", "rgba(16, 183, 89, .2)"], "innerRadius": 20, "radius": 24 }'>5/7</span>
|
||||
<span data-peity='{ "fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"], "innerRadius": 18, "radius": 20 }'>6/7</span>
|
||||
<span data-peity='{ "fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"], "innerRadius": 15, "radius": 16 }'>7/7</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/peity/jquery.peity.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/peity.js') }}"></script>
|
||||
@endpush
|
||||
92
resources/views/pages/charts/sparkline.blade.php
Executable file
92
resources/views/pages/charts/sparkline.blade.php
Executable file
@ -0,0 +1,92 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">jQuery Sparkline Charts <span id="mouseSpeedChart"></span></h6>
|
||||
<p>This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. Read the <a href="https://omnipotent.net/jquery.sparkline/" target="_blank"> Official jQuery Sparklines Documentation</a> for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Line chart</h6>
|
||||
<div id="sparklineLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Area chart</h6>
|
||||
<div id="sparklineArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bar chart</h6>
|
||||
<div id="sparklineBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Stacked Bar chart</h6>
|
||||
<div id="sparklineBarStacked"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Composite chart</h6>
|
||||
<div id="sparklineComposite"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Box plot</h6>
|
||||
<div id="sparklineBoxplot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Pie chart</h6>
|
||||
<div id="sparklinePie"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bullet chart</h6>
|
||||
<div id="sparklineBullet"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/jquery-sparkline/jquery.sparkline.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/sparkline.js') }}"></script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user