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 2881 additions and 0 deletions
+2881 -0
public/ThirdParty/apexcharts-bundle/samples/react/line/basic-line.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>Basic Line - React</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;line&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 LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
},
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/brush-charts.html 0 → 100644
+ 169
- 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>Brush Chart - React</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart1, #chart2 {
max-width: 650px;
margin: 35px auto;
}
#chart2 {
position: relative;
margin-top: -70px;
margin-bottom: 0px;
}
#app {
padding-top: 20px;
padding-left: 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;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;charts&quot;&gt;&#10; &lt;div id=&quot;chart1&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsArea} series={this.state.series} type=&quot;line&quot; height=&quot;230&quot; /&gt;&#10; &lt;/div&gt;&#10; &lt;div id=&quot;chart2&quot;&gt;&#10; &lt;ReactApexChart options={this.state.chartOptionsBrush} series={this.state.series} type=&quot;area&quot; height=&quot;130&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 LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
chartOptionsArea: {
chart: {
id: 'chartArea',
toolbar: {
autoSelected: 'pan',
show: false
}
},
colors: ['#546E7A'],
stroke: {
width: 3
},
dataLabels: {
enabled: false
},
fill: {
opacity: 1,
},
markers: {
size: 0
},
xaxis: {
type: 'datetime'
}
},
chartOptionsBrush: {
chart: {
id: 'chartBrush',
brush: {
target: 'chartArea',
enabled: true
},
selection: {
enabled: true,
xaxis: {
min: new Date('19 Jun 2017').getTime(),
max: new Date('14 Aug 2017').getTime()
}
},
},
colors: ['#008FFB'],
fill: {
type: 'gradient',
gradient: {
opacityFrom: 0.91,
opacityTo: 0.1,
}
},
xaxis: {
type: 'datetime',
tooltip: {
enabled: false
}
},
yaxis: {
tickAmount: 2
}
},
series: [{
data: this.generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 185, {
min: 30,
max: 90
})
}],
}
}
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;
}
render() {
return (
<div>
<div id="charts">
<div id="chart1">
<ReactApexChart options={this.state.chartOptionsArea} series={this.state.series} type="line" height="230" />
</div>
<div id="chart2">
<ReactApexChart options={this.state.chartOptionsBrush} series={this.state.series} type="area" height="130" />
</div>
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/dashed-line.html 0 → 100644
+ 137
- 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>Dashed Line - React</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;line&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 LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
width: [5, 7, 5],
curve: 'straight',
dashArray: [0, 8, 5]
},
title: {
text: 'Page Statistics',
align: 'left'
},
markers: {
size: 0,
hover: {
sizeOffset: 6
}
},
xaxis: {
categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan',
'10 Jan', '11 Jan', '12 Jan'
],
},
tooltip: {
y: [{
title: {
formatter: function (val) {
return val + " (mins)"
}
}
}, {
title: {
formatter: function (val) {
return val + " per session"
}
}
}, {
title: {
formatter: function (val) {
return val;
}
}
}]
},
grid: {
borderColor: '#f1f1f1',
}
},
series: [{
name: "Session Duration",
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
},
{
name: "Page Views",
data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
},
{
name: 'Total Visits',
data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
}
],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/gradient-line.html 0 → 100644
+ 134
- 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 Line - React</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;line&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 LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
type: 'line',
shadow: {
enabled: false,
color: '#bbb',
top: 3,
left: 2,
blur: 3,
opacity: 1
},
},
stroke: {
width: 7,
curve: 'smooth'
},
xaxis: {
type: 'datetime',
categories: ['1/11/2000', '2/11/2000', '3/11/2000', '4/11/2000', '5/11/2000', '6/11/2000', '7/11/2000',
'8/11/2000', '9/11/2000', '10/11/2000', '11/11/2000', '12/11/2000', '1/11/2001', '2/11/2001',
'3/11/2001', '4/11/2001', '5/11/2001', '6/11/2001'
],
},
title: {
text: 'Social Media',
align: 'left',
style: {
fontSize: "16px",
color: '#666'
}
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
gradientToColors: ['#FDD835'],
shadeIntensity: 1,
type: 'horizontal',
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
},
},
markers: {
size: 4,
opacity: 0.9,
colors: ["#FFA41B"],
strokeColor: "#fff",
strokeWidth: 2,
hover: {
size: 7,
}
},
yaxis: {
min: -10,
max: 40,
title: {
text: 'Engagement',
},
}
},
series: [{
name: 'Likes',
data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/line-with-annotations.html 0 → 100644
+ 176
- 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 Line - React</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;line&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="../../assets/stock-prices.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 LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
annotations: {
yaxis: [{
y: 8200,
borderColor: '#00E396',
label: {
borderColor: '#00E396',
style: {
color: '#fff',
background: '#00E396',
},
text: 'Support',
}
}, {
y: 8600,
y2: 9000,
borderColor: '#FEB019',
opacity: 0.1,
label: {
borderColor: '#333',
style: {
fontSize: '10px',
color: '#333',
background: '#FEB019',
},
text: 'Y-axis range',
}
}],
xaxis: [{
x: new Date('23 Nov 2017').getTime(),
strokeDashArray: 0,
borderColor: '#775DD0',
label: {
borderColor: '#775DD0',
style: {
color: '#fff',
background: '#775DD0',
},
text: 'Anno Test',
}
}, {
x: new Date('26 Nov 2017').getTime(),
x2: new Date('28 Nov 2017').getTime(),
borderColor: '#B3F7CA',
opacity: 0.5,
label: {
borderColor: '#B3F7CA',
style: {
fontSize: '10px',
color: '#fff',
background: '#00E396',
},
offsetY: -10,
text: 'X-axis range',
}
}],
points: [{
x: new Date('01 Dec 2017').getTime(),
y: 8607.55,
marker: {
size: 8,
fillColor: '#fff',
strokeColor: 'red',
radius: 2,
cssClass: 'apexcharts-custom-class'
},
label: {
borderColor: '#FF4560',
offsetY: 0,
style: {
color: '#fff',
background: '#FF4560',
},
text: 'Point Annotation',
}
}]
},
chart: {
height: 350,
type: 'line',
id: 'areachart-2'
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
grid: {
padding: {
right: 30,
left: 20
}
},
title: {
text: 'Line with Annotations',
align: 'left'
},
labels: series.monthDataSeries1.dates,
xaxis: {
type: 'datetime',
}
},
series: [{
data: series.monthDataSeries1.prices
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/line-with-data-labels.html 0 → 100644
+ 136
- 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 Data Labels</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;line&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 LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
shadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 1
},
toolbar: {
show: false
}
},
colors: ['#77B6EA', '#545454'],
dataLabels: {
enabled: true,
},
stroke: {
curve: 'smooth'
},
title: {
text: 'Average High & Low Temperature',
align: 'left'
},
grid: {
borderColor: '#e7e7e7',
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
markers: {
size: 6
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
title: {
text: 'Month'
}
},
yaxis: {
title: {
text: 'Temperature'
},
min: 5,
max: 40
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
},
series: [
{
name: "High - 2013",
data: [28, 29, 33, 36, 32, 32, 33]
},
{
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/line-with-image.html 0 → 100644
+ 134
- 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="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;line&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 LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
stroke: {
width: 5,
curve: 'smooth'
},
colors: ['#2e93fa'],
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
}
},
series: [
{
name: 'Dataset 2',
data: [10, 5, 20, 13, 15, 12, 13, 24, 24, 34, 7, 15, 10, 9, 26]
}
],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/line-with-missing-data.html 0 → 100644
+ 96
- 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="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;line&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 LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
zoom: {
enabled: false
},
animations: {
enabled: false
}
},
stroke: {
width: [5, 5, 4],
curve: 'straight'
},
title: {
text: 'Missing data (null values)'
}
},
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]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/logarithmic-line.html 0 → 100644
+ 219
- 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="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;line&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">
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;
}
class LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
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
}
}
]
},
series: [{
name: "Logarithmic",
data: data
}, {
name: "Linear",
data: data
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/realtime.html 0 → 100644
+ 178
- 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>Dynamic Updating Line 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;line&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">
var lastDate = 0;
var data = []
function getDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
while (i < count) {
var x = baseval;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
data.push({
x,
y
});
lastDate = baseval
baseval += 86400000;
i++;
}
}
getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
min: 10,
max: 90
})
function getNewSeries(baseval, yrange) {
var newDate = baseval + 86400000;
lastDate = newDate
data.push({
x: newDate,
y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
})
}
function resetData() {
data = data.slice(data.length - 10, data.length);
}
class LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
id: 'realtime',
animations: {
enabled: true,
easing: 'linear',
dynamicAnimation: {
speed: 2000
}
},
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
title: {
text: 'Dynamic Updating Chart',
align: 'left'
},
markers: {
size: 0
},
xaxis: {
type: 'datetime',
range: 777600000,
},
yaxis: {
max: 100
},
legend: {
show: false
}
},
series: [{
data: data.slice()
}],
}
}
componentDidMount() {
this.intervals()
}
intervals () {
window.setInterval(() => {
getNewSeries(lastDate, {
min: 10,
max: 90
})
ApexCharts.exec('realtime', 'updateSeries', [{
data: data
}])
}, 2000)
// every 60 seconds, we reset the data
window.setInterval(() => {
resetData()
ApexCharts.exec('realtime', 'updateSeries', [{
data: data
}], false, true)
}, 60000)
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/stepline.html 0 → 100644
+ 93
- 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>Stepline - React</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;line&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 LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'stepline'
},
title: {
text: 'Stepline Chart',
align: 'left'
},
markers: {
hover: {
sizeOffset: 4
}
},
},
series: [{
data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/syncing-charts.html 0 → 100644
+ 185
- 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;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.1);
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;wrapper&quot;&gt;&#10; &lt;div id=&quot;chart-line&quot;&gt;&#10; &lt;ReactApexChart type=&quot;line&quot; height=&quot;160&quot; options={this.state.chartOptionsLine1} series={this.state.series1}/&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div id=&quot;chart-line2&quot;&gt;&#10; &lt;ReactApexChart type=&quot;line&quot; height=&quot;160&quot; options={this.state.chartOptionsLine2} series={this.state.series2}/&gt;&#10; &lt;/div&gt;&#10;&#10; &lt;div id=&quot;chart-area&quot;&gt;&#10; &lt;ReactApexChart type=&quot;area&quot; height=&quot;160&quot; options={this.state.chartOptionsArea} series={this.state.series3}/&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">
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;
}
// The global window.Apex variable below can be used to set common options for all charts on the page
Apex = {
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
toolbar: {
tools: {
selection: false
}
},
markers: {
size: 6,
hover: {
size: 10
}
},
tooltip: {
followCursor: false,
theme: 'dark',
x: {
show: false
},
marker: {
show: false
},
y: {
title: {
formatter: function () {
return ''
}
}
}
},
grid: {
clipMarkers: false
},
yaxis: {
tickAmount: 2
},
xaxis: {
type: 'datetime'
},
}
class LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series1: [{
data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
min: 10,
max: 60
})
}],
series2: [{
data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
min: 10,
max: 30
})
}],
series3: [{
data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
min: 10,
max: 90
})
}],
chartOptionsLine1: {
chart: {
id: 'fb',
group: 'social',
},
colors: ['#008FFB'],
},
chartOptionsLine2: {
chart: {
id: 'tw',
group: 'social',
},
colors: ['#546E7A'],
},
chartOptionsArea: {
chart: {
id: 'yt',
group: 'social',
},
colors: ['#00E396'],
}
}
}
render() {
return (
<div>
<div id="wrapper">
<div id="chart-line">
<ReactApexChart type="line" height="160" options={this.state.chartOptionsLine1} series={this.state.series1}/>
</div>
<div id="chart-line2">
<ReactApexChart type="line" height="160" options={this.state.chartOptionsLine2} series={this.state.series2}/>
</div>
<div id="chart-area">
<ReactApexChart type="area" height="160" options={this.state.chartOptionsArea} series={this.state.series3}/>
</div>
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/line/zoomable-timeseries.html 0 → 100644
+ 149
- 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>Zoomable TimeSeries</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;area&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="../../assets/irregular-data-series.js"></script>
<script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
<script type="text/babel">
var ts2 = 1484418600000;
var dates = [];
var spikes = [5, -5, 3, -3, 8, -8]
for (var i = 0; i < 120; i++) {
ts2 = ts2 + 86400000;
var innerArr = [ts2, dataSeries[1][i].value];
dates.push(innerArr)
}
class LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
stacked: false,
zoom: {
type: 'x',
enabled: true
},
toolbar: {
autoSelected: 'zoom'
}
},
plotOptions: {
line: {
curve: 'smooth',
}
},
dataLabels: {
enabled: false
},
markers: {
size: 0,
style: 'full',
},
//colors: ['#0165fc'],
title: {
text: 'Stock Price Movement',
align: 'left'
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 90, 100]
},
},
yaxis: {
min: 20000000,
max: 250000000,
labels: {
formatter: function (val) {
return (val / 1000000).toFixed(0);
},
},
title: {
text: 'Price'
},
},
xaxis: {
type: 'datetime',
},
tooltip: {
shared: false,
y: {
formatter: function (val) {
return (val / 1000000).toFixed(0)
}
}
}
},
series: [{
name: 'XYZ MOTORS',
data: dates
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="area" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(LineChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-area.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>Line, Column &amp; Area</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;line&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 MixedChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
stroke: {
curve: 'smooth'
},
fill: {
type: 'solid',
opacity: [0.35, 1],
},
labels: ['Dec 01', 'Dec 02', 'Dec 03', 'Dec 04', 'Dec 05', 'Dec 06', 'Dec 07', 'Dec 08', 'Dec 09 ',
'Dec 10', 'Dec 11'
],
markers: {
size: 0
},
yaxis: [{
title: {
text: 'Series A',
},
},
{
opposite: true,
title: {
text: 'Series B',
},
},
],
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
}
},
series: [{
name: 'TEAM A',
type: 'area',
data: [44, 55, 31, 47, 31, 43, 26, 41, 31, 47, 33]
}, {
name: 'TEAM B',
type: 'line',
data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(MixedChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-column-area.html 0 → 100644
+ 132
- 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, Column &amp; Area</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;line&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 MixedChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
stacked: false,
},
stroke: {
width: [0, 2, 5],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
fill: {
opacity: [0.85, 0.25, 1],
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100]
}
},
labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003', '08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'
],
markers: {
size: 0
},
xaxis: {
type: 'datetime'
},
yaxis: {
title: {
text: 'Points',
},
min: 0
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
}
},
series: [{
name: 'TEAM A',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'TEAM B',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}, {
name: 'TEAM C',
type: 'line',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(MixedChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-column.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>Line, Column &amp; Area</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;line&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 MixedChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
stroke: {
width: [0, 4]
},
title: {
text: 'Traffic Sources'
},
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'
],
xaxis: {
type: 'datetime'
},
yaxis: [{
title: {
text: 'Website Blog',
},
}, {
opposite: true,
title: {
text: 'Social Media'
}
}]
},
series: [{
name: 'Website Blog',
type: 'column',
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
}, {
name: 'Social Media',
type: 'line',
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(MixedChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/mixed/line-scatter.html 0 → 100644
+ 166
- 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 &amp; scatter</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;line&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 MixedChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
fill: {
type: 'solid',
},
markers: {
size: [6, 0]
},
tooltip: {
shared: false,
intersect: true,
},
legend: {
show: false
},
xaxis: {
type: 'numeric',
min: 0,
max: 12,
tickAmount: 12
}
},
series: [{
name: 'Points',
type: 'scatter',
data: [
{
x: 1,
y: 2.14
}, {
x: 1.2,
y: 2.19
}, {
x: 1.8,
y: 2.43
}, {
x: 2.3,
y: 3.8
}, {
x: 2.6,
y: 4.14
}, {
x: 2.9,
y: 5.4
}, {
x: 3.2,
y: 5.8
}, {
x: 3.8,
y: 6.04
}, {
x: 4.55,
y: 6.77
}, {
x: 4.9,
y: 8.1
}, {
x: 5.1,
y: 9.4
}, {
x: 7.1,
y: 7.14
}, {
x: 9.18,
y: 8.4
}]
}, {
name: 'Line',
type: 'line',
data: [{
x: 1,
y: 2
}, {
x: 2,
y: 3
}, {
x: 3,
y: 4
}, {
x: 4,
y: 5
}, {
x: 5,
y: 6
}, {
x: 6,
y: 7
}, {
x: 7,
y: 8
}, {
x: 8,
y: 9
}, {
x: 9,
y: 10
}, {
x: 10,
y: 11
}]
}]
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(MixedChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/mixed/multiple-yaxes.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>Multiple Y Axis Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
.apexcharts-tooltip-title {
display: none;
}
#chart .apexcharts-tooltip {
display: flex;
border: 0;
box-shadow: none;
}
</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;line&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 MixedChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
dataLabels: {
enabled: false
},
stroke: {
width: [1, 1, 4]
},
title: {
text: 'XYZ - Stock Analysis (2009 - 2016)',
align: 'left',
offsetX: 110
},
xaxis: {
categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
color: '#008FFB',
}
},
title: {
text: "Income (thousand crores)",
style: {
color: '#008FFB',
}
},
tooltip: {
enabled: true
}
},
{
seriesName: 'Income',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: "Operating Cashflow (thousand crores)",
style: {
color: '#00E396',
}
},
},
{
seriesName: 'Revenue',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#FEB019'
},
labels: {
style: {
color: '#FEB019',
},
},
title: {
text: "Revenue (thousand crores)",
style: {
color: '#FEB019',
}
}
},
],
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60
},
},
legend: {
horizontalAlign: 'left',
offsetX: 40
}
},
series: [{
name: 'Income',
type: 'column',
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
}, {
name: 'Cashflow',
type: 'column',
data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
}, {
name: 'Revenue',
type: 'line',
data: [20, 29, 37, 36, 44, 45, 50, 58]
}],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(MixedChart), domContainer);
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/react/pie/donut-update.html 0 → 100644
+ 158
- 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: 480px;
margin: 35px auto;
}
.actions {
margin-top: -80px;
text-align: center;
position: relative;
z-index: 10;
left: -60px;
}
button {
color: #fff;
background: #20b2aa;
padding: 5px 10px;
margin: 5px;
font-weight: bold;
font-size: 13px;
border-radius: 5px;
}
@media only screen and (max-width: 480px) {
.actions {
margin-top: 0;
left: 0
}
}
</style>
</head>
<body>
<div id="app"></div>
<div id="html">
&lt;div id=&quot;donut&quot;&gt;&#10; &lt;div className=&quot;chart-wrap&quot;&gt;&#10; &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;&#10; &lt;/div&gt;&#10; &lt;div className=&quot;actions&quot;&gt;&#10; &lt;button onClick={() =&gt; this.randomize()}&gt;RANDOMIZE&lt;/button&gt;&#10; &lt;button onClick={() =&gt; this.appendData()}&gt;ADD&lt;/button&gt;&#10; &lt;button onClick={() =&gt; this.removeData()}&gt;REMOVE&lt;/button&gt;&#10; &lt;button onClick={() =&gt; this.reset()}&gt;RESET&lt;/button&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 DonutChart extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230,
}
},
series: [44, 55, 13, 33],
}
}
appendData () {
var arr = this.state.series.slice()
arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1)
this.setState({
series: arr
})
}
removeData() {
if(this.state.series.length === 1) return
var arr = this.state.series.slice()
arr.pop()
this.setState({
series: arr
})
}
randomize() {
this.setState({
series: this.state.series.map(() => {
return Math.floor(Math.random() * (100 - 1 + 1)) + 1
})
})
}
reset() {
this.setState({
series: [44, 55, 13, 33]
})
}
render() {
return (
<div>
<div id="donut">
<div className="chart-wrap">
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="donut" width="380" />
</div>
</div>
<div className="actions">
<button onClick={() => this.randomize()}>RANDOMIZE</button>
<button onClick={() => this.appendData()}>ADD</button>
<button onClick={() => this.removeData()}>REMOVE</button>
<button onClick={() => this.reset()}>RESET</button>
</div>
</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/donut-with-pattern.html 0 → 100644
+ 121
- 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>Donut Chart with pattern</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: {
chart: {
dropShadow: {
enabled: true,
color: '#111',
top: -1,
left: 3,
blur: 3,
opacity: 0.2
}
},
stroke: {
width: 0,
},
labels: ["Comedy", "Action", "SciFi", "Drama", "Horror"],
dataLabels: {
dropShadow: {
blur: 3,
opacity: 0.8
}
},
fill: {
type: 'pattern',
opacity: 1,
pattern: {
enabled: true,
style: ['verticalLines', 'squares', 'horizontalLines', 'circles', 'slantedLines'],
},
},
states: {
hover: {
enabled: false
}
},
theme: {
palette: 'palette2'
},
title: {
text: "Favourite Movie Type"
},
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
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