first initial
This commit is contained in:
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -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();
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@@ -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();
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@@ -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();
|
||||
@@ -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();
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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()});
|
||||
Reference in New Issue
Block a user