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

Added Viewer

parent e21f1f45
master
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 376 additions and 0 deletions
+376 -0
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/line/line-with-image.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>Line with Image 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: 'line',
},
stroke: {
width: 5,
curve: 'smooth'
},
colors: ['#2e93fa'],
series: [
// {
// name: 'Dataset 1',
// data: [20, 31, 14, 40, 12, 55, 13, 13, 9, 19, 20, 41, 36, 62, 60]
// }],
{
name: 'Dataset 2',
data: [10, 5, 20, 13, 15, 12, 13, 24, 24, 34, 7, 15, 10, 9, 26]
}],
xaxis: {
categories: ['1990', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005'],
labels: {
formatter: function(val) {
return val
}
}
},
title: {
text: 'Line Chart - Image fill',
align: 'left',
style: {
fontSize: "16px",
}
},
fill: {
type: 'image',
image: {
src: [
'../../assets/images/abstract.jpg'
],
width: 800,
height: 800
},
},
markers: {
size: 0,
opacity: 0,
colors: ['#fff'],
strokeColor: "#2e93fa",
strokeWidth: 2,
hover: {
size: 8,
}
},
yaxis: {
title: {
text: '$ (million)',
},
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
}
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/line/line-with-missing-data.html 0 → 100644
+ 75
- 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>Line Chart 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: 'line',
zoom: {
enabled: false
},
animations: {
enabled: false
}
},
stroke: {
width: [5,5,4],
curve: 'straight'
},
series: [{
name: 'Peter',
data: [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9]
}, {
name: 'Johnny',
data: [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null]
}, {
name: 'David',
data: [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null]
}],
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
title: {
text: 'Missing data (null values)'
},
xaxis: {
},
}
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/line/logarithmic-line.html 0 → 100644
+ 192
- 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>Chart with Logarithmic Scale</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 data = [{
x: 1994,
y: 2543763
},
{
x: 1995,
y: 4486659
},
{
x: 1996,
y: 7758386
},
{
x: 1997,
y: 12099221
},
{
x: 1998,
y: 18850762
},
{
x: 1999,
y: 28153765
},
{
x: 2000,
y: 41479495
},
{
x: 2001,
y: 50229224
},
{
x: 2002,
y: 66506501
},
{
x: 2003,
y: 78143598
},
{
x: 2004,
y: 91332777
},
{
x: 2005,
y: 103010128
},
{
x: 2006,
y: 116291681
},
{
x: 2007,
y: 137322698
},
{
x: 2008,
y: 157506752
},
{
x: 2009,
y: 176640381
},
{
x: 2010,
y: 202320297
},
{
x: 2011,
y: 223195735
},
{
x: 2012,
y: 249473624
},
{
x: 2013,
y: 272842810
},
{
x: 2014,
y: 295638556
},
{
x: 2015,
y: 318599615
},
{
x: 2016,
y: 342497123
}
]
var labelFormatter = function (value) {
var val = Math.abs(value)
if (val >= 1000000) {
val = (val / 1000000).toFixed(1) + ' M';
}
return val;
}
var options = {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Logarithmic",
data: data
}, {
name: "Linear",
data: data
}],
title: {
text: 'Logarithmic Scale',
align: 'left'
},
xaxis: {
type: 'datetime'
},
yaxis: [{
min: 1000000,
max: 500000000,
tickAmount: 4,
logarithmic: true,
seriesName: 'Logarithmic',
labels: {
formatter: labelFormatter,
}
},
{
min: 1000000,
max: 500000000,
opposite: true,
tickAmount: 4,
seriesName: 'Linear',
labels: {
formatter: labelFormatter
}
}
]
}
var chart = new ApexCharts(
document.querySelector("#chart"),
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