Skip to content

Instantly share code, notes, and snippets.

@faizalanwar

faizalanwar/apex chart

Created July 2, 2023 13:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save faizalanwar/1abc63ccca36524a4174082b0ffcffca to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save faizalanwar/1abc63ccca36524a4174082b0ffcffca to your computer and use it in GitHub Desktop.
Download ZIP
Raw
apex chart
$('.formProses').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$(".perhitunganForm").prop('disabled', true);
$('#inisialisasi').css('display', 'block');
window.scrollTo(0, document.body.scrollHeight);
$.ajax({
data: formData,
cache: false,
contentType: false,
processData: false,
url: "{{ route('perhitungan.hasil') }}",
type: "POST",
dataType: 'json',
success: function(data) {
var push = '<h3 class="text-secondary">#Pehitungan ' + data.nama_produk + '</h3>';
var push = push + `<div class="table-responsive"><table class="table">`;
var index = 0;
var penjualan = JSON.parse(data.penjualan);
var wma = JSON.parse(data.wma);
var wma_mse = JSON.parse(data.wma_mse);
var ses = JSON.parse(data.ses);
var ses_mse = JSON.parse(data.ses_mse);
var nama_produk = data.nama_produk;
var push = push + "<tr>";
var push = push + `<td class="text-center"><b> Bulan </b></td>`;
var push = push + `<td class="text-center"><b> Jumlah </b></td>`;
var push = push + `<td class="text-center"><b> Data Peramalan WMA </b></td>`;
var push = push + `<td class="text-center"><b> MSE WMA</b></td>`;
var push = push + `<td class="text-center"><b> Data Peramalan SES </b></td>`;
var push = push + `<td class="text-center"><b> MSE SES </b></td>`;
var push = push + "</tr>";
for (var i = 0; i < penjualan.length; i++) {
if (i < data.jumlah_data) {
var push = push + "<tr>";
var push = push + `<td class="text-center text-info">` + penjualan[index]['bulan'] + `</td>`;
var push = push + `<td class="text-center text-info">` + penjualan[index]['jumlah'] + `</td>`;
var push = push + `<td class="text-center ">-</td>`;
var push = push + `<td class="text-center ">-</td>`;
var push = push + `<td class="text-center ">` + Math.round(ses[index]) + `</td>`;
var push = push + `<td class="text-center ">-</td>`;
var push = push + "</tr>";
} else {
var push = push + "<tr>";
var push = push + `<td class="text-center">` + penjualan[index]['bulan'] + `</td>`;
var push = push + `<td class="text-center">` + penjualan[index]['jumlah'] + `</td>`;
var push = push + `<td class="text-center">` + wma[index] + `</td>`;
var push = push + `<td class="text-center ">` + wma_mse[index] + `</td>`;
var push = push + `<td class="text-center ">` + Math.round(ses[index]) + `</td>`;
var push = push + `<td class="text-center ">` + ses_mse[index] + `</td>`;
var push = push + "</tr>";
}
index = index + 1
}
var push = push + `</table></div><br><br><br>`;
var push = push + '<h3 class="text-secondary">#Perbandingan Grafik</h3>';
function getRandomRgb() {
var num = Math.round(0xffffff * Math.random());
var r = num >> 16;
var g = num >> 8 & 255;
var b = num & 255;
return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}
var data1 = JSON.parse(data.chart_wma_mse);
var data2 = JSON.parse(data.chart_ses_mse);
var label = JSON.parse(data.label);
var bg1 = getRandomRgb();
var bg2 = getRandomRgb();
var options = {
stroke: {
width: 2,
},
series: [{
name: "MSE WMA",
data: data1
},
{
name: "MSE SES",
data: data2
}
],
chart: {
height: 350,
type: 'line',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
}
},
colors: [bg1, bg2],
dataLabels: {
enabled: true,
},
title: {
text: 'Chart',
align: 'left'
},
grid: {
borderColor: '#e7e7e7',
row: {
colors: ['#f3f3f3', 'transparent'],
opacity: 0.5
},
},
markers: {
size: 1
},
xaxis: {
categories: label,
axisBorder: {
color: "rgba(77, 138, 240, .15)",
},
axisTicks: {
color: "rgba(77, 138, 240, .15)",
},
},
yaxis: {
title: {
text: " ",
style: {
size: 9,
color: "#7987a1",
}
},
tickAmount: 4,
tooltip: {
enabled: true
},
crosshairs: {
stroke: {
color: "#7987a1",
},
},
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
},
};
$('#result').append(push);
var randomDiv = "divChart" + Math.floor(Math.random() * 9999);
var divchart = '<div id="' + randomDiv + '"></div>'
var divchart = divchart + `<hr class="mt-5 mb-5">`;
$("#result").append(divchart);
var chartOutput = new ApexCharts(document.querySelector(('#' + randomDiv)), options);
chartOutput.render();
},
error: function(data) {
var push = '<h3 class="text-secondary">#Pehitungan ' + JSON.parse(data.responseText) + ' </h3>';
var push = push + `<div class="alert alert-danger mt-1 mb-1">Data penjualan belum lengkap, jumlah data penjualan kurang dari jumlah data yang akan di pakai perhitungan</div>`;
var push = push + `<hr class="mt-5 mb-5">`;
$('#result').append(push);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment