adding files of assets
This commit is contained in:
Arjun Patel
@@ -0,0 +1,843 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGeneralApexCharts = function () {
|
||||
// Shared variables
|
||||
|
||||
// Private functions
|
||||
var example1 = function () {
|
||||
var element = document.getElementById("kt_apexcharts_1");
|
||||
|
||||
var height = parseInt(KTUtil.css(element, 'height'));
|
||||
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
|
||||
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
|
||||
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
|
||||
var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
|
||||
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58, 43, 56, 65, 41, 55, 66]
|
||||
}, {
|
||||
name: 'Cost',
|
||||
data: [32, 34, 52, 46, 27, 60, 41, 49, 13, 11, 44, 33]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105, 87, 99, 75, 82, 91, 89]
|
||||
}],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'bar',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: ['40%'],
|
||||
endingShape: 'rounded'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px'
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$" + val + " thousands"
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [baseColor, dangerColor, secondaryColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(element, options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var example2 = function () {
|
||||
var element = document.getElementById("kt_apexcharts_2");
|
||||
|
||||
var height = parseInt(KTUtil.css(element, 'height'));
|
||||
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
|
||||
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
|
||||
var baseColor = KTUtil.getCssVariableValue('--bs-warning');
|
||||
var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105]
|
||||
}],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'bar',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: ['30%'],
|
||||
endingShape: 'rounded'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px'
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$" + val + " thousands"
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [baseColor, secondaryColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(element, options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var example3 = function () {
|
||||
var element = document.getElementById("kt_apexcharts_3");
|
||||
|
||||
var height = parseInt(KTUtil.css(element, 'height'));
|
||||
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
|
||||
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
|
||||
var baseColor = KTUtil.getCssVariableValue('--bs-info');
|
||||
var lightColor = KTUtil.getCssVariableValue('--bs-light-info');
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: [30, 40, 40, 90, 90, 70, 70]
|
||||
}],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor]
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px'
|
||||
}
|
||||
},
|
||||
crosshairs: {
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: baseColor,
|
||||
width: 1,
|
||||
dashArray: 3
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
formatter: undefined,
|
||||
offsetY: 0,
|
||||
style: {
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px'
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$" + val + " thousands"
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [lightColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
strokeColor: baseColor,
|
||||
strokeWidth: 3
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(element, options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var example4 = function () {
|
||||
var element = document.getElementById("kt_apexcharts_4");
|
||||
|
||||
var height = parseInt(KTUtil.css(element, 'height'));
|
||||
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
|
||||
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
|
||||
|
||||
var baseColor = KTUtil.getCssVariableValue('--bs-success');
|
||||
var baseLightColor = KTUtil.getCssVariableValue('--bs-light-success');
|
||||
var secondaryColor = KTUtil.getCssVariableValue('--bs-warning');
|
||||
var secondaryLightColor = KTUtil.getCssVariableValue('--bs-light-warning');
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: [60, 50, 80, 40, 100, 60]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: [70, 60, 110, 40, 50, 70]
|
||||
}],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px'
|
||||
}
|
||||
},
|
||||
crosshairs: {
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: labelColor,
|
||||
width: 1,
|
||||
dashArray: 3
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
formatter: undefined,
|
||||
offsetY: 0,
|
||||
style: {
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px'
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$" + val + " thousands"
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [baseColor, secondaryColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
colors: [baseLightColor, secondaryLightColor],
|
||||
strokeColor: [baseLightColor, secondaryLightColor],
|
||||
strokeWidth: 3
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(element, options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var example5 = function () {
|
||||
var element = document.getElementById("kt_apexcharts_5");
|
||||
|
||||
var height = parseInt(KTUtil.css(element, 'height'));
|
||||
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
|
||||
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
|
||||
|
||||
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
|
||||
var baseLightColor = KTUtil.getCssVariableValue('--bs-light-primary');
|
||||
var secondaryColor = KTUtil.getCssVariableValue('--bs-info');
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
type: 'bar',
|
||||
stacked: true,
|
||||
data: [40, 50, 65, 70, 50, 30]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
type: 'bar',
|
||||
stacked: true,
|
||||
data: [20, 20, 25, 30, 30, 20]
|
||||
}, {
|
||||
name: 'Expenses',
|
||||
type: 'area',
|
||||
data: [50, 80, 60, 90, 50, 70]
|
||||
}],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
stacked: true,
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
stacked: true,
|
||||
horizontal: false,
|
||||
endingShape: 'rounded',
|
||||
columnWidth: ['12%']
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
max: 120,
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px'
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$" + val + " thousands"
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [baseColor, secondaryColor, baseLightColor],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(element, options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var example6 = function () {
|
||||
var element = document.getElementById("kt_apexcharts_6");
|
||||
|
||||
var height = parseInt(KTUtil.css(element, 'height'));
|
||||
|
||||
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
|
||||
var baseLightColor = KTUtil.getCssVariableValue('--bs-success');
|
||||
var secondaryColor = KTUtil.getCssVariableValue('--bs-info');
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
var options = {
|
||||
series: [
|
||||
{
|
||||
name: 'Bob',
|
||||
data: [
|
||||
{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-08').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-02').getTime(),
|
||||
new Date('2019-03-05').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-07').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-03').getTime(),
|
||||
new Date('2019-03-09').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-08').getTime(),
|
||||
new Date('2019-03-11').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Validation',
|
||||
y: [
|
||||
new Date('2019-03-11').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-01').getTime(),
|
||||
new Date('2019-03-03').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Joe',
|
||||
data: [
|
||||
{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-02').getTime(),
|
||||
new Date('2019-03-05').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-06').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-03').getTime(),
|
||||
new Date('2019-03-07').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Deployment',
|
||||
y: [
|
||||
new Date('2019-03-20').getTime(),
|
||||
new Date('2019-03-22').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-10').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Dan',
|
||||
data: [
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-10').getTime(),
|
||||
new Date('2019-03-17').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Validation',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-09').getTime()
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'rangeBar',
|
||||
fontFamily: 'inherit',
|
||||
height: height,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: [baseColor, secondaryColor, baseLightColor],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '80%'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
stroke: {
|
||||
width: 1
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(element, options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
example1();
|
||||
example2();
|
||||
example3();
|
||||
example4();
|
||||
example5();
|
||||
example6();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTGeneralApexCharts.init();
|
||||
});
|
||||
@@ -0,0 +1,333 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGeneralChartJS = function () {
|
||||
// Randomizer function
|
||||
function getRandom(min = 1, max = 100) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
function generateRandomData(min = 1, max = 100, count = 10) {
|
||||
var arr = [];
|
||||
for (var i = 0; i < count; i++) {
|
||||
arr.push(getRandom(min, max));
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
// Private functions
|
||||
var example1 = function () {
|
||||
// Define chart element
|
||||
var ctx = document.getElementById('kt_chartjs_1');
|
||||
|
||||
// Define colors
|
||||
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
|
||||
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
|
||||
var successColor = KTUtil.getCssVariableValue('--bs-success');
|
||||
|
||||
// Define fonts
|
||||
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
|
||||
|
||||
// Chart labels
|
||||
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
|
||||
// Chart data
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Dataset 1',
|
||||
data: generateRandomData(1, 100, 12),
|
||||
backgroundColor: primaryColor,
|
||||
stack: 'Stack 0',
|
||||
},
|
||||
{
|
||||
label: 'Dataset 2',
|
||||
data: generateRandomData(1, 100, 12),
|
||||
backgroundColor: dangerColor,
|
||||
stack: 'Stack 1',
|
||||
},
|
||||
{
|
||||
label: 'Dataset 3',
|
||||
data: generateRandomData(1, 100, 12),
|
||||
backgroundColor: successColor,
|
||||
stack: 'Stack 2',
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
// Chart config
|
||||
const config = {
|
||||
type: 'bar',
|
||||
data: data,
|
||||
options: {
|
||||
plugins: {
|
||||
title: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
},
|
||||
y: {
|
||||
stacked: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
|
||||
var myChart = new Chart(ctx, config);
|
||||
}
|
||||
|
||||
var example2 = function () {
|
||||
// Define chart element
|
||||
var ctx = document.getElementById('kt_chartjs_2');
|
||||
|
||||
// Define colors
|
||||
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
|
||||
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
|
||||
var successColor = KTUtil.getCssVariableValue('--bs-success');
|
||||
|
||||
// Define fonts
|
||||
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
|
||||
|
||||
// Chart labels
|
||||
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
|
||||
// Chart data
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Dataset 1',
|
||||
data: generateRandomData(1, 50, 7),
|
||||
borderColor: primaryColor,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
{
|
||||
label: 'Dataset 2',
|
||||
data: generateRandomData(1, 50, 7),
|
||||
borderColor: dangerColor,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
// Chart config
|
||||
const config = {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
plugins: {
|
||||
title: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
}
|
||||
};
|
||||
|
||||
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
|
||||
var myChart = new Chart(ctx, config);
|
||||
}
|
||||
|
||||
var example3 = function () {
|
||||
// Define chart element
|
||||
var ctx = document.getElementById('kt_chartjs_3');
|
||||
|
||||
// Define colors
|
||||
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
|
||||
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
|
||||
var successColor = KTUtil.getCssVariableValue('--bs-success');
|
||||
var warningColor = KTUtil.getCssVariableValue('--bs-warning');
|
||||
var infoColor = KTUtil.getCssVariableValue('--bs-info');
|
||||
|
||||
// Chart labels
|
||||
const labels = ['January', 'February', 'March', 'April', 'May'];
|
||||
|
||||
// Chart data
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Dataset 1',
|
||||
data: generateRandomData(1, 100, 5),
|
||||
backgroundColor: [primaryColor, dangerColor, successColor, warningColor, infoColor]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
// Chart config
|
||||
const config = {
|
||||
type: 'pie',
|
||||
data: data,
|
||||
options: {
|
||||
plugins: {
|
||||
title: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
}
|
||||
};
|
||||
|
||||
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
|
||||
var myChart = new Chart(ctx, config);
|
||||
}
|
||||
|
||||
var example4 = function () {
|
||||
// Define chart element
|
||||
var ctx = document.getElementById('kt_chartjs_4');
|
||||
|
||||
// Define colors
|
||||
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
|
||||
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
|
||||
var dangerLightColor = KTUtil.getCssVariableValue('--bs-light-danger');
|
||||
|
||||
// Define fonts
|
||||
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
|
||||
|
||||
// Chart labels
|
||||
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
|
||||
// Chart data
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Dataset 1',
|
||||
data: generateRandomData(50, 100, 12),
|
||||
borderColor: primaryColor,
|
||||
backgroundColor: 'transparent',
|
||||
stack: 'combined'
|
||||
},
|
||||
{
|
||||
label: 'Dataset 2',
|
||||
data: generateRandomData(1, 60, 12),
|
||||
backgroundColor: dangerColor,
|
||||
borderColor: dangerColor,
|
||||
stack: 'combined',
|
||||
type: 'bar'
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
// Chart config
|
||||
const config = {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
plugins: {
|
||||
title: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
stacked: true
|
||||
}
|
||||
}
|
||||
},
|
||||
defaults: {
|
||||
font: {
|
||||
family: 'inherit',
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
|
||||
var myChart = new Chart(ctx, config);
|
||||
}
|
||||
|
||||
var example5 = function () {
|
||||
// Define chart element
|
||||
var ctx = document.getElementById('kt_chartjs_5');
|
||||
|
||||
// Define colors
|
||||
var infoColor = KTUtil.getCssVariableValue('--bs-info');
|
||||
var infoLightColor = KTUtil.getCssVariableValue('--bs-light-info');
|
||||
var warningColor = KTUtil.getCssVariableValue('--bs-warning');
|
||||
var warningLightColor = KTUtil.getCssVariableValue('--bs-light-warning');
|
||||
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
|
||||
var primaryLightColor = KTUtil.getCssVariableValue('--bs-light-primary');
|
||||
|
||||
// Define fonts
|
||||
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
|
||||
|
||||
// Chart labels
|
||||
const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
|
||||
|
||||
// Chart data
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Dataset 1',
|
||||
data: generateRandomData(20, 80, 6),
|
||||
borderColor: infoColor,
|
||||
backgroundColor: infoLightColor,
|
||||
},
|
||||
{
|
||||
label: 'Dataset 2',
|
||||
data: generateRandomData(10, 60, 6),
|
||||
backgroundColor: warningLightColor,
|
||||
borderColor: warningColor,
|
||||
},
|
||||
{
|
||||
label: 'Dataset 3',
|
||||
data: generateRandomData(0, 80, 6),
|
||||
backgroundColor: primaryLightColor,
|
||||
borderColor: primaryColor,
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
// Chart config
|
||||
const config = {
|
||||
type: 'radar',
|
||||
data: data,
|
||||
options: {
|
||||
plugins: {
|
||||
title: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
}
|
||||
};
|
||||
|
||||
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
|
||||
var myChart = new Chart(ctx, config);
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
// Global font settings: https://www.chartjs.org/docs/latest/general/fonts.html
|
||||
Chart.defaults.font.size = 13;
|
||||
Chart.defaults.font.family = KTUtil.getCssVariableValue('--bs-font-sans-serif');
|
||||
|
||||
example1();
|
||||
example2();
|
||||
example3();
|
||||
example4();
|
||||
example5();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTGeneralChartJS.init();
|
||||
});
|
||||
@@ -0,0 +1,179 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTFlotDemoAxis = function () {
|
||||
// Private functions
|
||||
var exampleAxis = function () {
|
||||
function randValue() {
|
||||
return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
|
||||
}
|
||||
var pageviews = [
|
||||
[1, randValue()],
|
||||
[2, randValue()],
|
||||
[3, 2 + randValue()],
|
||||
[4, 3 + randValue()],
|
||||
[5, 5 + randValue()],
|
||||
[6, 10 + randValue()],
|
||||
[7, 15 + randValue()],
|
||||
[8, 20 + randValue()],
|
||||
[9, 25 + randValue()],
|
||||
[10, 30 + randValue()],
|
||||
[11, 35 + randValue()],
|
||||
[12, 25 + randValue()],
|
||||
[13, 15 + randValue()],
|
||||
[14, 20 + randValue()],
|
||||
[15, 45 + randValue()],
|
||||
[16, 50 + randValue()],
|
||||
[17, 65 + randValue()],
|
||||
[18, 70 + randValue()],
|
||||
[19, 85 + randValue()],
|
||||
[20, 80 + randValue()],
|
||||
[21, 75 + randValue()],
|
||||
[22, 80 + randValue()],
|
||||
[23, 75 + randValue()],
|
||||
[24, 70 + randValue()],
|
||||
[25, 65 + randValue()],
|
||||
[26, 75 + randValue()],
|
||||
[27, 80 + randValue()],
|
||||
[28, 85 + randValue()],
|
||||
[29, 90 + randValue()],
|
||||
[30, 95 + randValue()]
|
||||
];
|
||||
var visitors = [
|
||||
[1, randValue() - 5],
|
||||
[2, randValue() - 5],
|
||||
[3, randValue() - 5],
|
||||
[4, 6 + randValue()],
|
||||
[5, 5 + randValue()],
|
||||
[6, 20 + randValue()],
|
||||
[7, 25 + randValue()],
|
||||
[8, 36 + randValue()],
|
||||
[9, 26 + randValue()],
|
||||
[10, 38 + randValue()],
|
||||
[11, 39 + randValue()],
|
||||
[12, 50 + randValue()],
|
||||
[13, 51 + randValue()],
|
||||
[14, 12 + randValue()],
|
||||
[15, 13 + randValue()],
|
||||
[16, 14 + randValue()],
|
||||
[17, 15 + randValue()],
|
||||
[18, 15 + randValue()],
|
||||
[19, 16 + randValue()],
|
||||
[20, 17 + randValue()],
|
||||
[21, 18 + randValue()],
|
||||
[22, 19 + randValue()],
|
||||
[23, 20 + randValue()],
|
||||
[24, 21 + randValue()],
|
||||
[25, 14 + randValue()],
|
||||
[26, 24 + randValue()],
|
||||
[27, 25 + randValue()],
|
||||
[28, 26 + randValue()],
|
||||
[29, 27 + randValue()],
|
||||
[30, 31 + randValue()]
|
||||
];
|
||||
|
||||
var plot = $.plot($("#kt_docs_flot_axis"), [{
|
||||
data: pageviews,
|
||||
label: "Unique Visits",
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
|
||||
}, {
|
||||
data: visitors,
|
||||
label: "Page Views",
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
}], {
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2,
|
||||
fill: true,
|
||||
fillColor: {
|
||||
colors: [{
|
||||
opacity: 0.05
|
||||
}, {
|
||||
opacity: 0.01
|
||||
}]
|
||||
}
|
||||
},
|
||||
points: {
|
||||
show: true,
|
||||
radius: 3,
|
||||
lineWidth: 1
|
||||
},
|
||||
shadowSize: 2
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
borderWidth: 1
|
||||
},
|
||||
colors: [KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-danger')],
|
||||
xaxis: {
|
||||
ticks: 11,
|
||||
tickDecimals: 0,
|
||||
tickColor: KTUtil.getCssVariableValue('--bs-active-dark'),
|
||||
},
|
||||
yaxis: {
|
||||
ticks: 11,
|
||||
tickDecimals: 0,
|
||||
tickColor: KTUtil.getCssVariableValue('--bs-active-dark'),
|
||||
}
|
||||
});
|
||||
|
||||
function showTooltip(x, y, contents) {
|
||||
$('<div id="tooltip">' + contents + '</div>').css({
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
top: y + 5,
|
||||
left: x + 15,
|
||||
border: '1px solid ' + KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
padding: '4px',
|
||||
color: + KTUtil.getCssVariableValue('--bs-active-dark'),
|
||||
'border-radius': '3px',
|
||||
'background-color': + KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
opacity: 0.80
|
||||
}).appendTo("body").fadeIn(200);
|
||||
}
|
||||
|
||||
var previousPoint = null;
|
||||
$("#chart_2").bind("plothover", function(event, pos, item) {
|
||||
$("#x").text(pos.x.toFixed(2));
|
||||
$("#y").text(pos.y.toFixed(2));
|
||||
|
||||
if (item) {
|
||||
if (previousPoint != item.dataIndex) {
|
||||
previousPoint = item.dataIndex;
|
||||
|
||||
$("#tooltip").remove();
|
||||
var x = item.datapoint[0].toFixed(2),
|
||||
y = item.datapoint[1].toFixed(2);
|
||||
|
||||
showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
|
||||
}
|
||||
} else {
|
||||
$("#tooltip").remove();
|
||||
previousPoint = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleAxis();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTFlotDemoAxis.init();
|
||||
});
|
||||
@@ -0,0 +1,56 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTFlotDemoBar = function () {
|
||||
// Private functions
|
||||
var exampleBar = function () {
|
||||
// horizontal bar chart:
|
||||
var data1 = [
|
||||
[10, 10],
|
||||
[20, 20],
|
||||
[30, 30],
|
||||
[40, 40],
|
||||
[50, 50],
|
||||
[60, 60],
|
||||
[70, 70],
|
||||
[80, 80],
|
||||
[90, 90],
|
||||
[100, 100],
|
||||
];
|
||||
|
||||
var options = {
|
||||
colors: [KTUtil.getCssVariableValue('--bs-active-primary')],
|
||||
series: {
|
||||
bars: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
bars: {
|
||||
horizontal: true,
|
||||
barWidth: 6,
|
||||
lineWidth: 0, // in pixels
|
||||
shadowSize: 0,
|
||||
align: 'left'
|
||||
},
|
||||
grid: {
|
||||
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
borderWidth: 1
|
||||
}
|
||||
};
|
||||
|
||||
$.plot($("#kt_docs_flot_bar"), [data1], options);
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleBar();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTFlotDemoBar.init();
|
||||
});
|
||||
@@ -0,0 +1,109 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTFlotDemoBasic = function () {
|
||||
// Private functions
|
||||
var exampleBasic = function () {
|
||||
var data = [];
|
||||
var totalPoints = 250;
|
||||
|
||||
// random data generator for plot charts
|
||||
|
||||
function getRandomData() {
|
||||
if (data.length > 0) data = data.slice(1);
|
||||
// do a random walk
|
||||
while (data.length < totalPoints) {
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50;
|
||||
var y = prev + Math.random() * 10 - 5;
|
||||
if (y < 0) y = 0;
|
||||
if (y > 100) y = 100;
|
||||
data.push(y);
|
||||
}
|
||||
// zip the generated y values with the x values
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
res.push([i, data[i]]);
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
var d1 = [];
|
||||
for (var i = 0; i < Math.PI * 2; i += 0.25)
|
||||
d1.push([i, Math.sin(i)]);
|
||||
|
||||
var d2 = [];
|
||||
for (var i = 0; i < Math.PI * 2; i += 0.25)
|
||||
d2.push([i, Math.cos(i)]);
|
||||
|
||||
var d3 = [];
|
||||
for (var i = 0; i < Math.PI * 2; i += 0.1)
|
||||
d3.push([i, Math.tan(i)]);
|
||||
|
||||
$.plot($("#kt_docs_flot_basic"), [{
|
||||
label: "sin(x)",
|
||||
data: d1,
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
}, {
|
||||
label: "cos(x)",
|
||||
data: d2,
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
}, {
|
||||
label: "tan(x)",
|
||||
data: d3,
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
}], {
|
||||
colors: [KTUtil.getCssVariableValue('--bs-active-success'), KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-danger')],
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
points: {
|
||||
show: true,
|
||||
fill: true,
|
||||
radius: 3,
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
ticks: [0, [Math.PI / 2, "\u03c0/2"],
|
||||
[Math.PI, "\u03c0"],
|
||||
[Math.PI * 3 / 2, "3\u03c0/2"],
|
||||
[Math.PI * 2, "2\u03c0"]
|
||||
]
|
||||
},
|
||||
yaxis: {
|
||||
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
ticks: 10,
|
||||
min: -2,
|
||||
max: 2
|
||||
},
|
||||
grid: {
|
||||
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
borderWidth: 1
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleBasic();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTFlotDemoBasic.init();
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTFlotDemoDynamic = function () {
|
||||
// Private functions
|
||||
var exampleDynamic = function () {
|
||||
var data = [];
|
||||
var totalPoints = 250;
|
||||
|
||||
// random data generator for plot charts
|
||||
|
||||
function getRandomData() {
|
||||
if (data.length > 0) data = data.slice(1);
|
||||
// do a random walk
|
||||
while (data.length < totalPoints) {
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50;
|
||||
var y = prev + Math.random() * 10 - 5;
|
||||
if (y < 0) y = 0;
|
||||
if (y > 100) y = 100;
|
||||
data.push(y);
|
||||
}
|
||||
// zip the generated y values with the x values
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
res.push([i, data[i]]);
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
//server load
|
||||
var options = {
|
||||
colors: [KTUtil.getCssVariableValue('--bs-active-danger'), KTUtil.getCssVariableValue('--bs-active-primary')],
|
||||
series: {
|
||||
shadowSize: 1
|
||||
},
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 0.5,
|
||||
fill: true,
|
||||
fillColor: {
|
||||
colors: [{
|
||||
opacity: 0.1
|
||||
}, {
|
||||
opacity: 1
|
||||
}]
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
tickFormatter: function(v) {
|
||||
return v + "%";
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
show: false,
|
||||
},
|
||||
colors: [KTUtil.getCssVariableValue('--bs-active-primary')],
|
||||
grid: {
|
||||
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
borderWidth: 0,
|
||||
}
|
||||
};
|
||||
|
||||
var updateInterval = 30;
|
||||
var plot = $.plot($("#kt_docs_flot_dynamic"), [getRandomData()], options);
|
||||
|
||||
function update() {
|
||||
plot.setData([getRandomData()]);
|
||||
plot.draw();
|
||||
setTimeout(update, updateInterval);
|
||||
}
|
||||
|
||||
update();
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleDynamic();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTFlotDemoDynamic.init();
|
||||
});
|
||||
@@ -0,0 +1,34 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTFlotDemoPie = function () {
|
||||
// Private functions
|
||||
var examplePie = function () {
|
||||
var data = [
|
||||
{ label: "CSS", data: 10, color: KTUtil.getCssVariableValue('--bs-active-primary') },
|
||||
{ label: "HTML5", data: 40, color: KTUtil.getCssVariableValue('--bs-active-success') },
|
||||
{ label: "PHP", data: 30, color: KTUtil.getCssVariableValue('--bs-active-danger') },
|
||||
{ label: "Angular", data: 20, color: KTUtil.getCssVariableValue('--bs-active-warning') }
|
||||
];
|
||||
|
||||
$.plot($("#kt_docs_flot_pie"), data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
examplePie();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTFlotDemoPie.init();
|
||||
});
|
||||
@@ -0,0 +1,103 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTFlotDemoStack = function () {
|
||||
// Private functions
|
||||
var exampleStack = function () {
|
||||
var d1 = [];
|
||||
for (var i = 0; i <= 10; i += 1)
|
||||
d1.push([i, parseInt(Math.random() * 30)]);
|
||||
|
||||
var d2 = [];
|
||||
for (var i = 0; i <= 10; i += 1)
|
||||
d2.push([i, parseInt(Math.random() * 30)]);
|
||||
|
||||
var d3 = [];
|
||||
for (var i = 0; i <= 10; i += 1)
|
||||
d3.push([i, parseInt(Math.random() * 30)]);
|
||||
|
||||
var stack = 0,
|
||||
bars = true,
|
||||
lines = false,
|
||||
steps = false;
|
||||
|
||||
function plotWithOptions() {
|
||||
$.plot($("#kt_docs_flot_stack"),
|
||||
|
||||
[{
|
||||
label: "sales",
|
||||
data: d1,
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
}, {
|
||||
label: "tax",
|
||||
data: d2,
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
}, {
|
||||
label: "profit",
|
||||
data: d3,
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
}], {
|
||||
colors: [KTUtil.getCssVariableValue('--bs-active-danger'), KTUtil.getCssVariableValue('--bs-active-primary')],
|
||||
series: {
|
||||
stack: stack,
|
||||
lines: {
|
||||
show: lines,
|
||||
fill: true,
|
||||
steps: steps,
|
||||
lineWidth: 0, // in pixels
|
||||
},
|
||||
bars: {
|
||||
show: bars,
|
||||
barWidth: 0.5,
|
||||
lineWidth: 0, // in pixels
|
||||
shadowSize: 0,
|
||||
align: 'center'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
borderWidth: 1
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
$(".stackControls input").click(function(e) {
|
||||
e.preventDefault();
|
||||
stack = $(this).val() == "With stacking" ? true : null;
|
||||
plotWithOptions();
|
||||
});
|
||||
|
||||
$(".graphControls input").click(function(e) {
|
||||
e.preventDefault();
|
||||
bars = $(this).val().indexOf("Bars") != -1;
|
||||
lines = $(this).val().indexOf("Lines") != -1;
|
||||
steps = $(this).val().indexOf("steps") != -1;
|
||||
plotWithOptions();
|
||||
});
|
||||
|
||||
plotWithOptions();
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleStack();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTFlotDemoStack.init();
|
||||
});
|
||||
@@ -0,0 +1,105 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTFlotDemoTracking = function () {
|
||||
// Private functions
|
||||
var exampleTracking = function () {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
for (var i = 0; i < 14; i += 0.1) {
|
||||
sin.push([i, Math.sin(i)]);
|
||||
cos.push([i, Math.cos(i)]);
|
||||
}
|
||||
|
||||
var plot = $.plot($("#kt_docs_flot_tracking"), [{
|
||||
data: sin,
|
||||
label: "sin(x) = -0.00",
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
}, {
|
||||
data: cos,
|
||||
label: "cos(x) = -0.00",
|
||||
lines: {
|
||||
lineWidth: 1,
|
||||
},
|
||||
shadowSize: 0
|
||||
}], {
|
||||
colors: [KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-warning')],
|
||||
series: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
crosshair: {
|
||||
mode: "x"
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
autoHighlight: false,
|
||||
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
|
||||
borderWidth: 1
|
||||
},
|
||||
yaxis: {
|
||||
min: -1.2,
|
||||
max: 1.2
|
||||
}
|
||||
});
|
||||
|
||||
var legends = $("#kt_docs_flot_tracking .legendLabel");
|
||||
legends.each(function() {
|
||||
// fix the widths so they don't jump around
|
||||
$(this).css('width', $(this).width());
|
||||
});
|
||||
|
||||
var updateLegendTimeout = null;
|
||||
var latestPosition = null;
|
||||
|
||||
function updateLegend() {
|
||||
updateLegendTimeout = null;
|
||||
|
||||
var pos = latestPosition;
|
||||
|
||||
var axes = plot.getAxes();
|
||||
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) return;
|
||||
|
||||
var i, j, dataset = plot.getData();
|
||||
for (i = 0; i < dataset.length; ++i) {
|
||||
var series = dataset[i];
|
||||
|
||||
// find the nearest points, x-wise
|
||||
for (j = 0; j < series.data.length; ++j)
|
||||
if (series.data[j][0] > pos.x) break;
|
||||
|
||||
// now interpolate
|
||||
var y, p1 = series.data[j - 1],
|
||||
p2 = series.data[j];
|
||||
|
||||
if (p1 == null) y = p2[1];
|
||||
else if (p2 == null) y = p1[1];
|
||||
else y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
|
||||
|
||||
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
|
||||
}
|
||||
}
|
||||
|
||||
$("#kt_docs_flot_tracking").bind("plothover", function(event, pos, item) {
|
||||
latestPosition = pos;
|
||||
if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleTracking();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTFlotDemoTracking.init();
|
||||
});
|
||||
@@ -0,0 +1,95 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGoogleChartColumnDemo = function () {
|
||||
// Private functions
|
||||
var exampleColumn = function () {
|
||||
// GOOGLE CHARTS INIT
|
||||
google.load('visualization', '1', {
|
||||
packages: ['corechart', 'bar', 'line']
|
||||
});
|
||||
|
||||
google.setOnLoadCallback(function () {
|
||||
// COLUMN CHART
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('timeofday', 'Time of Day');
|
||||
data.addColumn('number', 'Motivation Level');
|
||||
data.addColumn('number', 'Energy Level');
|
||||
|
||||
data.addRows([
|
||||
[{
|
||||
v: [8, 0, 0],
|
||||
f: '8 am'
|
||||
}, 1, .25],
|
||||
[{
|
||||
v: [9, 0, 0],
|
||||
f: '9 am'
|
||||
}, 2, .5],
|
||||
[{
|
||||
v: [10, 0, 0],
|
||||
f: '10 am'
|
||||
}, 3, 1],
|
||||
[{
|
||||
v: [11, 0, 0],
|
||||
f: '11 am'
|
||||
}, 4, 2.25],
|
||||
[{
|
||||
v: [12, 0, 0],
|
||||
f: '12 pm'
|
||||
}, 5, 2.25],
|
||||
[{
|
||||
v: [13, 0, 0],
|
||||
f: '1 pm'
|
||||
}, 6, 3],
|
||||
[{
|
||||
v: [14, 0, 0],
|
||||
f: '2 pm'
|
||||
}, 7, 4],
|
||||
[{
|
||||
v: [15, 0, 0],
|
||||
f: '3 pm'
|
||||
}, 8, 5.25],
|
||||
[{
|
||||
v: [16, 0, 0],
|
||||
f: '4 pm'
|
||||
}, 9, 7.5],
|
||||
[{
|
||||
v: [17, 0, 0],
|
||||
f: '5 pm'
|
||||
}, 10, 10],
|
||||
]);
|
||||
|
||||
var options = {
|
||||
title: 'Motivation and Energy Level Throughout the Day',
|
||||
focusTarget: 'category',
|
||||
hAxis: {
|
||||
title: 'Time of Day',
|
||||
format: 'h:mm a',
|
||||
viewWindow: {
|
||||
min: [7, 30, 0],
|
||||
max: [17, 30, 0]
|
||||
},
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Rating (scale of 1-10)'
|
||||
},
|
||||
colors: ['#6e4ff5', '#fe3995']
|
||||
};
|
||||
|
||||
var chart = new google.visualization.ColumnChart(document.getElementById('kt_docs_google_chart_column'));
|
||||
chart.draw(data, options);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleColumn();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTGoogleChartColumnDemo.init();
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGoogleChartLineDemo = function () {
|
||||
// Private functions
|
||||
var exampleLine = function () {
|
||||
// GOOGLE CHARTS INIT
|
||||
google.load('visualization', '1', {
|
||||
packages: ['corechart', 'bar', 'line']
|
||||
});
|
||||
|
||||
google.setOnLoadCallback(function () {
|
||||
// LINE CHART
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('number', 'Day');
|
||||
data.addColumn('number', 'Guardians of the Galaxy');
|
||||
data.addColumn('number', 'The Avengers');
|
||||
data.addColumn('number', 'Transformers: Age of Extinction');
|
||||
|
||||
data.addRows([
|
||||
[1, 37.8, 80.8, 41.8],
|
||||
[2, 30.9, 69.5, 32.4],
|
||||
[3, 25.4, 57, 25.7],
|
||||
[4, 11.7, 18.8, 10.5],
|
||||
[5, 11.9, 17.6, 10.4],
|
||||
[6, 8.8, 13.6, 7.7],
|
||||
[7, 7.6, 12.3, 9.6],
|
||||
[8, 12.3, 29.2, 10.6],
|
||||
[9, 16.9, 42.9, 14.8],
|
||||
[10, 12.8, 30.9, 11.6],
|
||||
[11, 5.3, 7.9, 4.7],
|
||||
[12, 6.6, 8.4, 5.2],
|
||||
[13, 4.8, 6.3, 3.6],
|
||||
[14, 4.2, 6.2, 3.4]
|
||||
]);
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
title: 'Box Office Earnings in First Two Weeks of Opening',
|
||||
subtitle: 'in millions of dollars (USD)'
|
||||
},
|
||||
colors: ['#6e4ff5', '#f6aa33', '#fe3995']
|
||||
};
|
||||
|
||||
var chart = new google.charts.Line(document.getElementById('kt_docs_google_chart_line'));
|
||||
chart.draw(data, options);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleLine();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTGoogleChartLineDemo.init();
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGoogleChartPieDemo = function () {
|
||||
// Private functions
|
||||
var examplePie = function () {
|
||||
// GOOGLE CHARTS INIT
|
||||
google.load('visualization', '1', {
|
||||
packages: ['corechart', 'bar', 'line']
|
||||
});
|
||||
|
||||
google.setOnLoadCallback(function () {
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Task', 'Hours per Day'],
|
||||
['Work', 11],
|
||||
['Eat', 2],
|
||||
['Commute', 2],
|
||||
['Watch TV', 2],
|
||||
['Sleep', 7]
|
||||
]);
|
||||
|
||||
var options = {
|
||||
title: 'My Daily Activities',
|
||||
colors: ['#fe3995', '#f6aa33', '#6e4ff5', '#2abe81', '#c7d2e7', '#593ae1']
|
||||
};
|
||||
|
||||
var chart = new google.visualization.PieChart(document.getElementById('kt_docs_google_chart_pie'));
|
||||
chart.draw(data, options);
|
||||
|
||||
// Example of a doughnut chart
|
||||
// var options = {
|
||||
// pieHole: 0.4,
|
||||
// colors: ['#fe3995', '#f6aa33', '#6e4ff5', '#2abe81', '#c7d2e7', '#593ae1']
|
||||
// };
|
||||
|
||||
// var chart = new google.visualization.PieChart(document.getElementById('kt_docs_google_chart_pie'));
|
||||
// chart.draw(data, options);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
examplePie();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTGoogleChartPieDemo.init();
|
||||
});
|
||||
Reference in New Issue
Block a user