File: /var/www/vhost/disk-apps/demo-sigedo.teky.com.co/public/assets/js/apexMixChart.script.js
$(document).ready(function() {
// LIne COlumn Mix
var options = {
chart: {
height: 350,
type: 'line',
},
series: [{
name: 'Website Blog',
type: 'column',
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
}, {
name: 'Social Media',
type: 'line',
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
}],
stroke: {
width: [0, 4],
curve: ['smooth', 'smooth', ],
},
// title: {
// text: ''
// },
// labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
xaxis: {
type: 'datetime'
},
yaxis: [{
title: {
text: 'Website Blog',
},
}, {
opposite: true,
title: {
text: 'Social Media'
}
}]
}
var chart = new ApexCharts(
document.querySelector("#lineColumn"),
options
);
chart.render();
// multiple YXis
var options = {
chart: {
height: 350,
type: 'line',
stacked: false
},
dataLabels: {
enabled: false
},
series: [{
name: 'Income',
type: 'column',
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
}, {
name: 'Cashflow',
type: 'column',
data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
}, {
name: 'Revenue',
type: 'line',
data: [20, 29, 37, 36, 44, 45, 50, 58]
}],
stroke: {
width: [1, 1, 4]
},
// title: {
// text: '',
// align: 'left',
// offsetX: 110
// },
xaxis: {
categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
},
yaxis: [{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
color: '#008FFB',
}
},
title: {
text: "Income (thousand crores)",
style: {
color: '#008FFB',
}
},
tooltip: {
enabled: true
}
},
{
seriesName: 'Income',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: "Operating Cashflow (thousand crores)",
style: {
color: '#00E396',
}
},
},
{
seriesName: 'Revenue',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#FEB019'
},
labels: {
style: {
color: '#FEB019',
},
},
title: {
text: "Revenue (thousand crores)",
style: {
color: '#FEB019',
}
}
},
],
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60
},
},
legend: {
horizontalAlign: 'left',
offsetX: 40
}
}
var chart = new ApexCharts(
document.querySelector("#multipleYxis"),
options
);
chart.render();
// line & Area
var options = {
chart: {
height: 350,
type: 'line',
toolbar: {
show: false
}
},
stroke: {
curve: 'smooth'
},
series: [{
name: 'TEAM A',
type: 'area',
data: [44, 55, 31, 47, 31, 43, 26, 41, 31, 47, 33]
}, {
name: 'TEAM B',
type: 'line',
data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43]
}],
fill: {
type: 'solid',
opacity: [0.35, 1],
},
labels: ['Dec 01', 'Dec 02', 'Dec 03', 'Dec 04', 'Dec 05', 'Dec 06', 'Dec 07', 'Dec 08', 'Dec 09 ', 'Dec 10', 'Dec 11'],
markers: {
size: 0
},
yaxis: [{
title: {
text: 'Series A',
},
},
{
opposite: true,
title: {
text: 'Series B',
},
},
],
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function(y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#lineArea"),
options
);
chart.render();
// line column and area
var options = {
chart: {
height: 350,
type: 'line',
stacked: false,
},
stroke: {
width: [0, 2, 5],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
colors: ['#3A5794', '#A5C351', '#E14A84'],
series: [{
name: 'Facebook',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Vine',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}, {
name: 'Dribbble',
type: 'line',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
}],
fill: {
opacity: [0.85, 0.25, 1],
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100]
}
},
labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003', '08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'],
markers: {
size: 0
},
xaxis: {
type: 'datetime'
},
yaxis: {
min: 0
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function(y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " views";
}
return y;
}
}
},
legend: {
labels: {
useSeriesColors: true
},
markers: {
customHTML: [
function() {
return '<span><i class=""></i></span>'
},
function() {
return '<span><i class=""></i></span>'
},
function() {
return '<span><i class=""></i></span>'
}
],
}
}
}
var chart = new ApexCharts(
document.querySelector("#lineColumnArea"),
options
);
chart.render();
});