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 2584 additions and 0 deletions
+2584 -0
public/ThirdParty/apexcharts-bundle/samples/react/pie/gradient-donut.html 0 → 100644
+ 101
- 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>Gradient Donut</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 380px;
margin: 35px auto;
}
.apexcharts-legend-text tspan:nth-child(1) {
font-weight: lighter;
fill: #999;
}
.apexcharts-legend-text tspan:nth-child(3) {
font-weight: bold;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;donut&quot; width=&quot;380&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class DonutChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
dataLabels: {
enabled: false
},
fill: {
type: 'gradient',
},
legend: {
formatter: function (val, opts) {
return val + " - " + opts.w.globals.series[opts.seriesIndex]
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
},
series: [44, 55, 41, 17, 15],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="donut" width="380" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(DonutChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/pie/monochrome-pie.html 0 → 100644
+ 90
- 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>Monochrome Pie</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 380px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;pie&quot; width=&quot;100%&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class PieChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
theme: {
monochrome: {
enabled: true
}
},
title: {
text: "Number of leads"
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
},
series: [25, 15, 44, 55, 41, 17],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="pie" width="100%" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(PieChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/pie/pie-with-image.html 0 → 100644
+ 99
- 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>Pie with Image</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 380px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;pie&quot; width=&quot;380&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class PieChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
colors: ['#93C3EE', '#E5C6A0', '#669DB5', '#94A74A'],
fill: {
type: 'image',
opacity: 0.85,
image: {
src: ['../../assets/images/stripes.jpg', '../../assets/images/1101098.png',
'../../assets/images/4679113782_ca13e2e6c0_z.jpg',
'../../assets/images/2979121308_59539a3898_z.jpg'
],
width: 25,
imagedHeight: 25
},
},
stroke: {
width: 4
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
},
series: [44, 33, 54, 45],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="pie" width="380" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(PieChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/pie/simple-donut.html 0 → 100644
+ 81
- 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 Donut</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 380px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;donut&quot; width=&quot;380&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class DonutChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
},
series: [44, 55, 41, 17, 15]
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="donut" width="380" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(DonutChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/pie/simple-pie.html 0 → 100644
+ 82
- 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 Pie</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 380px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;pie&quot; width=&quot;380&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class PieChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
},
series: [44, 55, 13, 43, 22],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="pie" width="380" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(PieChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/radar/basic-radar.html 0 → 100644
+ 76
- 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 Radar</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 450px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;radar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class RadarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
title: {
text: 'Basic Radar Chart'
}
},
series: [{
name: 'Series 1',
data: [80, 50, 30, 40, 100, 20],
}]
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/radar/radar-multiple-series.html 0 → 100644
+ 99
- 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 Radar</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart, #app {
max-width: 450px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;radar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class RadarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
dropShadow: {
enabled: true,
blur: 1,
left: 1,
top: 1
},
},
labels: ['2011', '2012', '2013', '2014', '2015', '2016'],
title: {
text: 'Radar Chart - Multi Series'
},
stroke: {
width: 0
},
fill: {
opacity: 0.4
},
markers: {
size: 0
}
},
series: [{
name: 'Series 1',
data: [80, 50, 30, 40, 100, 20],
}, {
name: 'Series 2',
data: [20, 30, 40, 80, 20, 80],
}, {
name: 'Series 3',
data: [44, 76, 78, 13, 43, 10],
}]
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/radar/radar-with-polygon-fill.html 0 → 100644
+ 113
- 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>Radar with Polygon Fill</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 450px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;radar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class RadarChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
plotOptions: {
radar: {
size: 140,
polygons: {
strokeColor: '#e9e9e9',
fill: {
colors: ['#f8f8f8', '#fff']
}
}
}
},
title: {
text: 'Radar with Polygon Fill'
},
colors: ['#FF4560'],
markers: {
size: 4,
colors: ['#fff'],
strokeColor: '#FF4560',
strokeWidth: 2,
},
tooltip: {
y: {
formatter: function(val) {
return val
}
}
},
yaxis: {
tickAmount: 7,
labels: {
formatter: function(val, i) {
if(i % 2 === 0) {
return val
} else {
return ''
}
}
}
}
},
series: [{
name: 'Series 1',
data: [20, 100, 40, 30, 50, 80, 33],
}]
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadarChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/radialBar/circle-chart-multiple.html 0 → 100644
+ 89
- 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>Circle Gauge Chart - Multiple</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;radialBar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class RadialChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
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
}
}
}
}
},
series: [44, 55, 67, 83],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radialBar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadialChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/radialBar/circle-chart-with-image.html 0 → 100644
+ 105
- 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>Circle Gauge Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;radialBar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class RadialChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series: [67],
options: {
plotOptions: {
radialBar: {
hollow: {
margin: 15,
size: '70%',
image: '../../assets/images/clock.png',
imageWidth: 64,
imageHeight: 64,
imageClipped: false
},
dataLabels: {
name: {
show: false,
color: '#fff'
},
value: {
show: true,
color: '#333',
offsetY: 70,
fontSize: '22px'
}
}
}
},
fill: {
type: 'image',
image: {
src: ['../../assets/images/4274635880_809a4b9d0d_z.jpg'],
}
},
stroke: {
lineCap: 'round'
},
labels: ['Volatility'],
},
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radialBar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadialChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/radialBar/circle-chart.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>Circle Gauge Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;radialBar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class RadialChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
plotOptions: {
radialBar: {
hollow: {
size: '70%',
}
},
},
labels: ['Cricket']
},
series: [70],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radialBar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadialChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/radialBar/circle-custom-angle.html 0 → 100644
+ 125
- 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>Circle Custom Angle</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
.apexcharts-legend text {
font-weight: 900;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;radialBar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class RadialChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
plotOptions: {
radialBar: {
offsetY: -30,
startAngle: 0,
endAngle: 270,
hollow: {
margin: 5,
size: '30%',
background: 'transparent',
image: undefined,
},
dataLabels: {
name: {
show: false,
},
value: {
show: false,
}
}
}
},
colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
legend: {
show: true,
floating: true,
fontSize: '16px',
position: 'left',
offsetX: 170,
offsetY: 10,
labels: {
useSeriesColors: true,
},
markers: {
size: 0
},
formatter: function(seriesName, opts) {
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
},
itemMargin: {
horizontal: 1,
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
show: false
}
}
}]
},
series: [76, 67, 61, 90],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radialBar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadialChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/radialBar/circle-gradient.html 0 → 100644
+ 164
- 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>Circle Concept 2</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#card {
background: #fff;
max-width: 650px;
margin: 35px auto;
padding-top: 0px;
text-align: center;
}
h2 {
font-size: 18px;
margin-bottom: 0;
color: rgb(192, 192, 192);
}
h1 {
font-size: 22px;
margin-top: 0;
color: #333;
}
.footer {
position: absolute;
bottom: 16px;
left: 0;
right: 0;
font-size: 14px;
text-align: center
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;card&quot;&gt;&#10; &lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;radialBar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class RadialChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
toolbar: {
show: true
}
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 225,
hollow: {
margin: 0,
size: '70%',
background: '#fff',
position: 'front',
dropShadow: {
enabled: true,
top: 3,
left: 0,
blur: 4,
opacity: 0.24
}
},
track: {
background: '#fff',
strokeWidth: '67%',
margin: 0, // margin is in pixels
dropShadow: {
enabled: true,
top: -3,
left: 0,
blur: 4,
opacity: 0.35
}
},
dataLabels: {
name: {
offsetY: -10,
show: true,
color: '#888',
fontSize: '17px'
},
value: {
formatter: function (val) {
return parseInt(val);
},
color: '#111',
fontSize: '36px',
show: true,
}
}
}
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
type: 'horizontal',
shadeIntensity: 0.5,
gradientToColors: ['#ABE5A1'],
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
stroke: {
lineCap: 'round'
},
labels: ['Percent'],
},
series: [75],
}
}
render() {
return (
<div>
<div id="card">
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radialBar" height="350" />
</div>
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadialChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/radialBar/semi-circle-chart.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>Semi Circle Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 450px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;radialBar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class RadialChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
plotOptions: {
radialBar: {
startAngle: -90,
endAngle: 90,
track: {
background: "#e7e7e7",
strokeWidth: '97%',
margin: 5, // margin is in pixels
shadow: {
enabled: true,
top: 2,
left: 0,
color: '#999',
opacity: 1,
blur: 2
}
},
dataLabels: {
name: {
show: false
},
value: {
offsetY: 15,
fontSize: '22px'
}
}
}
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
shadeIntensity: 0.4,
inverseColors: false,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 53, 91]
},
},
labels: ['Average Results'],
},
series: [76],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radialBar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadialChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/radialBar/stroked-gauge.html 0 → 100644
+ 105
- 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>Stroked Gauge</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;radialBar&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class RadialChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
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: {
type: 'gradient',
gradient: {
shade: 'dark',
shadeIntensity: 0.15,
inverseColors: false,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 65, 91]
},
},
stroke: {
dashArray: 4
},
labels: ['Median Ratio']
},
series: [67],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radialBar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadialChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/scatter/scatter-basic.html 0 → 100644
+ 186
- 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>Scatter Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;scatter&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class ScatterChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
zoom: {
enabled: true,
type: 'xy'
}
},
xaxis: {
tickAmount: 10,
},
yaxis: {
tickAmount: 7
}
},
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]
]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="scatter" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(ScatterChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/scatter/scatter-datetime.html 0 → 100644
+ 140
- 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>Timeline Scatter Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;scatter&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
function generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push([baseval, y]);
baseval += 86400000;
i++;
}
return series;
}
class ScatterChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
zoom: {
type: 'xy'
}
},
dataLabels: {
enabled: false
},
grid: {
xaxis: {
showLines: true
},
yaxis: {
showLines: true
},
},
xaxis: {
type: 'datetime',
},
yaxis: {
max: 70
}
},
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
})
},
],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="scatter" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(ScatterChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/scatter/scatter-images.html 0 → 100644
+ 131
- 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>Scatter Images</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;chart&quot;&gt;&#10; &lt;ReactApexChart options={this.state.options} series={this.state.series}
type=&quot;scatter&quot; height=&quot;350&quot; /&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
class ScatterChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
animations: {
enabled: false,
},
zoom: {
enabled: false,
},
toolbar: {
show: false
}
},
colors: ['#79A2F8', '#EF7EC9']
xaxis: {
tickAmount: 10,
min: 0,
max: 40
},
yaxis: {
tickAmount: 7
},
markers: {
size: 20
},
fill: {
type: 'image',
opacity: 1,
image: {
src: ['../../assets/images/ico-messenger.png'],
width: 40,
height: 40
}
}
},
series: [{
data: [
[16.4, 5.4],
[21.7, 4],
[25.4, 3],
[19, 2],
[10.9, 1],
[13.6, 3.2],
[10.9, 7],
[10.9, 8.2],
[16.4, 4],
[13.6, 4.3],
[13.6, 12],
[29.9, 3],
[10.9, 5.2],
[16.4, 6.5],
[10.9, 8],
[24.5, 7.1],
[10.9, 7],
[8.1, 4.7],
[19, 10],
[27.1, 10],
[24.5, 8],
[27.1, 3],
[29.9, 11.5],
[27.1, 0.8],
[22.1, 2]
]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="scatter" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(ScatterChart), domContainer);
</script>
</body>
</html>
public/ThirdParty/apexcharts-bundle/samples/react/sparklines/sparklines.html 0 → 100644
+ 411
- 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>Sparklines</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
.row {
overflow: hidden;
max-width: 890px;
margin: 30px auto;
display: flex;
}
.col-md-4 {
width: 33.33%;
padding: 0 25px;
}
table {
width: 100%;
}
tbody tr {
border-top: 1px solid #e7e7e7;
}
th {
font-weight: bold;
font-family: Helvetica;
padding-bottom: 20px;
}
td,
th {
width: 25%;
text-align: center;
height: 65px;
}
td div {
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
@media only screen and (max-width: 480px) {
th:first-child,
td:first-child {
display: none;
}
.row {
display: block;
}
.col-md-4 {
padding: 0;
width: 100%;
}
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;sparklines&quot;&gt;&#10; &lt;div className=&quot;row&quot;&gt;&#10; &lt;div className=&quot;col-md-4&quot;&gt;&#10; &lt;div id=&quot;spark1&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsTopSpark1} series={this.state.seriesTopSpark1} type=&quot;area&quot; height=&quot;160&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;&#10; &lt;div className=&quot;col-md-4&quot;&gt;&#10; &lt;div id=&quot;spark2&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsTopSpark2} series={this.state.seriesTopSpark2} type=&quot;area&quot; height=&quot;160&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;&#10; &lt;div className=&quot;col-md-4&quot;&gt;&#10; &lt;div id=&quot;spark3&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsTopSpark3} series={this.state.seriesTopSpark3} type=&quot;area&quot; height=&quot;160&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div className=&quot;row&quot;&gt;&#10; &lt;table&gt;&#10; &lt;thead&gt;&#10; &lt;th&gt;Total Value&lt;/th&gt;&#10; &lt;th&gt;Percentage of Portfolio&lt;/th&gt;&#10; &lt;th&gt;Last 10 days&lt;/th&gt;&#10; &lt;th&gt;Volume&lt;/th&gt;&#10; &lt;/thead&gt;&#10; &lt;tbody&gt;&#10; &lt;tr&gt;&#10; &lt;td&gt;$32,554&lt;/td&gt;&#10; &lt;td&gt;15%&lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart1&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark1} type=&quot;line&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart5&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark1} type=&quot;bar&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;/tr&gt;&#10; &lt;tr&gt;&#10; &lt;td&gt;$23,533&lt;/td&gt;&#10; &lt;td&gt;7%&lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart2&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark2} type=&quot;line&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart6&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark2} type=&quot;bar&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;/tr&gt;&#10; &lt;tr&gt;&#10; &lt;td&gt;$54,276&lt;/td&gt;&#10; &lt;td&gt;9%&lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart3&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type=&quot;line&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart7&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type=&quot;bar&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;/tr&gt;&#10; &lt;tr&gt;&#10; &lt;td&gt;$11,533&lt;/td&gt;&#10; &lt;td&gt;2%&lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart4&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark4} type=&quot;line&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;td&gt;&#10; &lt;div id=&quot;chart8&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type=&quot;bar&quot; height=&quot;35&quot; width=&quot;100&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;/td&gt;&#10; &lt;/tr&gt;&#10; &lt;/tbody&gt;&#10; &lt;/table&gt;&#10; &lt;/div&gt;&#10; &lt;/div&gt;
</div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
window.Apex = {
stroke: {
width: 3
},
markers: {
size: 0
},
tooltip: {
fixed: {
enabled: true,
}
}
};
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];
class SparklinesCharts extends React.Component {
constructor(props) {
super(props);
this.state = {
seriesTopSpark1: [{
data: randomizeArray(sparklineData)
}],
seriesTopSpark2: [{
data: randomizeArray(sparklineData)
}],
seriesTopSpark3: [{
data: randomizeArray(sparklineData)
}],
seriesSpark1: [{
data: [25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54]
}],
seriesSpark2: [{
data: [47, 45, 74, 14, 56, 74, 14, 11, 7, 39, 82]
}],
seriesSpark3: [{
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14]
}],
seriesSpark4: [{
data: [15, 75, 47, 65, 14, 2, 41, 54, 4, 27, 15]
}],
chartOptionsTopSpark1: {
chart: {
sparkline: {
enabled: true
},
},
colors: ['#DCE6EC'],
stroke: {
curve: 'straight'
},
fill: {
opacity: 0.3,
},
xaxis: {
crosshairs: {
width: 1
},
},
yaxis: {
min: 0
},
title: {
text: '$135,965',
offsetX: 0,
style: {
fontSize: '24px',
cssClass: 'apexcharts-yaxis-title'
}
},
subtitle: {
text: 'Profits',
offsetX: 0,
style: {
fontSize: '14px',
cssClass: 'apexcharts-yaxis-title'
}
}
},
chartOptionsTopSpark2: {
chart: {
sparkline: {
enabled: true
},
},
stroke: {
curve: 'straight'
},
fill: {
opacity: 0.3
},
xaxis: {
crosshairs: {
width: 1
},
},
yaxis: {
min: 0
},
title: {
text: '$235,312',
offsetX: 0,
style: {
fontSize: '24px',
cssClass: 'apexcharts-yaxis-title'
}
},
subtitle: {
text: 'Expenses',
offsetX: 0,
style: {
fontSize: '14px',
cssClass: 'apexcharts-yaxis-title'
}
}
},
chartOptionsTopSpark3: {
chart: {
sparkline: {
enabled: true
},
},
stroke: {
curve: 'straight'
},
fill: {
opacity: 0.3,
},
xaxis: {
crosshairs: {
width: 1
},
},
yaxis: {
min: 0
},
title: {
text: '$424,652',
offsetX: 0,
style: {
fontSize: '24px',
cssClass: 'apexcharts-yaxis-title'
}
},
subtitle: {
text: 'Sales',
offsetX: 0,
style: {
fontSize: '14px',
cssClass: 'apexcharts-yaxis-title'
}
}
},
chartOptionsSparkLine: {
chart: {
height: 35,
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
columnWidth: '80%'
}
},
xaxis: {
crosshairs: {
width: 1
},
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return ''
}
}
},
marker: {
show: false
}
}
}
}
}
render() {
return (
<div>
<div id="sparklines">
<div className="row">
<div className="col-md-4">
<div id="spark1">
<ReactApexChart options={this.state.chartOptionsTopSpark1} series={this.state.seriesTopSpark1} type="area" height="160" />
</div>
</div>
<div className="col-md-4">
<div id="spark2">
<ReactApexChart options={this.state.chartOptionsTopSpark2} series={this.state.seriesTopSpark2} type="area" height="160" />
</div>
</div>
<div className="col-md-4">
<div id="spark3">
<ReactApexChart options={this.state.chartOptionsTopSpark3} series={this.state.seriesTopSpark3} type="area" height="160" />
</div>
</div>
</div>
<div className="row">
<table>
<thead>
<th>Total Value</th>
<th>Percentage of Portfolio</th>
<th>Last 10 days</th>
<th>Volume</th>
</thead>
<tbody>
<tr>
<td>$32,554</td>
<td>15%</td>
<td>
<div id="chart1">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark1} type="line" height="35" width="100" />
</div>
</td>
<td>
<div id="chart5">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark1} type="bar" height="35" width="100" />
</div>
</td>
</tr>
<tr>
<td>$23,533</td>
<td>7%</td>
<td>
<div id="chart2">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark2} type="line" height="35" width="100" />
</div>
</td>
<td>
<div id="chart6">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark2} type="bar" height="35" width="100" />
</div>
</td>
</tr>
<tr>
<td>$54,276</td>
<td>9%</td>
<td>
<div id="chart3">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type="line" height="35" width="100" />
</div>
</td>
<td>
<div id="chart7">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type="bar" height="35" width="100" />
</div>
</td>
</tr>
<tr>
<td>$11,533</td>
<td>2%</td>
<td>
<div id="chart4">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark4} type="line" height="35" width="100" />
</div>
</td>
<td>
<div id="chart8">
<ReactApexChart options={this.state.chartOptionsSparkLine} series={this.state.seriesSpark3} type="bar" height="35" width="100" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(SparklinesCharts), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/area/area-datetime.html 0 → 100644
+ 201
- 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 Chart - Datetime X-Axis</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
.toolbar {
margin-left: 45px;
}
button {
background: #fff;
color: #222;
border: 1px solid #e7e7e7;
border-bottom: 2px solid #ddd;
border-radius: 2px;
padding: 4px 17px;
}
button.active {
color: #fff;
background: #008FFB;
border: 1px solid blue;
border-bottom: 2px solid blue;
}
button:focus {
outline: 0;
}
</style>
</head>
<body>
<div id="chart">
<div class="toolbar">
<button id="one_month">1M</button>
<button id="six_months">6M</button>
<button id="one_year" class="active">1Y</button>
<button id="ytd">YTD</button>
<button id="all">ALL</button>
</div>
<div id="timeline-chart"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="../../assets/series1000.js"></script>
<script>
var options = {
annotations: {
yaxis: [{
y: 30,
borderColor: '#999',
label: {
show: true,
text: 'Support',
style: {
color: "#fff",
background: '#00E396'
}
}
}],
xaxis: [{
x: new Date('14 Nov 2012').getTime(),
borderColor: '#999',
yAxisIndex: 0,
label: {
show: true,
text: 'Rally',
style: {
color: "#fff",
background: '#775DD0'
}
}
}]
},
chart: {
type: 'area',
height: 350,
},
dataLabels: {
enabled: false
},
series: [{
data: dateSeries1
},
],
markers: {
size: 0,
style: 'hollow',
},
xaxis: {
type: 'datetime',
min: new Date('01 Mar 2012').getTime(),
tickAmount: 6,
},
tooltip: {
x: {
format: 'dd MMM yyyy'
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 100]
}
},
}
var chart = new ApexCharts(
document.querySelector("#timeline-chart"),
options
);
chart.render();
var resetCssClasses = function (activeEl) {
var els = document.querySelectorAll("button");
Array.prototype.forEach.call(els, function (el) {
el.classList.remove('active');
});
activeEl.target.classList.add('active')
}
document.querySelector("#one_month").addEventListener('click', function (e) {
resetCssClasses(e)
chart.updateOptions({
xaxis: {
min: new Date('28 Jan 2013').getTime(),
max: new Date('27 Feb 2013').getTime(),
}
})
})
document.querySelector("#six_months").addEventListener('click', function (e) {
resetCssClasses(e)
chart.updateOptions({
xaxis: {
min: new Date('27 Sep 2012').getTime(),
max: new Date('27 Feb 2013').getTime(),
}
})
})
document.querySelector("#one_year").addEventListener('click', function (e) {
resetCssClasses(e)
chart.updateOptions({
xaxis: {
min: new Date('27 Feb 2012').getTime(),
max: new Date('27 Feb 2013').getTime(),
}
})
})
document.querySelector("#ytd").addEventListener('click', function (e) {
resetCssClasses(e)
chart.updateOptions({
xaxis: {
min: new Date('01 Jan 2013').getTime(),
max: new Date('27 Feb 2013').getTime(),
}
})
})
document.querySelector("#all").addEventListener('click', function (e) {
resetCssClasses(e)
chart.updateOptions({
xaxis: {
min: undefined,
max: undefined,
}
})
})
document.querySelector("#ytd").addEventListener('click', function () {
})
</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