API tools faq
paste
Advertisement
fauzanrozaq

view

fauzanrozaq
May 24th, 2019
91
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.16 KB | None | 0 0
raw download clone embed print report
  1. @extends('layouts.app')
  2.  
  3.  
  4. @section('content')
  5. <div class="page-content row">
  6. <div class="page-content-wrapper m-t">
  7.  
  8.  
  9. <div class="sbox " style="border-top: none">
  10. <div class="sbox-title"> <b>Sample Dashboard <small> Just change any content here with real data </small></b></div>
  11. <div class="sbox-content">
  12.  
  13. <div class="row">
  14. <div class="col-lg-4">
  15. <div class="spanel">
  16. <div class="panel-heading"> Radar type chart </div>
  17. <div class="panel-body">
  18. <div>
  19. <canvas id="radarChart"></canvas>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="col-lg-4">
  25. <div class="spanel">
  26. <div class="panel-heading"> Doughnut bar chart </div>
  27. <div class="panel-body">
  28. <div>
  29. <canvas id="doughnutChart" height="140"></canvas>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="col-lg-4">
  35. <div class="spanel">
  36. <div class="panel-heading"> Polar type chart </div>
  37. <div class="panel-body">
  38. <div>
  39. <canvas id="polarOptions" height="140"></canvas>
  40. </div>
  41. </div>
  42. </div>
  43.  
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48.  
  49. <div class="sbox " style="border-top: none">
  50. <div class="sbox-title"> <b>Sample Dashboard <small> Just change any content here with real data </small></b></div>
  51. <div class="sbox-content">
  52. <div class="row">
  53. <div class="col-lg-6">
  54. <div class="spanel">
  55. <div class="panel-heading"> Line type chart </div>
  56. <div class="panel-body">
  57. <div>
  58. <canvas id="lineOptions" height="140"></canvas>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <div class="col-lg-6">
  64. <div class="spanel">
  65. <div class="panel-heading"> Bar type chart </div>
  66. <div class="panel-body">
  67. <div>
  68. <canvas id="barOptions" height="140"></canvas>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="row">
  75. <div class="col-lg-6">
  76. <div class="spanel">
  77. <div class="panel-heading">Single Bar type chart</div>
  78. <div class="panel-body">
  79. <div>
  80. <canvas id="singleBarOptions" height="140"></canvas>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="col-lg-6">
  86. <div class="spanel">
  87. <div class="panel-heading"> Line type chart without curve </div>
  88. <div class="panel-body">
  89. <div>
  90. <canvas id="sharpLineOptions" height="140"></canvas>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96.  
  97.  
  98. </div>
  99. </div>
  100.  
  101.  
  102.  
  103.  
  104.  
  105.  
  106.  
  107. <div class="row sbox-title" >
  108.  
  109.  
  110.  
  111. <div class=" col-sm-3">
  112. <div class="panel-body test_1">
  113. sdsfdsf
  114. </div>
  115. </div>
  116.  
  117. <div class=" col-sm-3">
  118. <div class="panel-body test_1">
  119. sdsfdsf
  120. </div>
  121. </div>
  122.  
  123.  
  124. <div class=" col-sm-3">
  125. <div class="panel-body test_1">
  126. sdsfdsf
  127. </div>
  128. </div>
  129. <div class=" col-sm-3">
  130. <div class="panel-body test_1">
  131. sdsfdsf
  132. </div>
  133. </div>
  134.  
  135.  
  136.  
  137. </div>
  138.  
  139. <div class="row sbox-title" >
  140. <div class=" col-sm-6 test_1 ">dsfsdf
  141.  
  142. <div id="chart"></div>
  143.  
  144.  
  145.  
  146.  
  147. </div>
  148. </div>
  149.  
  150.  
  151.  
  152.  
  153.  
  154. </div>
  155. </div>
  156.  
  157. <script src="https://code.highcharts.com/highcharts.js"></script>
  158.  
  159. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
  160. <script type="text/javascript" src="{{ asset('sximo5/js/plugins/chartjs/Chart.min.js') }}"></script>
  161. <script>
  162.  
  163. $(function () {
  164.  
  165.  
  166. /**
  167. * Options for Line chart
  168. */
  169. var lineData = {
  170. labels: ["status 1", "February", "March", "April", "May", "June", "July"],
  171. datasets: [
  172. {
  173. label: "Example dataset",
  174. fillColor: "rgba(220,220,220,0.5)",
  175. strokeColor: "rgba(220,220,220,1)",
  176. pointColor: "rgba(220,220,220,1)",
  177. pointStrokeColor: "#fff",
  178. pointHighlightFill: "#fff",
  179. pointHighlightStroke: "rgba(220,220,220,1)",
  180. data: [22, 44, 67, 43, 76, 45, 12]
  181. },
  182. {
  183. label: "Example dataset",
  184. fillColor: "rgba(98,203,49,0.5)",
  185. strokeColor: "rgba(98,203,49,0.7)",
  186. pointColor: "rgba(98,203,49,1)",
  187. pointStrokeColor: "#fff",
  188. pointHighlightFill: "#fff",
  189. pointHighlightStroke: "rgba(26,179,148,1)",
  190. data: [16, 32, 18, 26, 42, 33, 44]
  191. }
  192. ]
  193. };
  194.  
  195. var lineOptions = {
  196. scaleShowGridLines : true,
  197. scaleGridLineColor : "rgba(0,0,0,.05)",
  198. scaleGridLineWidth : 1,
  199. bezierCurve : true,
  200. bezierCurveTension : 0.4,
  201. pointDot : true,
  202. pointDotRadius : 4,
  203. pointDotStrokeWidth : 1,
  204. pointHitDetectionRadius : 20,
  205. datasetStroke : true,
  206. datasetStrokeWidth : 1,
  207. datasetFill : true,
  208. responsive: true
  209. };
  210.  
  211.  
  212. var ctx = document.getElementById("lineOptions").getContext("2d");
  213. var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
  214.  
  215. /**
  216. * Options for Sharp Line chart
  217. */
  218. var sharpLineData = {
  219. labels: ["January", "February", "March", "April", "May", "June", "July"],
  220. datasets: [
  221. {
  222. label: "Example dataset",
  223. fillColor: "rgba(98,203,49,0.5)",
  224. strokeColor: "rgba(98,203,49,0.7)",
  225. pointColor: "rgba(98,203,49,1)",
  226. pointStrokeColor: "#fff",
  227. pointHighlightFill: "#fff",
  228. pointHighlightStroke: "rgba(98,203,49,1)",
  229. data: [33, 48, 40, 19, 54, 27, 54]
  230. }
  231. ]
  232. };
  233.  
  234. var sharpLineOptions = {
  235. scaleShowGridLines : true,
  236. scaleGridLineColor : "rgba(0,0,0,.05)",
  237. scaleGridLineWidth : 1,
  238. bezierCurve : false,
  239. pointDot : true,
  240. pointDotRadius : 4,
  241. pointDotStrokeWidth : 1,
  242. pointHitDetectionRadius : 20,
  243. datasetStroke : true,
  244. datasetStrokeWidth : 1,
  245. datasetFill : true,
  246. responsive: true
  247. };
  248.  
  249. var ctx = document.getElementById("sharpLineOptions").getContext("2d");
  250. var myNewChart = new Chart(ctx).Line(sharpLineData, sharpLineOptions);
  251.  
  252.  
  253. /**
  254. * Options for Bar chart
  255. */
  256. var barOptions = {
  257. scaleBeginAtZero : true,
  258. scaleShowGridLines : true,
  259. scaleGridLineColor : "rgba(0,0,0,.05)",
  260. scaleGridLineWidth : 1,
  261. barShowStroke : true,
  262. barStrokeWidth : 1,
  263. barValueSpacing : 5,
  264. barDatasetSpacing : 1,
  265. responsive:true
  266. };
  267.  
  268. /**
  269. * Data for Bar chart
  270. */
  271. var barData = {
  272. labels: ["January", "February", "March", "April", "May", "June", "July"],
  273. datasets: [
  274. {
  275. label: "My First dataset",
  276. fillColor: "rgba(220,220,220,0.5)",
  277. strokeColor: "rgba(220,220,220,0.8)",
  278. highlightFill: "rgba(220,220,220,0.75)",
  279. highlightStroke: "rgba(220,220,220,1)",
  280. data: [65, 59, 80, 81, 56, 55, 40]
  281. },
  282. {
  283. label: "My Second dataset",
  284. fillColor: "rgba(98,203,49,0.5)",
  285. strokeColor: "rgba(98,203,49,0.8)",
  286. highlightFill: "rgba(98,203,49,0.75)",
  287. highlightStroke: "rgba(98,203,49,1)",
  288. data: [28, 48, 40, 19, 86, 27, 90]
  289. }
  290. ]
  291. };
  292.  
  293. var ctx = document.getElementById("barOptions").getContext("2d");
  294. var myNewChart = new Chart(ctx).Bar(barData, barOptions);
  295.  
  296. /**
  297. * Options for Bar chart
  298. */
  299. var singleBarOptions = {
  300. scaleBeginAtZero : true,
  301. scaleShowGridLines : true,
  302. scaleGridLineColor : "rgba(0,0,0,.05)",
  303. scaleGridLineWidth : 1,
  304. barShowStroke : true,
  305. barStrokeWidth : 1,
  306. barValueSpacing : 5,
  307. barDatasetSpacing : 1,
  308. responsive:true
  309. };
  310.  
  311. /**
  312. * Data for Bar chart
  313. */
  314. var singleBarData = {
  315. labels: ["January", "February", "March", "April", "May", "June", "July"],
  316. datasets: [
  317. {
  318. label: "My Second dataset",
  319. fillColor: "rgba(98,203,49,0.5)",
  320. strokeColor: "rgba(98,203,49,0.8)",
  321. highlightFill: "rgba(98,203,49,0.75)",
  322. highlightStroke: "rgba(98,203,49,1)",
  323. data: [10, 20, 30, 40, 30, 50, 60]
  324. }
  325. ]
  326. };
  327.  
  328. var ctx = document.getElementById("singleBarOptions").getContext("2d");
  329. var myNewChart = new Chart(ctx).Bar(singleBarData, singleBarOptions);
  330.  
  331.  
  332. var polarData = [
  333. {
  334. value: 120,
  335. color:"#62cb31",
  336. highlight: "#57b32c",
  337. label: "Homer"
  338.  
  339. },
  340. {
  341. value: 140,
  342. color: "#80dd55",
  343. highlight: "#57b32c",
  344. label: "Inspinia"
  345. },
  346. {
  347. value: 100,
  348. color: "#a3e186",
  349. highlight: "#57b32c",
  350. label: "Luna"
  351. }
  352. ];
  353.  
  354. var polarOptions = {
  355. scaleShowLabelBackdrop: true,
  356. scaleBackdropColor: "rgba(255,255,255,0.75)",
  357. scaleBeginAtZero: true,
  358. scaleBackdropPaddingY: 1,
  359. scaleBackdropPaddingX: 1,
  360. scaleShowLine: true,
  361. segmentShowStroke: true,
  362. segmentStrokeColor: "#fff",
  363. segmentStrokeWidth: 2,
  364. animationSteps: 100,
  365. animationEasing: "easeOutBounce",
  366. animateRotate: true,
  367. animateScale: false,
  368. responsive: true,
  369. options: {
  370. legendCallback: function(chart) {
  371. // Return the HTML string here.
  372. }
  373. }
  374.  
  375. };
  376.  
  377. var ctx = document.getElementById("polarOptions").getContext("2d");
  378. var myNewChart = new Chart(ctx).PolarArea(polarData, polarOptions);
  379.  
  380.  
  381. var doughnutData = [
  382. {
  383. value: 20,
  384. color:"#62cb31",
  385. highlight: "#57b32c",
  386. label: "App"
  387. },
  388. {
  389. value: 120,
  390. color: "#91dc6e",
  391. highlight: "#57b32c",
  392. label: "Software"
  393. },
  394. {
  395. value: 100,
  396. color: "#a3e186",
  397. highlight: "#57b32c",
  398. label: "Laptop"
  399. }
  400. ];
  401.  
  402. var doughnutOptions = {
  403. segmentShowStroke: true,
  404. segmentStrokeColor: "#fff",
  405. segmentStrokeWidth: 2,
  406. percentageInnerCutout: 45, // This is 0 for Pie charts
  407. animationSteps: 100,
  408. animationEasing: "easeOutBounce",
  409. animateRotate: true,
  410. animateScale: false,
  411. responsive: true,
  412.  
  413. };
  414.  
  415.  
  416. var ctx = document.getElementById("doughnutChart").getContext("2d");
  417. var myNewChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
  418.  
  419. var radarData = {
  420. labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
  421. datasets: [
  422. {
  423. label: "My First dataset",
  424. fillColor: "rgba(98,203,49,0.2)",
  425. strokeColor: "rgba(98,203,49,1)",
  426. pointColor: "rgba(98,203,49,1)",
  427. pointStrokeColor: "#fff",
  428. pointHighlightFill: "#fff",
  429. pointHighlightStroke: "#62cb31",
  430. data: [65, 59, 66, 45, 56, 55, 40]
  431. },
  432. {
  433. label: "My Second dataset",
  434. fillColor: "rgba(98,203,49,0.4)",
  435. strokeColor: "rgba(98,203,49,1)",
  436. pointColor: "rgba(98,203,49,1)",
  437. pointStrokeColor: "#fff",
  438. pointHighlightFill: "#fff",
  439. pointHighlightStroke: "#62cb31",
  440. data: [28, 12, 40, 19, 63, 27, 87]
  441. }
  442. ]
  443. };
  444.  
  445. var radarOptions = {
  446. scaleShowLine : true,
  447. angleShowLineOut : true,
  448. scaleShowLabels : false,
  449. scaleBeginAtZero : true,
  450. angleLineColor : "rgba(0,0,0,.1)",
  451. angleLineWidth : 1,
  452. pointLabelFontFamily : "'Arial'",
  453. pointLabelFontStyle : "normal",
  454. pointLabelFontSize : 10,
  455. pointLabelFontColor : "#666",
  456. pointDot : true,
  457. pointDotRadius : 2,
  458. pointDotStrokeWidth : 1,
  459. pointHitDetectionRadius : 20,
  460. datasetStroke : true,
  461. datasetStrokeWidth : 1,
  462. datasetFill : true,
  463. };
  464.  
  465. var ctx = document.getElementById("radarChart").getContext("2d");
  466. var myNewChart = new Chart(ctx).Radar(radarData, radarOptions);
  467. });
  468.  
  469.  
  470.  
  471.  
  472.  
  473. // widi
  474.  
  475.  
  476.  
  477. Highcharts.chart('chart', {
  478. chart: {
  479. type: 'column'
  480. },
  481. title: {
  482. text: 'Paket Umroh'
  483. },
  484. subtitle: {
  485. text: 'jamaah'
  486. },
  487. xAxis: {
  488. categories: [
  489. 'Jan',
  490. 'Feb',
  491. 'Mar',
  492. 'Apr',
  493. 'May',
  494. 'Jun',
  495. 'Jul',
  496. 'Aug',
  497. 'Sep',
  498. 'Oct',
  499. 'Nov',
  500. 'Dec'
  501. ],
  502. crosshair: true
  503. },
  504. yAxis: {
  505. min: 0,
  506. title: {
  507. text: 'Jamaah (pax)'
  508. }
  509. },
  510. tooltip: {
  511. headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  512. pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  513. '<td style="padding:0"><b>{point.y:.1f} jamaah</b></td></tr>',
  514. footerFormat: '</table>',
  515. shared: true,
  516. useHTML: true
  517. },
  518. plotOptions: {
  519. column: {
  520. pointPadding: 0.2,
  521. borderWidth: 0
  522. }
  523. },
  524. series: [{
  525. name: 'Tokyo',
  526. data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  527.  
  528. }, {
  529. name: 'New York',
  530. data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
  531.  
  532. }, {
  533. name: 'London',
  534. data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
  535.  
  536. }, {
  537. name: 'Berlin',
  538. data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
  539.  
  540. }]
  541. });
  542.  
  543. </script>
  544.  
  545.  
  546. @stop
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!