123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208 |
- //Chart 1
- var options = {
- series: [{
- data: [20, 45, 40, 64, 35, 25, 35]
- }],
- chart: {
- type: 'area',
- height: 90,
- width: '100%',
- sparkline: {
- enabled: true
- }
- },
- stroke: {
- curve: 'smooth',
- width: 3,
- },
- colors: ['#52cc99'],
- fill: {
- type: 'gradient',
- gradient: {
- shadeIntensity: 1,
- inverseColors: false,
- opacityFrom: 0.45,
- opacityTo: 0.05,
- stops: [20, 100, 100, 100]
- },
- },
- tooltip: {
- fixed: {
- enabled: false
- },
- x: {
- show: false
- },
- y: {
- title: {
- formatter: function (seriesName) {
- return ''
- }
- }
- },
- marker: {
- show: false
- }
- }
- };
- var chart = new ApexCharts(document.querySelector("#chart-1"), options);
- chart.render();
- //chart 2
- var options = {
- series: [{
- data: [10, 25, 30, 54, 45, 39, 15]
- }],
- chart: {
- type: 'area',
- height: 90,
- width: '100%',
- sparkline: {
- enabled: true
- }
- },
- stroke: {
- curve: 'smooth',
- width: 3,
- },
- colors: ['#ff6647'],
- fill: {
- type: 'gradient',
- gradient: {
- shadeIntensity: 1,
- inverseColors: false,
- opacityFrom: 0.45,
- opacityTo: 0.05,
- stops: [20, 100, 100, 100]
- },
- },
- tooltip: {
- fixed: {
- enabled: false
- },
- x: {
- show: false
- },
- y: {
- title: {
- formatter: function (seriesName) {
- return ''
- }
- }
- },
- marker: {
- show: false
- }
- }
- };
- var chart = new ApexCharts(document.querySelector("#chart-2"), options);
- chart.render();
- //Chart 3
- var options = {
- series: [{
- data: [15, 20, 10, 45, 20, 10, 5]
- }],
- chart: {
- type: 'area',
- height: 90,
- width: '100%',
- sparkline: {
- enabled: true
- }
- },
- stroke: {
- curve: 'smooth',
- width: 3,
- },
- colors: ['#52cc99'],
- fill: {
- type: 'gradient',
- gradient: {
- shadeIntensity: 1,
- inverseColors: false,
- opacityFrom: 0.45,
- opacityTo: 0.05,
- stops: [20, 100, 100, 100]
- },
- },
- tooltip: {
- fixed: {
- enabled: false
- },
- x: {
- show: false
- },
- y: {
- title: {
- formatter: function (seriesName) {
- return ''
- }
- }
- },
- marker: {
- show: false
- }
- }
- };
- var chart = new ApexCharts(document.querySelector("#chart-3"), options);
- chart.render();
- //Chart 4
- var options = {
- series: [{
- data: [3, 5, 7, 11, 8, 5, 7]
- }],
- chart: {
- type: 'area',
- height: 90,
- width: '100%',
- sparkline: {
- enabled: true
- }
- },
- stroke: {
- curve: 'smooth',
- width: 3,
- },
- colors: ['#ff6647'],
- fill: {
- type: 'gradient',
- gradient: {
- shadeIntensity: 1,
- inverseColors: false,
- opacityFrom: 0.45,
- opacityTo: 0.05,
- stops: [20, 100, 100, 100]
- },
- },
- tooltip: {
- fixed: {
- enabled: false
- },
- x: {
- show: false
- },
- y: {
- title: {
- formatter: function (seriesName) {
- return ''
- }
- }
- },
- marker: {
- show: false
- }
- }
- };
- var chart = new ApexCharts(document.querySelector("#chart-4"), options);
- chart.render();
|