ihernandez
/
bitacora
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3 Commits
2 Branches
0 Tags
38 MiB
 
 
 
 
 
 
Tree: ea8415bc2c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ea8415bc2c'
${ noResults }
bitacora/public/dist/js/pages/apex-chart/apex.line.init.js

577 lines
11 KiB
Raw Blame History

$(function () {
// Basic Line Chart -------> LINE CHART
var options_line = {
series: [
{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
},
],
chart: {
height: 350,
type: "line",
fontFamily: '"Nunito Sans",sans-serif',
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
colors: ["#6993ff"],
stroke: {
curve: "straight",
},
grid: {
row: {
colors: ["rgba(0,0,0,0.2)", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
borderColor: "transparent",
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
],
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
};
var chart_line_basic = new ApexCharts(
document.querySelector("#chart-line-basic"),
options_line
);
chart_line_basic.render();
// Data Label Line Chart -------> LINE CHART
var options = {
series: [
{
name: "High - 2013",
data: [28, 29, 33, 36, 32, 32, 33],
},
{
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13],
},
],
chart: {
fontFamily: '"Nunito Sans",sans-serif',
height: 350,
type: "line",
dropShadow: {
enabled: true,
color: "#000",
top: 18,
left: 7,
blur: 10,
opacity: 0.2,
},
toolbar: {
show: false,
},
},
colors: ["#6993ff", "#4fc3f7"],
dataLabels: {
enabled: true,
},
stroke: {
curve: "smooth",
},
grid: {
borderColor: "transparent",
row: {
colors: ["rgba(0,0,0,0.2)", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
},
markers: {
size: 1,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
min: 5,
max: 40,
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
legend: {
position: "top",
horizontalAlign: "right",
floating: true,
offsetY: -25,
offsetX: -5,
},
};
var chart_line_data = new ApexCharts(
document.querySelector("#chart-line-with-data-label"),
options
);
chart_line_data.render();
// Zoomable Line Chart -------> LINE CHART
var options_zoomable = {
series: [
{
name: "XYZ MOTORS",
data: [
{
x: "02-10-2017 GMT",
y: 34,
},
{
x: "02-11-2017 GMT",
y: 43,
},
{
x: "02-12-2017 GMT",
y: 31,
},
{
x: "02-13-2017 GMT",
y: 43,
},
{
x: "02-14-2017 GMT",
y: 33,
},
{
x: "02-15-2017 GMT",
y: 52,
},
],
},
],
chart: {
fontFamily: '"Nunito Sans",sans-serif',
type: "area",
stacked: false,
height: 350,
zoom: {
type: "x",
enabled: true,
autoScaleYaxis: true,
},
toolbar: {
autoSelected: "zoom",
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
borderColor: "transparent",
},
colors: ["#6993ff"],
markers: {
size: 0,
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 90, 100],
},
},
yaxis: {
labels: {
formatter: function (val) {
return (val / 1000000).toFixed(0);
},
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
xaxis: {
type: "datetime",
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
shared: false,
y: {
formatter: function (val) {
return (val / 1000000).toFixed(0);
},
},
theme: "dark",
},
};
var chart_line_zoomable = new ApexCharts(
document.querySelector("#chart-line-zoomable"),
options_zoomable
);
chart_line_zoomable.render();
// Gradient Line Chart -------> LINE CHART
var options_gradient = {
series: [
{
name: "Likes",
data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5],
},
],
chart: {
fontFamily: '"Nunito Sans",sans-serif',
height: 350,
type: "line",
toolbar: {
show: false,
},
},
stroke: {
width: 7,
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"1/11/2000",
"2/11/2000",
"3/11/2000",
"4/11/2000",
"5/11/2000",
"6/11/2000",
"7/11/2000",
"8/11/2000",
"9/11/2000",
"10/11/2000",
"11/11/2000",
"12/11/2000",
"1/11/2001",
"2/11/2001",
"3/11/2001",
"4/11/2001",
"5/11/2001",
"6/11/2001",
],
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
grid: {
borderColor: "transparent",
},
colors: ["#36bea6"],
fill: {
type: "gradient",
gradient: {
shade: "dark",
gradientToColors: ["#6993ff"],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100],
},
},
markers: {
size: 4,
colors: ["#6993ff"],
strokeColors: "#fff",
strokeWidth: 2,
hover: {
size: 7,
},
},
yaxis: {
min: -10,
max: 40,
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
};
var chart_line_gradient = new ApexCharts(
document.querySelector("#chart-line-gradient"),
options_gradient
);
chart_line_gradient.render();
var lastDate = 0;
var data = [];
var TICKINTERVAL = 86400000;
let XAXISRANGE = 777600000;
function getDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
while (i < count) {
var x = baseval;
var y =
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
data.push({
x,
y,
});
lastDate = baseval;
baseval += TICKINTERVAL;
i++;
}
}
getDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 10, {
min: 10,
max: 90,
});
function getNewSeries(baseval, yrange) {
var newDate = baseval + TICKINTERVAL;
lastDate = newDate;
for (var i = 0; i < data.length - 10; i++) {
// IMPORTANT
// we reset the x and y of the data which is out of drawing area
// to prevent memory leaks
data[i].x = newDate - XAXISRANGE - TICKINTERVAL;
data[i].y = 0;
}
data.push({
x: newDate,
y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min,
});
}
function resetData() {
// Alternatively, you can also reset the data at certain intervals to prevent creating a huge series
data = data.slice(data.length - 10, data.length);
}
// Realtime Line Chart -------> LINE CHART
var options_realtime = {
series: [
{
data: data.slice(),
},
],
chart: {
fontFamily: '"Nunito Sans",sans-serif',
id: "realtime",
height: 350,
type: "line",
animations: {
enabled: true,
easing: "linear",
dynamicAnimation: {
speed: 1000,
},
},
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
grid: {
borderColor: "transparent",
},
colors: ["#6993ff"],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
markers: {
size: 0,
},
xaxis: {
type: "datetime",
range: XAXISRANGE,
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
max: 100,
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
legend: {
show: false,
},
};
var chart_line_realtime = new ApexCharts(
document.querySelector("#chart-line-real-time"),
options_realtime
);
chart_line_realtime.render();
window.setInterval(function () {
getNewSeries(lastDate, {
min: 10,
max: 90,
});
chart_line_realtime.updateSeries([
{
data: data,
},
]);
}, 1000);
});