2250 lines
46 KiB
JavaScript
Executable File
2250 lines
46 KiB
JavaScript
Executable File
/*
|
|
Template Name: UBold - Responsive Bootstrap 4 Admin Dashboard
|
|
Author: CoderThemes
|
|
Website: https://coderthemes.com/
|
|
Contact: support@coderthemes.com
|
|
File: Apex Charts
|
|
*/
|
|
|
|
Apex.grid = {
|
|
padding: {
|
|
right: 0,
|
|
left: 0,
|
|
},
|
|
};
|
|
|
|
Apex.dataLabels = {
|
|
enabled: false,
|
|
};
|
|
|
|
var randomizeArray = function (arg) {
|
|
var array = arg.slice();
|
|
var currentIndex = array.length,
|
|
temporaryValue,
|
|
randomIndex;
|
|
|
|
while (0 !== currentIndex) {
|
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
|
currentIndex -= 1;
|
|
|
|
temporaryValue = array[currentIndex];
|
|
array[currentIndex] = array[randomIndex];
|
|
array[randomIndex] = temporaryValue;
|
|
}
|
|
|
|
return array;
|
|
};
|
|
|
|
// data for the sparklines that appear below header area
|
|
var sparklineData = [
|
|
47, 45, 54, 38, 56, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61,
|
|
27, 54, 43, 19, 46,
|
|
];
|
|
|
|
// the default colorPalette for this dashboard
|
|
//var colorPalette = ['#01BFD6', '#5564BE', '#F7A600', '#EDCD24', '#F74F58'];
|
|
var colorPalette = ["#00D8B6", "#008FFB", "#FEB019", "#FF4560", "#775DD0"];
|
|
|
|
var colors = ["#6658dd"];
|
|
var dataColors = $("#spark1").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var spark1 = {
|
|
chart: {
|
|
type: "area",
|
|
height: 160,
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: "straight",
|
|
},
|
|
fill: {
|
|
opacity: 0.2,
|
|
},
|
|
series: [
|
|
{
|
|
name: "UBold Sales ",
|
|
data: randomizeArray(sparklineData),
|
|
},
|
|
],
|
|
yaxis: {
|
|
min: 0,
|
|
},
|
|
colors: colors,
|
|
title: {
|
|
text: "$424,652",
|
|
offsetX: 10,
|
|
style: {
|
|
fontSize: "22px",
|
|
},
|
|
},
|
|
subtitle: {
|
|
text: "Total Sales",
|
|
offsetX: 10,
|
|
offsetY: 35,
|
|
style: {
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
};
|
|
new ApexCharts(document.querySelector("#spark1"), spark1).render();
|
|
|
|
var colors = ["#DCE6EC"];
|
|
var dataColors = $("#spark2").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var spark2 = {
|
|
chart: {
|
|
type: "area",
|
|
height: 160,
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: "straight",
|
|
},
|
|
fill: {
|
|
opacity: 0.2,
|
|
},
|
|
series: [
|
|
{
|
|
name: "UBold Expenses ",
|
|
data: randomizeArray(sparklineData),
|
|
},
|
|
],
|
|
yaxis: {
|
|
min: 0,
|
|
},
|
|
colors: colors,
|
|
title: {
|
|
text: "$235,312",
|
|
offsetX: 10,
|
|
style: {
|
|
fontSize: "22px",
|
|
},
|
|
},
|
|
subtitle: {
|
|
text: "Expenses",
|
|
offsetX: 10,
|
|
offsetY: 35,
|
|
style: {
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
};
|
|
|
|
new ApexCharts(document.querySelector("#spark2"), spark2).render();
|
|
|
|
// Sparkline 2
|
|
var colors = ["#f672a7"];
|
|
var dataColors = $("#spark3").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var spark3 = {
|
|
chart: {
|
|
type: "area",
|
|
height: 160,
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: "straight",
|
|
},
|
|
fill: {
|
|
opacity: 0.2,
|
|
},
|
|
series: [
|
|
{
|
|
name: "Net Profits ",
|
|
data: randomizeArray(sparklineData),
|
|
},
|
|
],
|
|
xaxis: {
|
|
crosshairs: {
|
|
width: 1,
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
},
|
|
colors: colors,
|
|
title: {
|
|
text: "$135,965",
|
|
offsetX: 10,
|
|
style: {
|
|
fontSize: "22px",
|
|
},
|
|
},
|
|
subtitle: {
|
|
text: "Profits",
|
|
offsetX: 10,
|
|
offsetY: 35,
|
|
style: {
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
};
|
|
|
|
new ApexCharts(document.querySelector("#spark3"), spark3).render();
|
|
|
|
//
|
|
// Line with Data Labels
|
|
//
|
|
var colors = ["#6658dd", "#1abc9c"];
|
|
var dataColors = $("#apex-line-1").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "line",
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
colors: colors,
|
|
dataLabels: {
|
|
enabled: true,
|
|
},
|
|
stroke: {
|
|
width: [3, 3],
|
|
curve: "smooth",
|
|
},
|
|
series: [
|
|
{
|
|
name: "High - 2018",
|
|
data: [28, 29, 33, 36, 32, 32, 33],
|
|
},
|
|
{
|
|
name: "Low - 2018",
|
|
data: [12, 11, 14, 18, 17, 13, 13],
|
|
},
|
|
],
|
|
title: {
|
|
text: "Average High & Low Temperature",
|
|
align: "left",
|
|
style: {
|
|
fontSize: "14px",
|
|
color: "#666",
|
|
},
|
|
},
|
|
grid: {
|
|
row: {
|
|
colors: ["transparent", "transparent"], // takes an array which will be repeated on columns
|
|
opacity: 0.2,
|
|
},
|
|
borderColor: "#f1f3fa",
|
|
},
|
|
markers: {
|
|
style: "inverted",
|
|
size: 6,
|
|
},
|
|
xaxis: {
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
|
title: {
|
|
text: "Month",
|
|
},
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: "Temperature",
|
|
},
|
|
min: 5,
|
|
max: 40,
|
|
},
|
|
legend: {
|
|
position: "top",
|
|
horizontalAlign: "right",
|
|
floating: true,
|
|
offsetY: -25,
|
|
offsetX: -5,
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 600,
|
|
options: {
|
|
chart: {
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-line-1"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Gradient Line Chart
|
|
//
|
|
var colors = ["#f672a7"];
|
|
var dataColors = $("#apex-line-2").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "line",
|
|
shadow: {
|
|
enabled: false,
|
|
color: "#bbb",
|
|
top: 3,
|
|
left: 2,
|
|
blur: 3,
|
|
opacity: 1,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 5,
|
|
curve: "smooth",
|
|
},
|
|
series: [
|
|
{
|
|
name: "Likes",
|
|
data: [
|
|
4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5,
|
|
],
|
|
},
|
|
],
|
|
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",
|
|
],
|
|
},
|
|
title: {
|
|
text: "Social Media",
|
|
align: "left",
|
|
style: {
|
|
fontSize: "14px",
|
|
color: "#666",
|
|
},
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shade: "dark",
|
|
gradientToColors: colors,
|
|
shadeIntensity: 1,
|
|
type: "horizontal",
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 100, 100, 100],
|
|
},
|
|
},
|
|
markers: {
|
|
size: 4,
|
|
opacity: 0.9,
|
|
colors: ["#56c2d6"],
|
|
strokeColor: "#fff",
|
|
strokeWidth: 2,
|
|
style: "inverted", // full, hollow, inverted
|
|
hover: {
|
|
size: 7,
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: -10,
|
|
max: 40,
|
|
title: {
|
|
text: "Engagement",
|
|
},
|
|
},
|
|
grid: {
|
|
row: {
|
|
colors: ["transparent", "transparent"], // takes an array which will be repeated on columns
|
|
opacity: 0.2,
|
|
},
|
|
borderColor: "#185a9d",
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 600,
|
|
options: {
|
|
chart: {
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-line-2"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Area Chart
|
|
//
|
|
var colors = ["#6658dd", "#f7b84b", "#CED4DC"];
|
|
var dataColors = $("#apex-area").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "area",
|
|
stacked: true,
|
|
events: {
|
|
selection: function (chart, e) {
|
|
console.log(new Date(e.xaxis.min));
|
|
},
|
|
},
|
|
},
|
|
colors: colors,
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: [2],
|
|
curve: "smooth",
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: "South",
|
|
data: generateDayWiseTimeSeries(
|
|
new Date("11 Feb 2017 GMT").getTime(),
|
|
20,
|
|
{
|
|
min: 10,
|
|
max: 60,
|
|
}
|
|
),
|
|
},
|
|
{
|
|
name: "North",
|
|
data: generateDayWiseTimeSeries(
|
|
new Date("11 Feb 2017 GMT").getTime(),
|
|
20,
|
|
{
|
|
min: 10,
|
|
max: 20,
|
|
}
|
|
),
|
|
},
|
|
|
|
{
|
|
name: "Central",
|
|
data: generateDayWiseTimeSeries(
|
|
new Date("11 Feb 2017 GMT").getTime(),
|
|
20,
|
|
{
|
|
min: 10,
|
|
max: 15,
|
|
}
|
|
),
|
|
},
|
|
],
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
opacityFrom: 0.6,
|
|
opacityTo: 0.8,
|
|
},
|
|
},
|
|
legend: {
|
|
position: "top",
|
|
horizontalAlign: "left",
|
|
},
|
|
xaxis: {
|
|
type: "datetime",
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-area"), options);
|
|
|
|
chart.render();
|
|
|
|
/*
|
|
// this function will generate output in this format
|
|
// data = [
|
|
[timestamp, 23],
|
|
[timestamp, 33],
|
|
[timestamp, 12]
|
|
...
|
|
]
|
|
*/
|
|
function generateDayWiseTimeSeries(baseval, count, yrange) {
|
|
var i = 0;
|
|
var series = [];
|
|
while (i < count) {
|
|
var x = baseval;
|
|
var y =
|
|
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
|
|
yrange.min;
|
|
|
|
series.push([x, y]);
|
|
baseval += 86400000;
|
|
i++;
|
|
}
|
|
return series;
|
|
}
|
|
|
|
//
|
|
// Column Chart - 1
|
|
//
|
|
var colors = ["#6658dd", "#1abc9c", "#CED4DC"];
|
|
var dataColors = $("#apex-column-1").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "bar",
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
endingShape: "rounded",
|
|
columnWidth: "55%",
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ["transparent"],
|
|
},
|
|
colors: colors,
|
|
series: [
|
|
{
|
|
name: "Net Profit",
|
|
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
|
|
},
|
|
{
|
|
name: "Revenue",
|
|
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
|
|
},
|
|
{
|
|
name: "Free Cash Flow",
|
|
data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
|
|
},
|
|
],
|
|
xaxis: {
|
|
categories: [
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
],
|
|
},
|
|
legend: {
|
|
offsetY: 5,
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: "$ (thousands)",
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
grid: {
|
|
row: {
|
|
colors: ["transparent", "transparent"], // takes an array which will be repeated on columns
|
|
opacity: 0.2,
|
|
},
|
|
borderColor: "#f1f3fa",
|
|
padding: {
|
|
bottom: 10,
|
|
},
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$ " + val + " thousands";
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-column-1"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Column Chart - 2
|
|
//
|
|
var colors = ["#6658dd"];
|
|
var dataColors = $("#apex-column-2").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "bar",
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
dataLabels: {
|
|
position: "top", // top, center, bottom
|
|
},
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val) {
|
|
return val + "%";
|
|
},
|
|
offsetY: -30,
|
|
style: {
|
|
fontSize: "12px",
|
|
colors: ["#304758"],
|
|
},
|
|
},
|
|
colors: colors,
|
|
series: [
|
|
{
|
|
name: "Inflation",
|
|
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
|
|
},
|
|
],
|
|
xaxis: {
|
|
categories: [
|
|
"Jan",
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
"Nov",
|
|
"Dec",
|
|
],
|
|
position: "top",
|
|
labels: {
|
|
offsetY: -18,
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
crosshairs: {
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
colorFrom: "#D8E3F0",
|
|
colorTo: "#BED1E6",
|
|
stops: [0, 100],
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.5,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
offsetY: -35,
|
|
},
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
enabled: false,
|
|
shade: "light",
|
|
type: "horizontal",
|
|
shadeIntensity: 0.25,
|
|
gradientToColors: undefined,
|
|
inverseColors: true,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [50, 0, 100, 100],
|
|
},
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
formatter: function (val) {
|
|
return val + "%";
|
|
},
|
|
},
|
|
},
|
|
title: {
|
|
text: "Monthly Inflation in Argentina, 2002",
|
|
floating: true,
|
|
offsetY: 350,
|
|
align: "center",
|
|
style: {
|
|
color: "#444",
|
|
},
|
|
},
|
|
grid: {
|
|
row: {
|
|
colors: ["transparent", "transparent"], // takes an array which will be repeated on columns
|
|
opacity: 0.2,
|
|
},
|
|
borderColor: "#f1f3fa",
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-column-2"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Mixed Chart - 1
|
|
//
|
|
var colors = ["#CED4DC", "#6658dd"];
|
|
var dataColors = $("#apex-mixed-1").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "line",
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
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],
|
|
},
|
|
],
|
|
colors: colors,
|
|
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;
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
offsetY: 7,
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-mixed-1"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Bar Chart - 1
|
|
//
|
|
var colors = ["#1abc9c"];
|
|
var dataColors = $("#apex-bar-1").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "bar",
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
series: [
|
|
{
|
|
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
|
|
},
|
|
],
|
|
colors: colors,
|
|
xaxis: {
|
|
categories: [
|
|
"South Korea",
|
|
"Canada",
|
|
"United Kingdom",
|
|
"Netherlands",
|
|
"Italy",
|
|
"France",
|
|
"Japan",
|
|
"United States",
|
|
"China",
|
|
"Germany",
|
|
],
|
|
},
|
|
states: {
|
|
hover: {
|
|
filter: "none",
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-bar-1"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Bar Chart - 2
|
|
//
|
|
var colors = ["#6658dd", "#1abc9c"];
|
|
var dataColors = $("#apex-bar-2").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "bar",
|
|
stacked: true,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
colors: colors,
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
barHeight: "80%",
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 1,
|
|
colors: ["#fff"],
|
|
},
|
|
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,
|
|
],
|
|
},
|
|
],
|
|
grid: {
|
|
xaxis: {
|
|
showLines: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: -5,
|
|
max: 5,
|
|
title: {
|
|
// text: 'Age',
|
|
},
|
|
},
|
|
tooltip: {
|
|
shared: false,
|
|
x: {
|
|
formatter: function (val) {
|
|
return val;
|
|
},
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return Math.abs(val) + "%";
|
|
},
|
|
},
|
|
},
|
|
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)) + "%";
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
offsetY: 7,
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-bar-2"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Mixed Chart - 2
|
|
//
|
|
var colors = ["#6658dd", "#1abc9c", "#f672a7"];
|
|
var dataColors = $("#apex-mixed-2").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "line",
|
|
padding: {
|
|
right: 0,
|
|
left: 0,
|
|
},
|
|
stacked: false,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: [0, 2, 4],
|
|
curve: "smooth",
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: "50%",
|
|
},
|
|
},
|
|
colors: colors,
|
|
series: [
|
|
{
|
|
name: "Team A",
|
|
type: "column",
|
|
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
|
|
},
|
|
{
|
|
name: "Team B",
|
|
type: "area",
|
|
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
|
|
},
|
|
{
|
|
name: "Team C",
|
|
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,
|
|
},
|
|
legend: {
|
|
offsetY: 7,
|
|
},
|
|
xaxis: {
|
|
type: "datetime",
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: "Points",
|
|
},
|
|
},
|
|
tooltip: {
|
|
shared: true,
|
|
intersect: false,
|
|
y: {
|
|
formatter: function (y) {
|
|
if (typeof y !== "undefined") {
|
|
return y.toFixed(0) + " points";
|
|
}
|
|
return y;
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
padding: {
|
|
bottom: 10,
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-mixed-2"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Mixed Chart - 3
|
|
//
|
|
var colors = ["#6658dd,#ebf2f6,#f672a7"];
|
|
var dataColors = $("#apex-mixed-3").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "line",
|
|
stacked: false,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: [0, 0, 3],
|
|
},
|
|
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],
|
|
},
|
|
],
|
|
colors: colors,
|
|
xaxis: {
|
|
categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
|
|
},
|
|
yaxis: [
|
|
{
|
|
axisTicks: {
|
|
show: true,
|
|
},
|
|
axisBorder: {
|
|
show: true,
|
|
color: "#675db7",
|
|
},
|
|
labels: {
|
|
style: {
|
|
color: "#675db7",
|
|
},
|
|
},
|
|
title: {
|
|
text: "Income (thousand crores)",
|
|
},
|
|
},
|
|
|
|
{
|
|
axisTicks: {
|
|
show: true,
|
|
},
|
|
axisBorder: {
|
|
show: true,
|
|
color: "#23b397",
|
|
},
|
|
labels: {
|
|
style: {
|
|
color: "#23b397",
|
|
},
|
|
offsetX: 10,
|
|
},
|
|
title: {
|
|
text: "Operating Cashflow (thousand crores)",
|
|
},
|
|
},
|
|
{
|
|
opposite: true,
|
|
axisTicks: {
|
|
show: true,
|
|
},
|
|
axisBorder: {
|
|
show: true,
|
|
color: "#e36498",
|
|
},
|
|
labels: {
|
|
style: {
|
|
color: "#e36498",
|
|
},
|
|
},
|
|
title: {
|
|
text: "Revenue (thousand crores)",
|
|
},
|
|
},
|
|
],
|
|
tooltip: {
|
|
followCursor: true,
|
|
y: {
|
|
formatter: function (y) {
|
|
if (typeof y !== "undefined") {
|
|
return y + " thousand crores";
|
|
}
|
|
return y;
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
padding: {
|
|
bottom: 10,
|
|
},
|
|
},
|
|
legend: {
|
|
offsetY: 7,
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 600,
|
|
options: {
|
|
yaxis: {
|
|
show: false,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-mixed-3"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Bubble Chart - 1
|
|
//
|
|
|
|
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;
|
|
}
|
|
|
|
var colors = ["#6658dd,#1abc9c,#f672a7"];
|
|
var dataColors = $("#apex-bubble-1").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "bubble",
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
series: [
|
|
{
|
|
name: "Bubble 1",
|
|
data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
|
|
min: 10,
|
|
max: 60,
|
|
}),
|
|
},
|
|
{
|
|
name: "Bubble 2",
|
|
data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
|
|
min: 10,
|
|
max: 60,
|
|
}),
|
|
},
|
|
{
|
|
name: "Bubble 3",
|
|
data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
|
|
min: 10,
|
|
max: 60,
|
|
}),
|
|
},
|
|
],
|
|
fill: {
|
|
opacity: 0.8,
|
|
gradient: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
colors: colors,
|
|
xaxis: {
|
|
tickAmount: 12,
|
|
type: "category",
|
|
},
|
|
yaxis: {
|
|
max: 70,
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
padding: {
|
|
bottom: 10,
|
|
},
|
|
},
|
|
legend: {
|
|
offsetY: 7,
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-bubble-1"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Bubble Chart - 2
|
|
//
|
|
|
|
/*
|
|
// this function will generate output in this format
|
|
// data = [
|
|
[timestamp, 23],
|
|
[timestamp, 33],
|
|
[timestamp, 12]
|
|
...
|
|
]
|
|
*/
|
|
function generateData1(baseval1, 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([baseval1, y, z]);
|
|
baseval1 += 86400000;
|
|
i++;
|
|
}
|
|
return series;
|
|
}
|
|
|
|
var colors = ["#6658dd,#1abc9c,#f672a7,#6c757d"];
|
|
var dataColors = $("#apex-bubble-2").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options2 = {
|
|
chart: {
|
|
height: 380,
|
|
type: "bubble",
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
series: [
|
|
{
|
|
name: "Product 1",
|
|
data: generateData1(new Date("11 Feb 2017 GMT").getTime(), 20, {
|
|
min: 10,
|
|
max: 60,
|
|
}),
|
|
},
|
|
{
|
|
name: "Product 2",
|
|
data: generateData1(new Date("11 Feb 2017 GMT").getTime(), 20, {
|
|
min: 10,
|
|
max: 60,
|
|
}),
|
|
},
|
|
{
|
|
name: "Product 3",
|
|
data: generateData1(new Date("11 Feb 2017 GMT").getTime(), 20, {
|
|
min: 10,
|
|
max: 60,
|
|
}),
|
|
},
|
|
{
|
|
name: "Product 4",
|
|
data: generateData1(new Date("11 Feb 2017 GMT").getTime(), 20, {
|
|
min: 10,
|
|
max: 60,
|
|
}),
|
|
},
|
|
],
|
|
fill: {
|
|
type: "gradient",
|
|
},
|
|
colors: colors,
|
|
xaxis: {
|
|
tickAmount: 12,
|
|
type: "datetime",
|
|
|
|
labels: {
|
|
rotate: 0,
|
|
},
|
|
},
|
|
yaxis: {
|
|
max: 70,
|
|
},
|
|
legend: {
|
|
offsetY: 7,
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
padding: {
|
|
bottom: 10,
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-bubble-2"), options2);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Scatter Chart - 1
|
|
//
|
|
|
|
var colors = ["#1abc9c", "#f672a7", "#6c757d"];
|
|
var dataColors = $("#apex-scatter-1").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "scatter",
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: "Sample A",
|
|
data: [
|
|
[16.4, 5.4],
|
|
[21.7, 2],
|
|
[25.4, 3],
|
|
[19, 2],
|
|
[10.9, 1],
|
|
[13.6, 3.2],
|
|
[10.9, 7.4],
|
|
[10.9, 0],
|
|
[10.9, 8.2],
|
|
[16.4, 0],
|
|
[16.4, 1.8],
|
|
[13.6, 0.3],
|
|
[13.6, 0],
|
|
[29.9, 0],
|
|
[27.1, 2.3],
|
|
[16.4, 0],
|
|
[13.6, 3.7],
|
|
[10.9, 5.2],
|
|
[16.4, 6.5],
|
|
[10.9, 0],
|
|
[24.5, 7.1],
|
|
[10.9, 0],
|
|
[8.1, 4.7],
|
|
[19, 0],
|
|
[21.7, 1.8],
|
|
[27.1, 0],
|
|
[24.5, 0],
|
|
[27.1, 0],
|
|
[29.9, 1.5],
|
|
[27.1, 0.8],
|
|
[22.1, 2],
|
|
],
|
|
},
|
|
{
|
|
name: "Sample B",
|
|
data: [
|
|
[6.4, 13.4],
|
|
[1.7, 11],
|
|
[5.4, 8],
|
|
[9, 17],
|
|
[1.9, 4],
|
|
[3.6, 12.2],
|
|
[1.9, 14.4],
|
|
[1.9, 9],
|
|
[1.9, 13.2],
|
|
[1.4, 7],
|
|
[6.4, 8.8],
|
|
[3.6, 4.3],
|
|
[1.6, 10],
|
|
[9.9, 2],
|
|
[7.1, 15],
|
|
[1.4, 0],
|
|
[3.6, 13.7],
|
|
[1.9, 15.2],
|
|
[6.4, 16.5],
|
|
[0.9, 10],
|
|
[4.5, 17.1],
|
|
[10.9, 10],
|
|
[0.1, 14.7],
|
|
[9, 10],
|
|
[12.7, 11.8],
|
|
[2.1, 10],
|
|
[2.5, 10],
|
|
[27.1, 10],
|
|
[2.9, 11.5],
|
|
[7.1, 10.8],
|
|
[2.1, 12],
|
|
],
|
|
},
|
|
{
|
|
name: "Sample C",
|
|
data: [
|
|
[21.7, 3],
|
|
[23.6, 3.5],
|
|
[24.6, 3],
|
|
[29.9, 3],
|
|
[21.7, 20],
|
|
[23, 2],
|
|
[10.9, 3],
|
|
[28, 4],
|
|
[27.1, 0.3],
|
|
[16.4, 4],
|
|
[13.6, 0],
|
|
[19, 5],
|
|
[22.4, 3],
|
|
[24.5, 3],
|
|
[32.6, 3],
|
|
[27.1, 4],
|
|
[29.6, 6],
|
|
[31.6, 8],
|
|
[21.6, 5],
|
|
[20.9, 4],
|
|
[22.4, 0],
|
|
[32.6, 10.3],
|
|
[29.7, 20.8],
|
|
[24.5, 0.8],
|
|
[21.4, 0],
|
|
[21.7, 6.9],
|
|
[28.6, 7.7],
|
|
[15.4, 0],
|
|
[18.1, 0],
|
|
[33.4, 0],
|
|
[16.4, 0],
|
|
],
|
|
},
|
|
],
|
|
xaxis: {
|
|
tickAmount: 10,
|
|
},
|
|
yaxis: {
|
|
tickAmount: 7,
|
|
},
|
|
colors: colors,
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
padding: {
|
|
bottom: 10,
|
|
},
|
|
},
|
|
legend: {
|
|
offsetY: 7,
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 600,
|
|
options: {
|
|
chart: {
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-scatter-1"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Scatter Chart - 2
|
|
//
|
|
|
|
var colors = ["#1abc9c", "#f672a7", "#6c757d", "#6658dd", "#6559cc"];
|
|
var dataColors = $("#apex-scatter-2").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
|
|
var options = {
|
|
chart: {
|
|
height: 380,
|
|
type: "scatter",
|
|
zoom: {
|
|
type: "xy",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "Team 1",
|
|
data: generateDayWiseTimeSeries(
|
|
new Date("11 Feb 2017 GMT").getTime(),
|
|
20,
|
|
{
|
|
min: 10,
|
|
max: 60,
|
|
}
|
|
),
|
|
},
|
|
{
|
|
name: "Team 2",
|
|
data: generateDayWiseTimeSeries(
|
|
new Date("11 Feb 2017 GMT").getTime(),
|
|
20,
|
|
{
|
|
min: 10,
|
|
max: 60,
|
|
}
|
|
),
|
|
},
|
|
{
|
|
name: "Team 3",
|
|
data: generateDayWiseTimeSeries(
|
|
new Date("11 Feb 2017 GMT").getTime(),
|
|
30,
|
|
{
|
|
min: 10,
|
|
max: 60,
|
|
}
|
|
),
|
|
},
|
|
{
|
|
name: "Team 4",
|
|
data: generateDayWiseTimeSeries(
|
|
new Date("11 Feb 2017 GMT").getTime(),
|
|
10,
|
|
{
|
|
min: 10,
|
|
max: 60,
|
|
}
|
|
),
|
|
},
|
|
{
|
|
name: "Team 5",
|
|
data: generateDayWiseTimeSeries(
|
|
new Date("11 Feb 2017 GMT").getTime(),
|
|
30,
|
|
{
|
|
min: 10,
|
|
max: 60,
|
|
}
|
|
),
|
|
},
|
|
],
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
colors: colors,
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
xaxis: {
|
|
showLines: true,
|
|
},
|
|
yaxis: {
|
|
showLines: true,
|
|
},
|
|
padding: {
|
|
bottom: 10,
|
|
},
|
|
},
|
|
legend: {
|
|
offsetY: 7,
|
|
},
|
|
xaxis: {
|
|
type: "datetime",
|
|
},
|
|
yaxis: {
|
|
max: 70,
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 600,
|
|
options: {
|
|
chart: {
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-scatter-2"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Candlestick Chart - 1
|
|
//
|
|
var colors = ["#6658dd", "#1abc9c"];
|
|
var dataColors = $("#apex-candlestick-1").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 400,
|
|
type: "candlestick",
|
|
},
|
|
plotOptions: {
|
|
candlestick: {
|
|
colors: {
|
|
upward: colors[0],
|
|
downward: colors[1],
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: seriesData,
|
|
},
|
|
],
|
|
|
|
stroke: {
|
|
show: true,
|
|
colors: "#f1f3fa",
|
|
width: [1, 4],
|
|
},
|
|
xaxis: {
|
|
type: "datetime",
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#apex-candlestick-1"),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Candlestick Chart - 2
|
|
//
|
|
var colors = ["#6658dd", "#f7b84b"];
|
|
var dataColors = $("#apex-candlestick-2").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var optionsCandlestick = {
|
|
chart: {
|
|
height: 240,
|
|
type: "candlestick",
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: seriesData,
|
|
},
|
|
],
|
|
plotOptions: {
|
|
candlestick: {
|
|
colors: {
|
|
upward: colors[0],
|
|
downward: colors[1],
|
|
},
|
|
},
|
|
},
|
|
xaxis: {
|
|
type: "datetime",
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
},
|
|
};
|
|
|
|
var chartCandlestick = new ApexCharts(
|
|
document.querySelector("#apex-candlestick-2"),
|
|
optionsCandlestick
|
|
);
|
|
|
|
chartCandlestick.render();
|
|
|
|
//
|
|
// Candlestick Chart - 3
|
|
//
|
|
var colors = ["#f45454", "#37cde6"];
|
|
var dataColors = $("#apex-candlestick-3").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 160,
|
|
type: "bar",
|
|
toolbar: {
|
|
show: false,
|
|
autoSelected: "selection",
|
|
},
|
|
selection: {
|
|
xaxis: {
|
|
min: new Date("20 Jan 2017").getTime(),
|
|
max: new Date("10 Dec 2017").getTime(),
|
|
},
|
|
fill: {
|
|
color: "#6c757d",
|
|
opacity: 0.4,
|
|
},
|
|
stroke: {
|
|
color: "#6c757d",
|
|
},
|
|
},
|
|
events: {
|
|
selection: function (chart, e) {
|
|
chartCandlestick.updateOptions(
|
|
{
|
|
xaxis: {
|
|
min: e.xaxis.min,
|
|
max: e.xaxis.max,
|
|
},
|
|
},
|
|
false,
|
|
false
|
|
);
|
|
},
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: "80%",
|
|
colors: {
|
|
ranges: [
|
|
{
|
|
from: -1000,
|
|
to: 0,
|
|
color: colors[0],
|
|
},
|
|
{
|
|
from: 1,
|
|
to: 10000,
|
|
color: colors[1],
|
|
},
|
|
],
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "volume",
|
|
data: seriesDataLinear,
|
|
},
|
|
],
|
|
xaxis: {
|
|
type: "datetime",
|
|
axisBorder: {
|
|
offsetX: 13,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: "#f1f3fa",
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#apex-candlestick-3"),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Pie Chart -1
|
|
//
|
|
var colors = ["#6658dd", "#4fc6e1", "#4a81d4", "#00b19d", "#f1556c"];
|
|
var dataColors = $("#apex-pie-1").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 320,
|
|
type: "pie",
|
|
},
|
|
series: [44, 55, 41, 17, 15],
|
|
labels: ["Series 1", "Series 2", "Series 3", "Series 4", "Series 5"],
|
|
colors: colors,
|
|
legend: {
|
|
show: true,
|
|
position: "bottom",
|
|
horizontalAlign: "center",
|
|
verticalAlign: "middle",
|
|
floating: false,
|
|
fontSize: "14px",
|
|
offsetX: 0,
|
|
offsetY: 7,
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 600,
|
|
options: {
|
|
chart: {
|
|
height: 240,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-pie-1"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Pie Chart - 2
|
|
//
|
|
var colors = ["#6658dd", "#4fc6e1", "#4a81d4", "#00b19d", "#f1556c"];
|
|
var dataColors = $("#apex-pie-2").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 320,
|
|
type: "donut",
|
|
},
|
|
series: [44, 55, 41, 17, 15],
|
|
legend: {
|
|
show: true,
|
|
position: "bottom",
|
|
horizontalAlign: "center",
|
|
verticalAlign: "middle",
|
|
floating: false,
|
|
fontSize: "14px",
|
|
offsetX: 0,
|
|
offsetY: 7,
|
|
},
|
|
labels: ["Series 1", "Series 2", "Series 3", "Series 4", "Series 5"],
|
|
colors: colors,
|
|
responsive: [
|
|
{
|
|
breakpoint: 600,
|
|
options: {
|
|
chart: {
|
|
height: 240,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
fill: {
|
|
type: "gradient",
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-pie-2"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Pie Chart - 3
|
|
//
|
|
var colors = ["#6658dd", "#4fc6e1", "#4a81d4", "#00b19d", "#f1556c"];
|
|
var dataColors = $("#apex-pie-3").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 320,
|
|
type: "donut",
|
|
dropShadow: {
|
|
enabled: true,
|
|
color: "#111",
|
|
top: -1,
|
|
left: 3,
|
|
blur: 3,
|
|
opacity: 0.2,
|
|
},
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
},
|
|
series: [44, 55, 41, 17, 15],
|
|
colors: colors,
|
|
labels: ["Comedy", "Action", "SciFi", "Drama", "Horror"],
|
|
dataLabels: {
|
|
dropShadow: {
|
|
blur: 3,
|
|
opacity: 0.8,
|
|
},
|
|
},
|
|
fill: {
|
|
type: "pattern",
|
|
opacity: 1,
|
|
pattern: {
|
|
enabled: true,
|
|
style: [
|
|
"verticalLines",
|
|
"squares",
|
|
"horizontalLines",
|
|
"circles",
|
|
"slantedLines",
|
|
],
|
|
},
|
|
},
|
|
states: {
|
|
hover: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: "bottom",
|
|
horizontalAlign: "center",
|
|
verticalAlign: "middle",
|
|
floating: false,
|
|
fontSize: "14px",
|
|
offsetX: 0,
|
|
offsetY: 7,
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 600,
|
|
options: {
|
|
chart: {
|
|
height: 240,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#apex-pie-3"), options);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Radialbar Chart -1
|
|
//
|
|
var colors = ["#6c757d"];
|
|
var dataColors = $("#apex-radialbar-1").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 350,
|
|
type: "radialBar",
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
size: "70%",
|
|
},
|
|
},
|
|
},
|
|
colors: ["#6c757d"],
|
|
series: [70],
|
|
labels: ["CRICKET"],
|
|
};
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#apex-radialbar-1"),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Radialbar Chart - 2
|
|
//
|
|
var colors = ["#6658dd", "#e36498", "#23b397", "#f7b84b"];
|
|
var dataColors = $("#apex-radialbar-2").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 350,
|
|
type: "radialBar",
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
dataLabels: {
|
|
name: {
|
|
fontSize: "22px",
|
|
},
|
|
value: {
|
|
fontSize: "16px",
|
|
},
|
|
total: {
|
|
show: true,
|
|
label: "Total",
|
|
formatter: function (w) {
|
|
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
|
|
return 249;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
colors: colors,
|
|
series: [44, 55, 67, 83],
|
|
labels: ["Apples", "Oranges", "Bananas", "Berries"],
|
|
};
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#apex-radialbar-2"),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
|
|
//
|
|
// Radialbar Chart - 3
|
|
//
|
|
var colors = ["#f1556c"];
|
|
var dataColors = $("#apex-radialbar-3").data("colors");
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 375,
|
|
type: "radialBar",
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: -135,
|
|
endAngle: 135,
|
|
dataLabels: {
|
|
name: {
|
|
fontSize: "16px",
|
|
color: undefined,
|
|
offsetY: 120,
|
|
},
|
|
value: {
|
|
offsetY: 76,
|
|
fontSize: "22px",
|
|
color: undefined,
|
|
formatter: function (val) {
|
|
return val + "%";
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
gradient: {
|
|
enabled: true,
|
|
shade: "dark",
|
|
shadeIntensity: 0.15,
|
|
inverseColors: false,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 50, 65, 91],
|
|
},
|
|
},
|
|
stroke: {
|
|
dashArray: 4,
|
|
},
|
|
colors: colors,
|
|
series: [67],
|
|
labels: ["Median Ratio"],
|
|
responsive: [
|
|
{
|
|
breakpoint: 380,
|
|
options: {
|
|
chart: {
|
|
height: 280,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector("#apex-radialbar-3"),
|
|
options
|
|
);
|
|
|
|
chart.render();
|