KIYAN/Dashboard_Exercise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add project files.

Browse Source
This commit is contained in:
lianpi3
2025-07-23 18:54:59 +03:30
parent 429fe73799
commit a0852dd7d8
3356 changed files with 1632271 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2392
Content/Panel/js/pages/features/charts/amcharts/charts.js Normal file
View File

File diff suppressed because it is too large Load Diff

1024
Content/Panel/js/pages/features/charts/amcharts/maps.js Normal file
View File

File diff suppressed because it is too large Load Diff

784
Content/Panel/js/pages/features/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();
});

1088
Content/Panel/js/pages/features/charts/apexcharts.js Normal file
View File

File diff suppressed because it is too large Load Diff

718
Content/Panel/js/pages/features/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.getSettings()['colors']['theme']['base']["success"], KTApp.getSettings()['colors']['theme']['base']["primary"], KTApp.getSettings()['colors']['theme']['base']["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.getSettings()['colors']['theme']['base']["primary"], KTApp.getSettings()['colors']['theme']['base']["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.getSettings()['colors']['theme']['base']["primary"], KTApp.getSettings()['colors']['theme']['base']["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.getSettings()['colors']['theme']['base']["danger"], KTApp.getSettings()['colors']['theme']['base']["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: "#eee",
tickFormatter: function(v) {
return v + "%";
}
},
xaxis: {
show: false,
},
colors: [KTApp.getSettings()['colors']['theme']['base']["primary"]],
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.getSettings()['colors']['theme']['base']["danger"], KTApp.getSettings()['colors']['theme']['base']["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: "#eee",
borderColor: "#eee",
borderWidth: 1
}
}
);
}
$(".stackControls input").click(function(e) {
e.preventDefault();
stack = $(this).val() == "با استک" ? true : null;
plotWithOptions();
});
$(".graphControls input").click(function(e) {
e.preventDefault();
bars = $(this).val().indexOf("میله ها") != -1;
lines = $(this).val().indexOf("خطوط") != -1;
steps = $(this).val().indexOf("مراحل") != -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.getSettings()['colors']['theme']['base']["success"], KTApp.getSettings()['colors']['theme']['base']["primary"]],
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.getSettings()['colors']['theme']['base']["primary"]],
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: "سی اس اس", data: 10, color: KTApp.getSettings()['colors']['theme']['base']["primary"]},
{label: "اچ تی ام ال", data: 40, color: KTApp.getSettings()['colors']['theme']['base']["success"]},
{label: "پی اچ پی", data: 30, color: KTApp.getSettings()['colors']['theme']['base']["danger"]},
{label: "انگولار", data: 20, color: KTApp.getSettings()['colors']['theme']['base']["warning"]}
];
$.plot($("#kt_flotcharts_8"), data, {
series: {
pie: {
show: true
}
}
});
}
var demo9 = function() {
var data = [
{label: "آمریکا", data: 10, color: KTApp.getSettings()['colors']['theme']['base']["primary"]},
{label: "آلمان", data: 25, color: KTApp.getSettings()['colors']['theme']['base']["success"]},
{label: "نروژ", data: 30, color: KTApp.getSettings()['colors']['theme']['base']["danger"]},
{label: "ایران", data: 15, color: KTApp.getSettings()['colors']['theme']['base']["warning"]},
{label: "فرانسه", data: 10, color: KTApp.getSettings()['colors']['theme']['base']["info"]}
];
$.plot($("#kt_flotcharts_9"), data, {
series: {
pie: {
show: true
}
},
legend: {
show: false
}
});
}
var demo10 = function() {
var data = [
{label: "گوگل", data: 20, color: KTApp.getSettings()['colors']['theme']['base']["primary"]},
{label: "توئیتر", data: 35, color: KTApp.getSettings()['colors']['theme']['base']["success"]},
{label: "لینکدین", data: 20, color: KTApp.getSettings()['colors']['theme']['base']["danger"]},
{label: "اینستاگرام", data: 25, color: KTApp.getSettings()['colors']['theme']['base']["warning"]},
{label: "فیس بوک", data: 10, color: KTApp.getSettings()['colors']['theme']['base']["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: "وی یو ای", data: 13, color: KTApp.getSettings()['colors']['theme']['base']["danger"]},
{label: "انگولار", data: 25, color: KTApp.getSettings()['colors']['theme']['base']["success"]},
{label: "ری اکت", data: 15, color: KTApp.getSettings()['colors']['theme']['base']["primary"]},
{label: "ایمبر", data: 10, color: KTApp.getSettings()['colors']['theme']['base']["warning"]},
{label: "یک وان", data: 8, color: KTApp.getSettings()['colors']['theme']['base']["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();
});

170
Content/Panel/js/pages/features/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();