limpieza del proyecto. Transferencias falta devolución
@ -23,8 +23,12 @@ pagos.table.estado.failed=Fallido
|
||||
pagos.table.finalizar=Finalizar
|
||||
|
||||
pagos.transferencia.no-pedido=No disponible
|
||||
pagos.transferencia.finalizar.title=Finalizar Transferencia Bancaria
|
||||
pagos.transferencia.finalizar.text=¿Estás seguro de que deseas marcar esta transferencia bancaria como completada? Esta acción no se puede deshacer.
|
||||
pagos.transferencia.finalizar.success=Transferencia bancaria marcada como completada con éxito.
|
||||
pagos.transferencia.finalizar.error.general=Error al finalizar la transferencia bancaria
|
||||
|
||||
pagos.refund.title=Devolución de Pago Redsys
|
||||
pagos.refund.title=Devolución
|
||||
pagos.refund.text=Introduce la cantidad a devolver (en euros):
|
||||
pagos.refund.success=Devolución solicitada con éxito. Si no se refleja inmediatamente, espere unos minutos y actualiza la página.
|
||||
pagos.refund.error.general=Error al procesar la devolución
|
||||
|
||||
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 229 KiB |
|
Before Width: | Height: | Size: 470 KiB |
|
Before Width: | Height: | Size: 490 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 609 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 316 KiB |
|
Before Width: | Height: | Size: 290 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 183 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 154 KiB |
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 206 KiB |
|
Before Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 178 KiB |
|
Before Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
@ -1,12 +0,0 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Animatoin aos Js File
|
||||
*/
|
||||
|
||||
AOS.init({
|
||||
easing: 'ease-out-back',
|
||||
duration: 1000
|
||||
});
|
||||
@ -1,786 +0,0 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Bar Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Bar chart
|
||||
var chartBarColors = getChartColorsArray("bar_chart");
|
||||
if(chartBarColors){
|
||||
var options = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
data: [380, 430, 450, 475, 550, 584, 780, 1100, 1220, 1365]
|
||||
}],
|
||||
colors: chartBarColors,
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
|
||||
}
|
||||
}
|
||||
var chart = new ApexCharts(document.querySelector("#bar_chart"),options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Custom DataLabels Bar
|
||||
var chartDatalabelsBarColors = getChartColorsArray("custom_datalabels_bar");
|
||||
if(chartDatalabelsBarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '100%',
|
||||
distributed: true,
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'bottom'
|
||||
},
|
||||
}
|
||||
},
|
||||
colors: chartDatalabelsBarColors,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
textAnchor: 'start',
|
||||
style: {
|
||||
colors: ['#fff']
|
||||
},
|
||||
formatter: function (val, opt) {
|
||||
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
|
||||
},
|
||||
offsetX: 0,
|
||||
dropShadow: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
|
||||
'United States', 'China', 'India'
|
||||
],
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Custom DataLabels',
|
||||
align: 'center',
|
||||
floating: true,
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Category Names as DataLabels inside bars',
|
||||
align: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function () {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#custom_datalabels_bar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Stacked Bar Charts
|
||||
var chartStackedBarColors = getChartColorsArray("stacked_bar");
|
||||
if(chartStackedBarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Marine Sprite',
|
||||
data: [44, 55, 41, 37, 22, 43, 21]
|
||||
}, {
|
||||
name: 'Striking Calf',
|
||||
data: [53, 32, 33, 52, 13, 43, 32]
|
||||
}, {
|
||||
name: 'Tank Picture',
|
||||
data: [12, 17, 11, 9, 15, 11, 20]
|
||||
}, {
|
||||
name: 'Bucket Slope',
|
||||
data: [9, 7, 5, 8, 6, 9, 4]
|
||||
}, {
|
||||
name: 'Reborn Kid',
|
||||
data: [25, 12, 19, 32, 25, 24, 10]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
title: {
|
||||
text: 'Fiction Books Sales',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: undefined
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 40
|
||||
},
|
||||
colors: chartStackedBarColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#stacked_bar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Stacked Bars 100
|
||||
var chartStackedBar100Colors = getChartColorsArray("stacked_bar_100");
|
||||
if(chartStackedBar100Colors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Marine Sprite',
|
||||
data: [44, 55, 41, 37, 22, 43, 21]
|
||||
}, {
|
||||
name: 'Striking Calf',
|
||||
data: [53, 32, 33, 52, 13, 43, 32]
|
||||
}, {
|
||||
name: 'Tank Picture',
|
||||
data: [12, 17, 11, 9, 15, 11, 20]
|
||||
}, {
|
||||
name: 'Bucket Slope',
|
||||
data: [9, 7, 5, 8, 6, 9, 4]
|
||||
}, {
|
||||
name: 'Reborn Kid',
|
||||
data: [25, 12, 19, 32, 25, 24, 10]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
stackType: '100%',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
title: {
|
||||
text: '100% Stacked Bar',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 40
|
||||
},
|
||||
colors: chartStackedBar100Colors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#stacked_bar_100"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Bar with Negative Values
|
||||
var chartNegativeBarColors = getChartColorsArray("negative_bars");
|
||||
if(chartNegativeBarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Males',
|
||||
data: [0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2, 4.5,
|
||||
3.9, 3.5, 3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Females',
|
||||
data: [-0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3, -4.4,
|
||||
-4.1, -4, -4.1, -3.4, -3.1, -2.8
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 360,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
colors: chartNegativeBarColors,
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '80%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ["#fff"]
|
||||
},
|
||||
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
title: {
|
||||
text: 'Age',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
shared: false,
|
||||
x: {
|
||||
formatter: function (val) {
|
||||
return val
|
||||
}
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return Math.abs(val) + "%"
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Mauritius population pyramid 2011',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['85+', '80-84', '75-79', '70-74', '65-69', '60-64', '55-59', '50-54',
|
||||
'45-49', '40-44', '35-39', '30-34', '25-29', '20-24', '15-19', '10-14', '5-9',
|
||||
'0-4'
|
||||
],
|
||||
title: {
|
||||
text: 'Percent'
|
||||
},
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return Math.abs(Math.round(val)) + "%"
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#negative_bars"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Bar with Markers
|
||||
var chartBarMarkersColors = getChartColorsArray("bar_markers");
|
||||
if(chartBarMarkersColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Actual',
|
||||
data: [{
|
||||
x: '2011',
|
||||
y: 12,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 14,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2012',
|
||||
y: 44,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 54,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2013',
|
||||
y: 54,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 52,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2014',
|
||||
y: 66,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 65,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2015',
|
||||
y: 81,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 66,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2016',
|
||||
y: 67,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 70,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
}
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
colors: chartBarMarkersColors,
|
||||
dataLabels: {
|
||||
formatter: function (val, opt) {
|
||||
var goals =
|
||||
opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex]
|
||||
.goals
|
||||
|
||||
// if (goals && goals.length) {
|
||||
// return `${val} / ${goals[0].value}`
|
||||
// }
|
||||
return val
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
showForSingleSeries: true,
|
||||
customLegendItems: ['Actual', 'Expected'],
|
||||
markers: {
|
||||
fillColors: chartBarMarkersColors
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#bar_markers"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Reversed Bar Chart
|
||||
var chartBarReversedColors = getChartColorsArray("reversed_bars");
|
||||
if(chartBarReversedColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [400, 430, 448, 470, 540, 580, 690]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
annotations: {
|
||||
xaxis: [{
|
||||
x: 500,
|
||||
borderColor: '#038edc',
|
||||
label: {
|
||||
borderColor: '#038edc',
|
||||
style: {
|
||||
color: '#fff',
|
||||
background: '#038edc',
|
||||
},
|
||||
text: 'X annotation',
|
||||
}
|
||||
}],
|
||||
yaxis: [{
|
||||
y: 'July',
|
||||
y2: 'September',
|
||||
label: {
|
||||
text: 'Y annotation'
|
||||
}
|
||||
}]
|
||||
},
|
||||
colors: chartBarReversedColors,
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
},
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
reversed: true,
|
||||
axisTicks: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#reversed_bars"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Patterned Charts
|
||||
var chartPatternedColors = getChartColorsArray("patterned_bars");
|
||||
if(chartPatternedColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Marine Sprite',
|
||||
data: [44, 55, 41, 37, 22, 43, 21]
|
||||
}, {
|
||||
name: 'Striking Calf',
|
||||
data: [53, 32, 33, 52, 13, 43, 32]
|
||||
}, {
|
||||
name: 'Tank Picture',
|
||||
data: [12, 17, 11, 9, 15, 11, 20]
|
||||
}, {
|
||||
name: 'Bucket Slope',
|
||||
data: [9, 7, 5, 8, 6, 9, 4]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 1,
|
||||
opacity: 0.25
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '60%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
},
|
||||
title: {
|
||||
text: 'Compare Sales Strategy',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: undefined
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
shared: false,
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'pattern',
|
||||
opacity: 1,
|
||||
pattern: {
|
||||
style: ['circles', 'slantedLines', 'verticalLines', 'horizontalLines'], // string or array of strings
|
||||
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: 'none'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'right',
|
||||
offsetY: 40
|
||||
},
|
||||
colors: chartPatternedColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#patterned_bars"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Groups Bar Charts
|
||||
var chartGroupbarColors = getChartColorsArray("grouped_bar");
|
||||
if(chartGroupbarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [44, 55, 41, 64, 22, 43, 21]
|
||||
}, {
|
||||
data: [53, 32, 33, 52, 13, 44, 32]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 410,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'top',
|
||||
},
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
offsetX: -6,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#fff']
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
|
||||
},
|
||||
colors: chartGroupbarColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#grouped_bar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Bar with Images
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'coins',
|
||||
data: [2, 4, 3, 4, 3, 5, 5, 6.5, 6, 5, 4, 5, 8, 7, 7, 8, 8, 10, 9, 9, 12, 12,
|
||||
11, 12, 13, 14, 16, 14, 15, 17, 19, 21
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 410,
|
||||
animations: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '100%',
|
||||
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
colors: ["#fff"],
|
||||
width: 0.2
|
||||
},
|
||||
labels: Array.apply(null, {
|
||||
length: 39
|
||||
}).map(function (el, index) {
|
||||
return index + 1;
|
||||
}),
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
text: 'Weight',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
position: 'back'
|
||||
},
|
||||
title: {
|
||||
text: 'Paths filled by clipped image',
|
||||
align: 'right',
|
||||
offsetY: 30,
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'image',
|
||||
opacity: 0.87,
|
||||
image: {
|
||||
src: ['./assets/images/small/img-4.jpg'],
|
||||
width: 466,
|
||||
height: 406
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
if(document.querySelector("#bar_images")){
|
||||
var chart = new ApexCharts(document.querySelector("#bar_images"), options);
|
||||
chart.render();
|
||||
}
|
||||
@ -1,268 +0,0 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Boxplot Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var chartBoxBasicColors = getChartColorsArray("basic_box");
|
||||
if(chartBoxBasicColors){
|
||||
var options = {
|
||||
series: [{
|
||||
type: 'boxPlot',
|
||||
data: [{
|
||||
x: 'Jan 2015',
|
||||
y: [54, 66, 69, 75, 88]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2016',
|
||||
y: [43, 65, 69, 76, 81]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2017',
|
||||
y: [31, 39, 45, 51, 59]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2018',
|
||||
y: [39, 46, 55, 65, 71]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2019',
|
||||
y: [29, 31, 35, 39, 44]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2020',
|
||||
y: [41, 49, 58, 61, 67]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2021',
|
||||
y: [54, 59, 66, 71, 88]
|
||||
}
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
type: 'boxPlot',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Basic BoxPlot Chart',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
boxPlot: {
|
||||
colors: {
|
||||
upper: chartBoxBasicColors[0],
|
||||
lower: chartBoxBasicColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartBoxBasicColors[2]]
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_box"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Boxplot-Scatter
|
||||
var chartBoxPlotColors = getChartColorsArray("box_plot");
|
||||
if(chartBoxPlotColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Box',
|
||||
type: 'boxPlot',
|
||||
data: [{
|
||||
x: new Date('2017-01-01').getTime(),
|
||||
y: [54, 66, 69, 75, 88]
|
||||
},
|
||||
{
|
||||
x: new Date('2018-01-01').getTime(),
|
||||
y: [43, 65, 69, 76, 81]
|
||||
},
|
||||
{
|
||||
x: new Date('2019-01-01').getTime(),
|
||||
y: [31, 39, 45, 51, 59]
|
||||
},
|
||||
{
|
||||
x: new Date('2020-01-01').getTime(),
|
||||
y: [39, 46, 55, 65, 71]
|
||||
},
|
||||
{
|
||||
x: new Date('2021-01-01').getTime(),
|
||||
y: [29, 31, 35, 39, 44]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Outliers',
|
||||
type: 'scatter',
|
||||
data: [{
|
||||
x: new Date('2017-01-01').getTime(),
|
||||
y: 32
|
||||
},
|
||||
{
|
||||
x: new Date('2018-01-01').getTime(),
|
||||
y: 25
|
||||
},
|
||||
{
|
||||
x: new Date('2019-01-01').getTime(),
|
||||
y: 64
|
||||
},
|
||||
{
|
||||
x: new Date('2020-01-01').getTime(),
|
||||
y: 27
|
||||
},
|
||||
{
|
||||
x: new Date('2020-01-01').getTime(),
|
||||
y: 78
|
||||
},
|
||||
{
|
||||
x: new Date('2021-01-01').getTime(),
|
||||
y: 15
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'boxPlot',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: [chartBoxPlotColors[0], chartBoxPlotColors[1]],
|
||||
title: {
|
||||
text: 'BoxPlot - Scatter Chart',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
tooltip: {
|
||||
formatter: function (val) {
|
||||
return new Date(val).getFullYear()
|
||||
}
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
boxPlot: {
|
||||
colors: {
|
||||
upper: chartBoxPlotColors[2],
|
||||
lower: chartBoxPlotColors[3]
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartBoxPlotColors[4]]
|
||||
},
|
||||
tooltip: {
|
||||
shared: false,
|
||||
intersect: true
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#box_plot"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// box_plot_hori
|
||||
var chartBoxPlotHoriColors = getChartColorsArray("box_plot_hori");
|
||||
if (chartBoxPlotHoriColors) {
|
||||
var options = {
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Category A',
|
||||
y: [54, 66, 69, 75, 88]
|
||||
},
|
||||
{
|
||||
x: 'Category B',
|
||||
y: [43, 65, 69, 76, 81]
|
||||
},
|
||||
{
|
||||
x: 'Category C',
|
||||
y: [31, 39, 45, 51, 59]
|
||||
},
|
||||
{
|
||||
x: 'Category D',
|
||||
y: [39, 46, 55, 65, 71]
|
||||
},
|
||||
{
|
||||
x: 'Category E',
|
||||
y: [29, 31, 35, 39, 44]
|
||||
},
|
||||
{
|
||||
x: 'Category F',
|
||||
y: [41, 49, 58, 61, 67]
|
||||
},
|
||||
{
|
||||
x: 'Category G',
|
||||
y: [54, 59, 66, 71, 88]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'boxPlot',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '50%'
|
||||
},
|
||||
boxPlot: {
|
||||
colors: {
|
||||
upper: chartBoxPlotHoriColors[0],
|
||||
lower: chartBoxPlotHoriColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartBoxPlotHoriColors[2]]
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#box_plot_hori"), options);
|
||||
chart.render();
|
||||
}
|
||||
@ -1,189 +0,0 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Bubble Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function(value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Bubble Charts Generate Data
|
||||
function generateData(baseval, count, yrange) {
|
||||
var i = 0;
|
||||
var series = [];
|
||||
while (i < count) {
|
||||
var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
|
||||
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
||||
var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
|
||||
|
||||
series.push([x, y, z]);
|
||||
baseval += 86400000;
|
||||
i++;
|
||||
}
|
||||
return series;
|
||||
}
|
||||
|
||||
// Simple Bubble
|
||||
var chartBubbleSimpleColors = getChartColorsArray("simple_bubble");
|
||||
if (chartBubbleSimpleColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Bubble1',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Bubble2',
|
||||
data: generateData(new Date('12 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Bubble3',
|
||||
data: generateData(new Date('13 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Bubble4',
|
||||
data: generateData(new Date('14 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bubble',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8
|
||||
},
|
||||
title: {
|
||||
text: 'Simple Bubble Chart',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 12,
|
||||
type: 'category',
|
||||
},
|
||||
yaxis: {
|
||||
max: 70
|
||||
},
|
||||
colors: chartBubbleSimpleColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#simple_bubble"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// 3D Bubble
|
||||
var chartBubbleColors = getChartColorsArray("bubble_chart");
|
||||
if (chartBubbleColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Product1',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product2',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product3',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product4',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bubble',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
},
|
||||
title: {
|
||||
text: '3D Bubble Chart',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 12,
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
rotate: 0,
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
max: 70
|
||||
},
|
||||
theme: {
|
||||
palette: 'palette2'
|
||||
},
|
||||
colors: chartBubbleColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#bubble_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
@ -1,988 +0,0 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Candlestick Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function(value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Candlestick Charts
|
||||
var chartCandlestickBasicColors = getChartColorsArray("basic_candlestick");
|
||||
if (chartCandlestickBasicColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickBasicColors[0],
|
||||
downward: chartCandlestickBasicColors[1],
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'CandleStick Chart',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_candlestick"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Candlestick Synced with Brush Chart (Combo)
|
||||
var chartCandlestickComboColors = getChartColorsArray("combo_candlestick");
|
||||
if (chartCandlestickComboColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
data: seriesData
|
||||
}],
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 200,
|
||||
id: 'candles',
|
||||
toolbar: {
|
||||
autoSelected: 'pan',
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickComboColors[0],
|
||||
downward: chartCandlestickComboColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#combo_candlestick"), options);
|
||||
chart.render();
|
||||
}
|
||||
var chartCandlestickComboColors = getChartColorsArray("combo_candlestick_chart");
|
||||
if (chartCandlestickComboColors) {
|
||||
var optionsBar = {
|
||||
series: [{
|
||||
name: 'volume',
|
||||
data: seriesDataLinear
|
||||
}],
|
||||
chart: {
|
||||
height: 150,
|
||||
type: 'bar',
|
||||
brush: {
|
||||
enabled: true,
|
||||
target: 'candles'
|
||||
},
|
||||
selection: {
|
||||
enabled: true,
|
||||
xaxis: {
|
||||
min: new Date('20 Jan 2017').getTime(),
|
||||
max: new Date('10 Dec 2017').getTime()
|
||||
},
|
||||
fill: {
|
||||
color: '#ccc',
|
||||
opacity: 0.4
|
||||
},
|
||||
stroke: {
|
||||
color: '#0d47a1',
|
||||
}
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '80%',
|
||||
colors: {
|
||||
ranges: [{
|
||||
from: -1000,
|
||||
to: 0,
|
||||
color: '#f1734f'
|
||||
}, {
|
||||
from: 1,
|
||||
to: 10000,
|
||||
color: '#f7cc53'
|
||||
}],
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
axisBorder: {
|
||||
offsetX: 13
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chartBar = new ApexCharts(document.querySelector("#combo_candlestick_chart"), optionsBar);
|
||||
chartBar.render();
|
||||
}
|
||||
|
||||
|
||||
// Category X-axis
|
||||
var chartCandlestickCategoryColors = getChartColorsArray("category_candlestick");
|
||||
if (chartCandlestickCategoryColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'candle',
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'candlestick',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: 'CandleStick Chart - Category X-axis',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickCategoryColors[0],
|
||||
downward: chartCandlestickCategoryColors[1],
|
||||
}
|
||||
}
|
||||
},
|
||||
annotations: {
|
||||
xaxis: [{
|
||||
x: 'Oct 06 14:00',
|
||||
borderColor: chartCandlestickCategoryColors[0],
|
||||
label: {
|
||||
borderColor: chartCandlestickCategoryColors[1],
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
color: '#fff',
|
||||
background: chartCandlestickCategoryColors[1]
|
||||
},
|
||||
orientation: 'horizontal',
|
||||
offsetY: 7,
|
||||
text: 'Annotation Test'
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
labels: {
|
||||
formatter: function(val) {
|
||||
return dayjs(val).format('MMM DD HH:mm')
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#category_candlestick"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Candlestick with line
|
||||
'use strict';
|
||||
|
||||
// Candlestick with line
|
||||
var chartCandlestickLineColors = getChartColorsArray("candlestick_with_line");
|
||||
if (chartCandlestickLineColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: 6604
|
||||
}, {
|
||||
x: new Date(1538782200000),
|
||||
y: 6602
|
||||
}, {
|
||||
x: new Date(1538814600000),
|
||||
y: 6607
|
||||
}, {
|
||||
x: new Date(1538884800000),
|
||||
y: 6620
|
||||
}]
|
||||
}, {
|
||||
name: 'candle',
|
||||
type: 'candlestick',
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
}, {
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
}, {
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
}, {
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
}, {
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
}, {
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
}, {
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
}, {
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
}, {
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
}, {
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
}, {
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
}, {
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
}, {
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
}, {
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
}, {
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
}, {
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
}, {
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
}, {
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
}, {
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
}, {
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
}, {
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
}, {
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
}, {
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
}, {
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
}, {
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
}, {
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
}, {
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
}, {
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
}, {
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
}, {
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
}, {
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
}, {
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
}, {
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
}, {
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
}, {
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
}, {
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
}, {
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
}, {
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
}, {
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
}, {
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
}, {
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
}, {
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
}, {
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
}, {
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
}, {
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
}, {
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
}, {
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
}, {
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
}, {
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
}, {
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
}, {
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
}, {
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
}, {
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
}, {
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
}, {
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
}, {
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
}, {
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
}, {
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
}, {
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
}, {
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
}]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickLineColors[0],
|
||||
downward: chartCandlestickLineColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [chartCandlestickLineColors[2], chartCandlestickLineColors[0]],
|
||||
stroke: {
|
||||
width: [3, 1]
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
custom: [function (_ref) {
|
||||
var seriesIndex = _ref.seriesIndex;
|
||||
var dataPointIndex = _ref.dataPointIndex;
|
||||
var w = _ref.w;
|
||||
|
||||
return w.globals.series[seriesIndex][dataPointIndex];
|
||||
}, function (_ref2) {
|
||||
var seriesIndex = _ref2.seriesIndex;
|
||||
var dataPointIndex = _ref2.dataPointIndex;
|
||||
var w = _ref2.w;
|
||||
|
||||
var o = w.globals.seriesCandleO[seriesIndex][dataPointIndex];
|
||||
var h = w.globals.seriesCandleH[seriesIndex][dataPointIndex];
|
||||
var l = w.globals.seriesCandleL[seriesIndex][dataPointIndex];
|
||||
var c = w.globals.seriesCandleC[seriesIndex][dataPointIndex];
|
||||
return '<div class="apexcharts-tooltip-candlestick">' + '<div>Open: <span class="value">' + o + '</span></div>' + '<div>High: <span class="value">' + h + '</span></div>' + '<div>Low: <span class="value">' + l + '</span></div>' + '<div>Close: <span class="value">' + c + '</span></div>' + '</div>';
|
||||
}]
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#candlestick_with_line"), options);
|
||||
chart.render();
|
||||
}
|
||||