arifal/CKB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first initial

Browse Source
This commit is contained in:
arifal
2025-05-27 19:09:17 +07:00
commit 80375d8af3
1587 changed files with 572586 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2392
public/assets/js/demo1/pages/components/charts/amcharts/charts.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
public/assets/js/demo1/pages/components/charts/amcharts/charts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1024
public/assets/js/demo1/pages/components/charts/amcharts/maps.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
public/assets/js/demo1/pages/components/charts/amcharts/maps.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

784
public/assets/js/demo1/pages/components/charts/amcharts/stock-charts.js Normal file
View File

@@ -0,0 +1,784 @@
"use strict";
// Class definition
var KTamChartsStockChartsDemo = function() {
// Private functions
var demo1 = function() {
var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
var chartData4 = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
var a3 = Math.round(Math.random() * (100 + i)) + 200;
var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
chartData1.push({
"date": newDate,
"value": a1,
"volume": b1
});
chartData2.push({
"date": newDate,
"value": a2,
"volume": b2
});
chartData3.push({
"date": newDate,
"value": a3,
"volume": b3
});
chartData4.push({
"date": newDate,
"value": a4,
"volume": b4
});
}
}
var chart = AmCharts.makeChart("kt_amcharts_1", {
"rtl": KTUtil.isRTL(),
"type": "stock",
"theme": "light",
"dataSets": [{
"title": "first data set",
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
}],
"dataProvider": chartData1,
"categoryField": "date"
}, {
"title": "second data set",
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
}],
"dataProvider": chartData2,
"categoryField": "date"
}, {
"title": "third data set",
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
}],
"dataProvider": chartData3,
"categoryField": "date"
}, {
"title": "fourth data set",
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
}],
"dataProvider": chartData4,
"categoryField": "date"
}],
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
}],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
}, {
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [{
"valueField": "volume",
"type": "column",
"showBalloon": false,
"fillAlphas": 1
}],
"stockLegend": {
"periodValueTextRegular": "[[value.close]]"
}
}],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "left",
"periods": [{
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"dataSetSelector": {
"position": "left"
},
"export": {
"enabled": true
}
});
}
var demo2 = function() {
var chartData = [];
generateChartData();
function generateChartData() {
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
var b = Math.round(Math.random() * 100000000);
chartData.push({
"date": newDate,
"value": a,
"volume": b
});
}
}
var chart = AmCharts.makeChart("kt_amcharts_2", {
"type": "stock",
"theme": "light",
"dataSets": [{
"color": "#b0de09",
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
}],
"dataProvider": chartData,
"categoryField": "date",
// EVENTS
"stockEvents": [{
"date": new Date(2010, 8, 19),
"type": "sign",
"backgroundColor": "#85CDE6",
"graph": "g1",
"text": "S",
"description": "This is description of an event"
}, {
"date": new Date(2010, 10, 19),
"type": "flag",
"backgroundColor": "#FFFFFF",
"backgroundAlpha": 0.5,
"graph": "g1",
"text": "F",
"description": "Some longer\ntext can also\n be added"
}, {
"date": new Date(2010, 11, 10),
"showOnAxis": true,
"backgroundColor": "#85CDE6",
"type": "pin",
"text": "X",
"graph": "g1",
"description": "This is description of an event"
}, {
"date": new Date(2010, 11, 26),
"showOnAxis": true,
"backgroundColor": "#85CDE6",
"type": "pin",
"text": "Z",
"graph": "g1",
"description": "This is description of an event"
}, {
"date": new Date(2011, 0, 3),
"type": "sign",
"backgroundColor": "#85CDE6",
"graph": "g1",
"text": "U",
"description": "This is description of an event"
}, {
"date": new Date(2011, 1, 6),
"type": "sign",
"graph": "g1",
"text": "D",
"description": "This is description of an event"
}, {
"date": new Date(2011, 3, 5),
"type": "sign",
"graph": "g1",
"text": "L",
"description": "This is description of an event"
}, {
"date": new Date(2011, 3, 5),
"type": "sign",
"graph": "g1",
"text": "R",
"description": "This is description of an event"
}, {
"date": new Date(2011, 5, 15),
"type": "arrowUp",
"backgroundColor": "#00CC00",
"graph": "g1",
"description": "This is description of an event"
}, {
"date": new Date(2011, 6, 25),
"type": "arrowDown",
"backgroundColor": "#CC0000",
"graph": "g1",
"description": "This is description of an event"
}, {
"date": new Date(2011, 8, 1),
"type": "text",
"graph": "g1",
"text": "Longer text can\nalso be displayed",
"description": "This is description of an event"
}]
}],
"panels": [{
"title": "Value",
"stockGraphs": [{
"id": "g1",
"valueField": "value"
}],
"stockLegend": {
"valueTextRegular": " ",
"markerType": "none"
}
}],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"graphBulletSize": 1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"periods": [{
"period": "DD",
"count": 10,
"label": "10 days"
}, {
"period": "MM",
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"panelsSettings": {
"usePrefixes": true
},
"export": {
"enabled": true
}
});
}
var demo3 = function() {
var chartData = generateChartData();
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var value = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
"date": newDate,
"value": value
});
}
return chartData;
}
var chart = AmCharts.makeChart("kt_amcharts_3", {
"type": "stock",
"theme": "light",
"dataSets": [{
"color": "#b0de09",
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": chartData,
"categoryField": "date"
}],
"panels": [{
"showCategoryAxis": true,
"title": "Value",
"eraseAll": false,
"allLabels": [{
"x": 0,
"y": 115,
"text": "Click on the pencil icon on top-right to start drawing",
"align": "center",
"size": 16
}],
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"useDataSetColors": false
}],
"stockLegend": {
"valueTextRegular": " ",
"markerType": "none"
},
"drawingIconsEnabled": true
}],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true
},
"periodSelector": {
"position": "bottom",
"periods": [{
"period": "DD",
"count": 10,
"label": "10 days"
}, {
"period": "MM",
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
}
});
}
var demo4 = function() {
var chartData = generateChartData();
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 1000);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 1000; i++) {
var newDate = new Date(firstDate);
newDate.setHours(0, i, 0, 0);
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
var b = Math.round(Math.random() * 100000000);
chartData.push({
"date": newDate,
"value": a,
"volume": b
});
}
return chartData;
}
var chart = AmCharts.makeChart("kt_amcharts_4", {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"minPeriod": "mm"
},
"dataSets": [{
"color": "#b0de09",
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
}],
"dataProvider": chartData,
"categoryField": "date"
}],
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"type": "smoothedLine",
"lineThickness": 2,
"bullet": "round"
}],
"stockLegend": {
"valueTextRegular": " ",
"markerType": "none"
}
}, {
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [{
"valueField": "volume",
"type": "column",
"cornerRadiusTop": 2,
"fillAlphas": 1
}],
"stockLegend": {
"valueTextRegular": " ",
"markerType": "none"
}
}],
"chartScrollbarSettings": {
"graph": "g1",
"usePeriod": "10mm",
"position": "top"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true
},
"periodSelector": {
"position": "top",
"dateFormat": "YYYY-MM-DD JJ:NN",
"inputFieldWidth": 150,
"periods": [{
"period": "hh",
"count": 1,
"label": "1 hour",
"selected": true
}, {
"period": "hh",
"count": 2,
"label": "2 hours"
}, {
"period": "hh",
"count": 5,
"label": "5 hour"
}, {
"period": "hh",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"panelsSettings": {
"usePrefixes": true
},
"export": {
"enabled": true,
"position": "bottom-right"
}
});
}
var demo5 = function() {
var chartData = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
firstDate.setHours(0, 0, 0, 0);
firstDate.setDate(firstDate.getDate() - 2000);
for (var i = 0; i < 2000; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var open = Math.round(Math.random() * (30) + 100);
var close = open + Math.round(Math.random() * (15) - Math.random() * 10);
var low;
if (open < close) {
low = open - Math.round(Math.random() * 5);
} else {
low = close - Math.round(Math.random() * 5);
}
var high;
if (open < close) {
high = close + Math.round(Math.random() * 5);
} else {
high = open + Math.round(Math.random() * 5);
}
var volume = Math.round(Math.random() * (1000 + i)) + 100 + i;
var value = Math.round(Math.random() * (30) + 100);
chartData[i] = ({
"date": newDate,
"open": open,
"close": close,
"high": high,
"low": low,
"volume": volume,
"value": value
});
}
}
var chart = AmCharts.makeChart("kt_amcharts_5", {
"type": "stock",
"theme": "light",
"dataSets": [{
"fieldMappings": [{
"fromField": "open",
"toField": "open"
}, {
"fromField": "close",
"toField": "close"
}, {
"fromField": "high",
"toField": "high"
}, {
"fromField": "low",
"toField": "low"
}, {
"fromField": "volume",
"toField": "volume"
}, {
"fromField": "value",
"toField": "value"
}],
"color": "#7f8da9",
"dataProvider": chartData,
"title": "West Stock",
"categoryField": "date"
}, {
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"color": "#fac314",
"dataProvider": chartData,
"compared": true,
"title": "East Stock",
"categoryField": "date"
}],
"panels": [{
"title": "Value",
"showCategoryAxis": false,
"percentHeight": 70,
"valueAxes": [{
"id": "v1",
"dashLength": 5
}],
"categoryAxis": {
"dashLength": 5
},
"stockGraphs": [{
"type": "candlestick",
"id": "g1",
"openField": "open",
"closeField": "close",
"highField": "high",
"lowField": "low",
"valueField": "close",
"lineColor": "#7f8da9",
"fillColors": "#7f8da9",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"fillAlphas": 1,
"useDataSetColors": false,
"comparable": true,
"compareField": "value",
"showBalloon": false,
"proCandlesticks": true
}],
"stockLegend": {
"valueTextRegular": undefined,
"periodValueTextComparing": "[[percents.value.close]]%"
}
},
{
"title": "Volume",
"percentHeight": 30,
"marginTop": 1,
"showCategoryAxis": true,
"valueAxes": [{
"dashLength": 5
}],
"categoryAxis": {
"dashLength": 5
},
"stockGraphs": [{
"valueField": "volume",
"type": "column",
"showBalloon": false,
"fillAlphas": 1
}],
"stockLegend": {
"markerType": "none",
"markerSize": 0,
"labelText": "",
"periodValueTextRegular": "[[value.close]]"
}
}
],
"chartScrollbarSettings": {
"graph": "g1",
"graphType": "line",
"usePeriod": "WW"
},
"chartCursorSettings": {
"valueLineBalloonEnabled": true,
"valueLineEnabled": true
},
"periodSelector": {
"position": "bottom",
"periods": [{
"period": "DD",
"count": 10,
"label": "10 days"
}, {
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"export": {
"enabled": true
}
});
}
return {
// public functions
init: function() {
demo1();
demo2();
demo3();
demo4();
demo5();
}
};
}();
jQuery(document).ready(function() {
KTamChartsStockChartsDemo.init();
});

1
public/assets/js/demo1/pages/components/charts/amcharts/stock-charts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

718
public/assets/js/demo1/pages/components/charts/flotcharts.js Normal file
View File

@@ -0,0 +1,718 @@
"use strict";
// Class definition
var KTFlotchartsDemo = function() {
// Private functions
var demo1 = 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_flotcharts_1"), [{
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: [KTApp.getStateColor("success"), KTApp.getStateColor("brand"), KTApp.getStateColor("danger")],
series: {
lines: {
show: true,
},
points: {
show: true,
fill: true,
radius: 3,
lineWidth: 1
}
},
xaxis: {
tickColor: "#eee",
ticks: [0, [Math.PI / 2, "\u03c0/2"],
[Math.PI, "\u03c0"],
[Math.PI * 3 / 2, "3\u03c0/2"],
[Math.PI * 2, "2\u03c0"]
]
},
yaxis: {
tickColor: "#eee",
ticks: 10,
min: -2,
max: 2
},
grid: {
borderColor: "#eee",
borderWidth: 1
}
});
}
var demo2 = 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_flotcharts_2"), [{
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: "#eee",
borderColor: "#eee",
borderWidth: 1
},
colors: [KTApp.getStateColor("brand"), KTApp.getStateColor("danger")],
xaxis: {
ticks: 11,
tickDecimals: 0,
tickColor: "#eee",
},
yaxis: {
ticks: 11,
tickDecimals: 0,
tickColor: "#eee",
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #333',
padding: '4px',
color: '#fff',
'border-radius': '3px',
'background-color': '#333',
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;
}
});
}
var demo3 = 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_flotcharts_3"), [{
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: [KTApp.getStateColor("brand"), KTApp.getStateColor("warning")],
series: {
lines: {
show: true
}
},
crosshair: {
mode: "x"
},
grid: {
hoverable: true,
autoHighlight: false,
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
},
yaxis: {
min: -1.2,
max: 1.2
}
});
var legends = $("#kt_flotcharts_3 .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_flotcharts_3").bind("plothover", function(event, pos, item) {
latestPosition = pos;
if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
});
}
var demo4 = 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: [KTApp.getStateColor("danger"), KTApp.getStateColor("brand")],
series: {
shadowSize: 1
},
lines: {
show: true,
lineWidth: 0.5,
fill: true,
fillColor: {
colors: [{
opacity: 0.1
}, {
opacity: 1
}]
}
},
yaxis: {
min: 0,
max: 100,
tickColor: "#eee",
tickFormatter: function(v) {
return v + "%";
}
},
xaxis: {
show: false,
},
colors: [KTApp.getStateColor("brand")],
grid: {
tickColor: "#eee",
borderWidth: 0,
}
};
var updateInterval = 30;
var plot = $.plot($("#kt_flotcharts_4"), [getRandomData()], options);
function update() {
plot.setData([getRandomData()]);
plot.draw();
setTimeout(update, updateInterval);
}
update();
}
var demo5 = 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_flotcharts_5"),
[{
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: [KTApp.getStateColor("danger"), KTApp.getStateColor("brand")],
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: "#eee",
borderColor: "#eee",
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();
}
var demo6 = function() {
// bar chart:
var data = GenerateSeries(0);
function GenerateSeries(added) {
var data = [];
var start = 100 + added;
var end = 200 + added;
for (var i = 1; i <= 20; i++) {
var d = Math.floor(Math.random() * (end - start + 1) + start);
data.push([i, d]);
start++;
end++;
}
return data;
}
var options = {
colors: [KTApp.getStateColor("success"), KTApp.getStateColor("brand")],
series: {
bars: {
show: true
}
},
bars: {
barWidth: 0.8,
lineWidth: 0, // in pixels
shadowSize: 0,
align: 'left'
},
grid: {
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
}
};
$.plot($("#kt_flotcharts_6"), [{
data: data,
lines: {
lineWidth: 1,
},
shadowSize: 0
}], options);
}
var demo7 = function() {
// horizontal bar chart:
var data1 = [
[10, 10],
[20, 20],
[30, 30],
[40, 40],
[50, 50]
];
var options = {
colors: [KTApp.getStateColor("brand")],
series: {
bars: {
show: true
}
},
bars: {
horizontal: true,
barWidth: 6,
lineWidth: 0, // in pixels
shadowSize: 0,
align: 'left'
},
grid: {
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
}
};
$.plot($("#kt_flotcharts_7"), [data1], options);
}
var demo8 = function() {
var data = [
{label: "CSS", data: 10, color: KTApp.getStateColor("brand")},
{label: "HTML5", data: 40, color: KTApp.getStateColor("success")},
{label: "PHP", data: 30, color: KTApp.getStateColor("danger")},
{label: "Angular", data: 20, color: KTApp.getStateColor("warning")}
];
$.plot($("#kt_flotcharts_8"), data, {
series: {
pie: {
show: true
}
}
});
}
var demo9 = function() {
var data = [
{label: "USA", data: 10, color: KTApp.getStateColor("brand")},
{label: "Germany", data: 25, color: KTApp.getStateColor("success")},
{label: "Norway", data: 30, color: KTApp.getStateColor("danger")},
{label: "Malaysia", data: 15, color: KTApp.getStateColor("warning")},
{label: "France", data: 10, color: KTApp.getStateColor("info")}
];
$.plot($("#kt_flotcharts_9"), data, {
series: {
pie: {
show: true
}
},
legend: {
show: false
}
});
}
var demo10 = function() {
var data = [
{label: "Google", data: 20, color: KTApp.getStateColor("brand")},
{label: "Twitter", data: 35, color: KTApp.getStateColor("success")},
{label: "Linkedin", data: 20, color: KTApp.getStateColor("danger")},
{label: "Instagram", data: 25, color: KTApp.getStateColor("warning")},
{label: "Facebook", data: 10, color: KTApp.getStateColor("info")}
];
$.plot($("#kt_flotcharts_10"), data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 1,
formatter: function(label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
background: {
opacity: 0.8
}
}
}
},
legend: {
show: false
}
});
}
var demo11 = function() {
var data = [
{label: "Vue", data: 13, color: KTApp.getStateColor("danger")},
{label: "Angular", data: 25, color: KTApp.getStateColor("success")},
{label: "React", data: 15, color: KTApp.getStateColor("brand")},
{label: "Ember", data: 10, color: KTApp.getStateColor("warning")},
{label: "Backbone", data: 8, color: KTApp.getStateColor("info")}
];
$.plot($("#kt_flotcharts_11"), data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 1,
formatter: function(label, series) {
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
},
background: {
opacity: 0.8
}
}
}
},
legend: {
show: false
}
});
}
return {
// public functions
init: function() {
// default charts
demo1();
demo2();
demo3();
demo4();
demo5();
demo6();
demo7();
// pie charts
demo8();
demo9();
demo10();
demo11();
}
};
}();
jQuery(document).ready(function() {
KTFlotchartsDemo.init();
});

1
public/assets/js/demo1/pages/components/charts/flotcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

170
public/assets/js/demo1/pages/components/charts/google-charts.js Normal file
View File

@@ -0,0 +1,170 @@
"use strict";
// Class definition
var KTGoogleChartsDemo = function() {
// Private functions
var main = function() {
// GOOGLE CHARTS INIT
google.load('visualization', '1', {
packages: ['corechart', 'bar', 'line']
});
google.setOnLoadCallback(function() {
KTGoogleChartsDemo.runDemos();
});
}
var demoColumnCharts = 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_gchart_1'));
chart.draw(data, options);
var chart = new google.visualization.ColumnChart(document.getElementById('kt_gchart_2'));
chart.draw(data, options);
}
var demoPieCharts = 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_gchart_3'));
chart.draw(data, options);
var options = {
pieHole: 0.4,
colors: ['#fe3995', '#f6aa33', '#6e4ff5', '#2abe81', '#c7d2e7', '#593ae1']
};
var chart = new google.visualization.PieChart(document.getElementById('kt_gchart_4'));
chart.draw(data, options);
}
var demoLineCharts = 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_gchart_5'));
chart.draw(data, options);
}
return {
// public functions
init: function() {
main();
},
runDemos: function() {
demoColumnCharts();
demoLineCharts();
demoPieCharts();
}
};
}();
KTGoogleChartsDemo.init();

1
public/assets/js/demo1/pages/components/charts/google-charts.min.js vendored Normal file
View File

@@ -0,0 +1 @@
"use strict";var KTGoogleChartsDemo={init:function(){google.load("visualization","1",{packages:["corechart","bar","line"]}),google.setOnLoadCallback(function(){KTGoogleChartsDemo.runDemos()})},runDemos:function(){var e;!function(){var e=new google.visualization.DataTable;e.addColumn("timeofday","Time of Day"),e.addColumn("number","Motivation Level"),e.addColumn("number","Energy Level"),e.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 a={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"]};new google.visualization.ColumnChart(document.getElementById("kt_gchart_1")).draw(e,a),new google.visualization.ColumnChart(document.getElementById("kt_gchart_2")).draw(e,a)}(),(e=new google.visualization.DataTable).addColumn("number","Day"),e.addColumn("number","Guardians of the Galaxy"),e.addColumn("number","The Avengers"),e.addColumn("number","Transformers: Age of Extinction"),e.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]]),new google.charts.Line(document.getElementById("kt_gchart_5")).draw(e,{chart:{title:"Box Office Earnings in First Two Weeks of Opening",subtitle:"in millions of dollars (USD)"},colors:["#6e4ff5","#f6aa33","#fe3995"]}),function(){var e=google.visualization.arrayToDataTable([["Task","Hours per Day"],["Work",11],["Eat",2],["Commute",2],["Watch TV",2],["Sleep",7]]),a={title:"My Daily Activities",colors:["#fe3995","#f6aa33","#6e4ff5","#2abe81","#c7d2e7","#593ae1"]};new google.visualization.PieChart(document.getElementById("kt_gchart_3")).draw(e,a),a={pieHole:.4,colors:["#fe3995","#f6aa33","#6e4ff5","#2abe81","#c7d2e7","#593ae1"]},new google.visualization.PieChart(document.getElementById("kt_gchart_4")).draw(e,a)}()}};KTGoogleChartsDemo.init();

191
public/assets/js/demo1/pages/components/charts/morris-charts.js Normal file
View File

@@ -0,0 +1,191 @@
"use strict";
// Class definition
var KTMorrisChartsDemo = function() {
// Private functions
var demo1 = function() {
// LINE CHART
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'kt_morris_1',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [{
y: '2006',
a: 100,
b: 90
},
{
y: '2007',
a: 75,
b: 65
},
{
y: '2008',
a: 50,
b: 40
},
{
y: '2009',
a: 75,
b: 65
},
{
y: '2010',
a: 50,
b: 40
},
{
y: '2011',
a: 75,
b: 65
},
{
y: '2012',
a: 100,
b: 90
}
],
// The name of the data record attribute that contains x-values.
xkey: 'y',
// A list of names of data record attributes that contain y-values.
ykeys: ['a', 'b'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Values A', 'Values B'],
lineColors: ['#6e4ff5', '#f6aa33']
});
}
var demo2 = function() {
// AREA CHART
new Morris.Area({
element: 'kt_morris_2',
data: [{
y: '2006',
a: 100,
b: 90
},
{
y: '2007',
a: 75,
b: 65
},
{
y: '2008',
a: 50,
b: 40
},
{
y: '2009',
a: 75,
b: 65
},
{
y: '2010',
a: 50,
b: 40
},
{
y: '2011',
a: 75,
b: 65
},
{
y: '2012',
a: 100,
b: 90
}
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
lineColors: ['#de1f78', '#c7d2e7'],
pointFillColors: ['#fe3995','#e6e9f0']
});
}
var demo3 = function() {
// BAR CHART
new Morris.Bar({
element: 'kt_morris_3',
data: [{
y: '2006',
a: 100,
b: 90
},
{
y: '2007',
a: 75,
b: 65
},
{
y: '2008',
a: 50,
b: 40
},
{
y: '2009',
a: 75,
b: 65
},
{
y: '2010',
a: 50,
b: 40
},
{
y: '2011',
a: 75,
b: 65
},
{
y: '2012',
a: 100,
b: 90
}
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
barColors: ['#2abe81', '#24a5ff']
});
}
var demo4 = function() {
// PIE CHART
new Morris.Donut({
element: 'kt_morris_4',
data: [{
label: "Download Sales",
value: 12
},
{
label: "In-Store Sales",
value: 30
},
{
label: "Mail-Order Sales",
value: 20
}
],
colors: ['#593ae1', '#6e4ff5', '#9077fb']
});
}
return {
// public functions
init: function() {
demo1();
demo2();
demo3();
demo4();
}
};
}();
jQuery(document).ready(function() {
KTMorrisChartsDemo.init();
});

1
public/assets/js/demo1/pages/components/charts/morris-charts.min.js vendored Normal file
View File

@@ -0,0 +1 @@
"use strict";var KTMorrisChartsDemo={init:function(){new Morris.Line({element:"kt_morris_1",data:[{y:"2006",a:100,b:90},{y:"2007",a:75,b:65},{y:"2008",a:50,b:40},{y:"2009",a:75,b:65},{y:"2010",a:50,b:40},{y:"2011",a:75,b:65},{y:"2012",a:100,b:90}],xkey:"y",ykeys:["a","b"],labels:["Values A","Values B"],lineColors:["#6e4ff5","#f6aa33"]}),new Morris.Area({element:"kt_morris_2",data:[{y:"2006",a:100,b:90},{y:"2007",a:75,b:65},{y:"2008",a:50,b:40},{y:"2009",a:75,b:65},{y:"2010",a:50,b:40},{y:"2011",a:75,b:65},{y:"2012",a:100,b:90}],xkey:"y",ykeys:["a","b"],labels:["Series A","Series B"],lineColors:["#de1f78","#c7d2e7"],pointFillColors:["#fe3995","#e6e9f0"]}),new Morris.Bar({element:"kt_morris_3",data:[{y:"2006",a:100,b:90},{y:"2007",a:75,b:65},{y:"2008",a:50,b:40},{y:"2009",a:75,b:65},{y:"2010",a:50,b:40},{y:"2011",a:75,b:65},{y:"2012",a:100,b:90}],xkey:"y",ykeys:["a","b"],labels:["Series A","Series B"],barColors:["#2abe81","#24a5ff"]}),new Morris.Donut({element:"kt_morris_4",data:[{label:"Download Sales",value:12},{label:"In-Store Sales",value:30},{label:"Mail-Order Sales",value:20}],colors:["#593ae1","#6e4ff5","#9077fb"]})}};jQuery(document).ready(function(){KTMorrisChartsDemo.init()});