Skip to content
GitLab
Commit 27ca663e authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Added Viewer

parent e21f1f45
Hide whitespace changes
Inline Side-by-side
Showing
with 2714 additions and 0 deletions
+2714 -0
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/area/area-github-style.html 0 → 100644
+ 200
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Syncing charts</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#wrapper {
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.1);
max-width: 650px;
margin: 35px auto;
}
.github-style {
clear: both;
font-weight: 400;
height: 40px;
margin-left: 6px;
}
.github-style a {
color: #0366d6;
font-size: 18px;
}
.github-style .cmeta {
display: block;
color: #777;
font-weight: 400;
}
.github-style .userimg {
float: left;
display: block;
border-radius: 3px;
}
.github-style .userdetails {
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="chart-area">
</div>
<h5 class="github-style">
<img class="userimg" src="https://picsum.photos/200/200/?image=1031" data-hovercard-user-id="634573" class="avatar float-left mr-2"
alt="" width="38" height="38" />
<div class="userdetails">
<a class="username">coder</a>
<span class="cmeta">
<span class="commits"></span> commits
</span>
</div>
</h5>
<div id="chart-area2">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="../../assets/github-data.js"></script>
<script>
var optionsarea2 = {
chart: {
id: 'chartyear',
type: 'area',
height: 160,
background: '#F6F8FA',
toolbar: {
show: false,
autoSelected: 'pan'
},
events: {
mounted: function (chart) {
var commitsEl = document.querySelector('p span.commits');
var commits = chart.getSeriesTotalXRange(chart.w.globals.minX, chart.w.globals.maxX)
commitsEl.innerHTML = commits
},
updated: function (chart) {
var commitsEl = document.querySelector('.cmeta span.commits');
var commits = chart.getSeriesTotalXRange(chart.w.globals.minX, chart.w.globals.maxX)
commitsEl.innerHTML = commits
}
}
},
colors: ['#FF7F00'],
stroke: {
width: 0,
curve: 'smooth'
},
dataLabels: {
enabled: false
},
fill: {
opacity: 1,
type: 'solid'
},
series: [{
name: 'commits',
data: githubdata.series
}],
yaxis: {
tickAmount: 3,
labels: {
show: false
}
},
xaxis: {
type: 'datetime',
}
}
var chartarea2 = new ApexCharts(
document.querySelector("#chart-area2"),
optionsarea2
);
chartarea2.render();
var options = {
chart: {
height: 200,
type: 'area',
background: '#F6F8FA',
toolbar: {
autoSelected: 'selection',
},
brush: {
enabled: true,
target: 'chartyear'
},
selection: {
enabled: true,
xaxis: {
min: new Date('05 Jan 2014').getTime(),
max: new Date('04 Jan 2015').getTime()
}
},
},
colors: ['#7BD39A'],
dataLabels: {
enabled: false
},
stroke: {
width: 0,
curve: 'smooth'
},
series: [{
name: 'commits',
data: githubdata.series
}],
fill: {
opacity: 1,
type: 'solid'
},
legend: {
position: 'top',
horizontalAlign: 'left'
},
xaxis: {
type: 'datetime'
},
}
var chart = new ApexCharts(
document.querySelector("#chart-area"),
options
);
chart.render();
</script>
</body>
</html>
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/area/area-range.html 0 → 100644
+ 141
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Range Area Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'area',
},
dataLabels: {
enabled: false
},
plotOptions: {
area: {
isRange: true
}
},
stroke: {
curve: 'straight'
},
series: [{
name: 'range',
data: [
{
x: new Date(1538780400000),
y: [6632.01, 6643.59]
},
{
x: new Date(1538782200000),
y: [6630.71, 6648.95]
},
{
x: new Date(1538784000000),
y: [6635.65, 6651]
},
{
x: new Date(1538785800000),
y: [6638.24, 6640]
},
{
x: new Date(1538787600000),
y: [6624.53, 6636.03]
},
{
x: new Date(1538789400000),
y: [6624.61, 6632.2]
},
{
x: new Date(1538791200000),
y: [6617, 6627.62]
},
{
x: new Date(1538793000000),
y: [6605, 6608.03]
},
{
x: new Date(1538794800000),
y: [6604.5, 6614.4]
},
{
x: new Date(1538796600000),
y: [6608.02, 6610.68]
},
{
x: new Date(1538798400000),
y: [6608.91, 6618.99]
},
{
x: new Date(1538800200000),
y: [6612, 6615.13]
},
{
x: new Date(1538802000000),
y: [6612, 6624.12]
},
{
x: new Date(1538803800000),
y: [6603.91, 6623.91]
},
{
x: new Date(1538805600000),
y: [6611.69, 6618.74]
},
{
x: new Date(1538807400000),
y: [6611, 6622.78]
},
{
x: new Date(1538809200000),
y: [6614.9, 6626.2]
}
]
}],
title: {
text: 'Range Area Chart',
align: 'left',
style: {
fontSize: '16px'
}
},
xaxis: {
type: 'datetime',
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/area/area-spline.html 0 → 100644
+ 68
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Area Spline</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'area',
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
series: [{
name: 'series1',
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: 'series2',
data: [11, 32, 45, 32, 34, 52, 41]
}],
xaxis: {
type: 'datetime',
categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/area/area-with-missing-data.html 0 → 100644
+ 188
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Area with missing data</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'area',
animations: {
enabled: false
},
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: 'Network',
data: [{
x: 'Dec 23 2017',
y: null
},
{
x: 'Dec 24 2017',
y: 44
},
{
x: 'Dec 25 2017',
y: 31
},
{
x: 'Dec 26 2017',
y: 38
},
{
x: 'Dec 27 2017',
y: null
},
{
x: 'Dec 28 2017',
y: 32
},
{
x: 'Dec 29 2017',
y: 55
},
{
x: 'Dec 30 2017',
y: 51
},
{
x: 'Dec 31 2017',
y: 67
},
{
x: 'Jan 01 2018',
y: 22
},
{
x: 'Jan 02 2018',
y: 34
},
{
x: 'Jan 03 2018',
y: null
},
{
x: 'Jan 04 2018',
y: null
},
{
x: 'Jan 05 2018',
y: 11
},
{
x: 'Jan 06 2018',
y: 4
},
{
x: 'Jan 07 2018',
y: 15,
},
{
x: 'Jan 08 2018',
y: null
},
{
x: 'Jan 09 2018',
y: 9
},
{
x: 'Jan 10 2018',
y: 34
},
{
x: 'Jan 11 2018',
y: null
},
{
x: 'Jan 12 2018',
y: null
},
{
x: 'Jan 13 2018',
y: 13
},
{
x: 'Jan 14 2018',
y: null
}
],
}],
fill: {
opacity: 0.8,
type: 'pattern',
pattern: {
enabled: true,
style: ['verticalLines', 'horizontalLines'],
width: 5,
depth: 6
},
},
markers: {
size: 5,
hover: {
size: 9
}
},
title: {
text: 'Network Monitoring',
},
tooltip: {
intersect: true,
shared: false
},
theme: {
palette: 'palette1'
},
xaxis: {
type: 'datetime',
},
yaxis: {
title: {
text: 'Bytes Received'
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/area/area-with-negative.html 0 → 100644
+ 281
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Area with Negative - Stacked</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'area',
// zoom: {
// enabled: false
// }
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: 'north',
data: [{
x: 1996,
y: 322
},
{
x: 1997,
y: 324
},
{
x: 1998,
y: 329
},
{
x: 1999,
y: 342
},
{
x: 2000,
y: 348
},
{
x: 2001,
y: 334
},
{
x: 2002,
y: 325
},
{
x: 2003,
y: 316
},
{
x: 2004,
y: 318
},
{
x: 2005,
y: 330
},
{
x: 2006,
y: 355
},
{
x: 2007,
y: 366
},
{
x: 2008,
y: 337
},
{
x: 2009,
y: 352
},
{
x: 2010,
y: 377
},
{
x: 2011,
y: 383
},
{
x: 2012,
y: 344
},
{
x: 2013,
y: 366
},
{
x: 2014,
y: 389
},
{
x: 2015,
y: 334
}
]
}, {
name: 'south',
data: [
{
x: 1996,
y: 162
},
{
x: 1997,
y: 90
},
{
x: 1998,
y: 50
},
{
x: 1999,
y: 77
},
{
x: 2000,
y: 35
},
{
x: 2001,
y: -45
},
{
x: 2002,
y: -88
},
{
x: 2003,
y: -120
},
{
x: 2004,
y: -156
},
{
x: 2005,
y: -123
},
{
x: 2006,
y: -88
},
{
x: 2007,
y: -66
},
{
x: 2008,
y: -45
},
{
x: 2009,
y: -29
},
{
x: 2010,
y: -45
},
{
x: 2011,
y: -88
},
{
x: 2012,
y: -132
},
{
x: 2013,
y: -146
},
{
x: 2014,
y: -169
},
{
x: 2015,
y: -184
}
]
}],
title: {
text: 'Area with Negative Values',
align: 'left',
style: {
fontSize: '14px'
}
},
xaxis: {
type: 'datetime',
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
tickAmount: 4,
floating: false,
labels: {
style: {
color: '#8e8da4',
},
offsetY: -7,
offsetX: 0,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false
}
},
fill: {
type: [ 'gradient', 'solid'],
opacity: 1,
},
tooltip: {
x: {
format: "yyyy",
},
fixed: {
enabled: false,
position: 'topRight'
}
},
grid: {
yaxis: {
lines: {
offsetX: -30
}
},
padding: {
left: 20
}
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/area/basic-area.html 0 → 100644
+ 78
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Area</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="../../assets/stock-prices.js"></script>
<script>
var options = {
chart: {
height: 350,
type: 'area',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "STOCK ABC",
data: series.monthDataSeries1.prices
}],
title: {
text: 'Fundamental Analysis of Stocks',
align: 'left'
},
subtitle: {
text: 'Price Movements',
align: 'left'
},
labels: series.monthDataSeries1.dates,
xaxis: {
type: 'datetime',
},
yaxis: {
opposite: true
},
legend: {
horizontalAlign: 'left'
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/area/stacked-area.html 0 → 100644
+ 123
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stacked Area</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'area',
stacked: true,
events: {
selection: function(chart, e) {
console.log(new Date(e.xaxis.min) )
}
},
},
colors: ['#008FFB', '#00E396', '#CED4DC'],
dataLabels: {
enabled: false
},
stroke: {
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("#chart"),
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;
}
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/area/timeseries-with-irregular-data.html 0 → 100644
+ 154
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TimeSeries With Irregular Data</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<!-- fake data taken from https://www.metricsgraphicsjs.org/data/fake_users2.json -->
<script src="../../assets/irregular-data-series.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script>
var ts1 = 1388534400000;
var ts2 = 1388620800000;
var ts3 = 1389052800000;
var dataSet = [[],[],[]];
for(var i=0; i<12; i++) {
ts1 = ts1 + 86400000;
var innerArr = [ts1, dataSeries[2][i].value];
dataSet[0].push(innerArr)
}
for(var i=0; i<18; i++) {
ts2 = ts2 + 86400000;
var innerArr = [ts2, dataSeries[1][i].value];
dataSet[1].push(innerArr)
}
for(var i=0; i<12; i++) {
ts3 = ts3 + 86400000;
var innerArr = [ts3, dataSeries[0][i].value];
dataSet[2].push(innerArr)
}
var options = {
chart: {
type: 'area',
stacked: false,
height: 350,
zoom: {
enabled: false
},
},
plotOptions: {
line: {
curve: 'smooth',
}
},
dataLabels: {
enabled: false
},
series: [{
name: 'PRODUCT A',
data: dataSet[0]
}, {
name: 'PRODUCT B',
data: dataSet[1]
}, {
name: 'PRODUCT C',
data: dataSet[2]
}],
markers: {
size: 0,
style: 'full',
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
yaxis: {
labels: {
style: {
color: '#8e8da4',
},
offsetX: 0,
formatter: function(val) {
return (val / 1000000).toFixed(2);
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false
}
},
xaxis: {
type: 'datetime',
tickAmount: 8,
min: new Date("01/01/2014").getTime(),
max: new Date("01/20/2014").getTime(),
labels: {
rotate: -15,
rotateAlways: true,
formatter: function(val, timestamp) {
return moment(new Date(timestamp)).format("DD MMM YYYY")
}
}
},
title: {
text: 'Irregular Data in Time Series',
align: 'left',
offsetX: 14
},
tooltip: {
shared: true
},
legend: {
position: 'top',
horizontalAlign: 'right',
offsetX: -10
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/bar/bar-with-custom-data-labels.html 0 → 100644
+ 108
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bar with Custom DataLabels</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 380,
type: 'bar'
},
plotOptions: {
bar: {
barHeight: '100%',
distributed: true,
horizontal: true,
dataLabels: {
position: 'bottom'
},
}
},
colors: ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e', '#f48024', '#69d2e7'],
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#fff']
},
formatter: function(val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
},
offsetX: 0,
dropShadow: {
enabled: true
}
},
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
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
},
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("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/bar/bar-with-images.html 0 → 100644
+ 107
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bar Chart with Images</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
#apexcharts-canvas {
margin: 0 auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var labels = Array.apply(null, {length: 39}).map(function(el, index){
return index + 1;
});
var options = {
chart: {
height: 410,
type: 'bar',
animations: {
enabled: false
}
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '100%',
},
},
dataLabels: {
enabled: false,
},
stroke: {
colors: ["#fff"],
width: 0.2
},
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]
}],
labels: labels,
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
},
fill: {
type: 'image',
opacity: 0.87,
image: {
src: ['../../assets/images/4274635880_809a4b9d0d_z.jpg'],
width: 466,
height: 406
}
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/bar/bar-with-negative.html 0 → 100644
+ 109
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stacked Bar Chart with Negative Values</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 440,
type: 'bar',
stacked: true
},
colors: ['#008FFB','#FF4560'],
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) + "%"
}
}
},
title: {
text: 'Mauritius population pyramid 2011'
},
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("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/bar/basic-bar.html 0 → 100644
+ 60
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Bar Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: false
},
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/bar/grouped-bar.html 0 → 100644
+ 77
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Grouped Bar Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 430,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
position: 'top',
},
}
},
dataLabels: {
enabled: true,
offsetX: -6,
style: {
fontSize: '12px',
colors: ['#fff']
}
},
stroke: {
show: true,
width: 1,
colors: ['#fff']
},
series: [{
data: [44, 55, 41, 64, 22, 43, 21]
},{
data: [53, 32, 33, 52, 13, 44, 32]
}],
xaxis: {
categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/bar/patterned-bar.html 0 → 100644
+ 118
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bar Chart with Pattern Fill</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'bar',
stacked: true,
shadow: {
enabled: true,
blur: 1,
opacity: 0.5
}
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '60%',
},
},
dataLabels: {
enabled: false
},
stroke: {
width: 2,
},
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]
}],
title: {
text: 'Compare Sales Strategy'
},
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
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/bar/stacked-bar-100.html 0 → 100644
+ 98
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stacked Bar Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'bar',
stacked: true,
stackType: '100%'
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
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]
}],
title: {
text: '100% Stacked Bar'
},
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
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/bar/stacked-bar.html 0 → 100644
+ 107
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stacked Bar Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'bar',
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
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]
}],
title: {
text: 'Fiction Books Sales'
},
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
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/bubble/3d-bubble.html 0 → 100644
+ 123
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3d Bubble Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
/*
// this function will generate output in this format
// data = [
[timestamp, 23],
[timestamp, 33],
[timestamp, 12]
...
]
*/
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([baseval, y, z]);
baseval += 86400000;
i++;
}
return series;
}
var options = {
chart: {
height: 350,
type: 'bubble',
},
dataLabels: {
enabled: false
},
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
})
}
],
fill: {
type: 'gradient',
},
title: {
text: '3D Bubble Chart'
},
xaxis: {
tickAmount: 12,
type: 'datetime',
labels: {
rotate: 0,
}
},
yaxis: {
max: 70
},
theme: {
palette: 'palette2'
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/bubble/simple-bubble.html 0 → 100644
+ 116
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Bubble</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
/*
// this function will generate output in this format
// data = [
[timestamp, 23],
[timestamp, 33],
[timestamp, 12]
...
]
*/
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 options = {
chart: {
height: 350,
type: 'bubble',
},
dataLabels: {
enabled: false
},
series: [{
name: 'Bubble1',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble2',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble3',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble4',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
}
],
fill: {
opacity: 0.8
},
title: {
text: 'Simple Bubble Chart'
},
xaxis: {
tickAmount: 12,
type: 'category',
},
yaxis: {
max: 70
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/candlestick/basic.html 0 → 100644
+ 302
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CandleStick Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="../../assets/ohlc.js"></script>
<script>
var options = {
chart: {
height: 350,
type: 'candlestick',
},
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]
},
]
}],
title: {
text: 'CandleStick Chart',
align: 'left'
},
xaxis: {
type: 'datetime'
},
yaxis: {
tooltip: {
enabled: true
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/candlestick/candlestick-bar.html 0 → 100644
+ 156
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CandleStick Chart with Bar</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
.chart-box {
max-width: 650px;
margin: 35px auto;
}
#chart-candlestick,
#chart-bar {
max-width: 640px;
}
#chart-bar {
margin-top: -50px;
}
</style>
</head>
<body>
<div class="chart-box">
<div id="chart-candlestick">
</div>
<div id="chart-bar">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="../../assets/ohlc.js"></script>
<script>
var optionsCandlestick = {
chart: {
id: 'candles',
height: 290,
type: 'candlestick',
toolbar: {
autoSelected: 'pan',
show: false
},
zoom: {
enabled: false
},
},
plotOptions: {
candlestick: {
colors: {
upward: '#3C90EB',
downward: '#DF7D46'
}
}
},
series: [{
data: seriesData
}],
xaxis: {
type: 'datetime'
}
}
var chartCandlestick = new ApexCharts(
document.querySelector("#chart-candlestick"),
optionsCandlestick
);
chartCandlestick.render();
var options = {
chart: {
height: 160,
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: '#F15B46'
}, {
from: 1,
to: 10000,
color: '#FEB019'
}
],
},
}
},
stroke: {
width: 0
},
series: [{
name: 'volume',
data: seriesDataLinear
}],
xaxis: {
type: 'datetime',
axisBorder: {
offsetX: 13
}
},
yaxis: {
labels: {
show: false
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart-bar"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal