|
Directory : /var/www/vhosts/lautnusantara.com/httpdocs/mis/public/assets/theme/BeyondAdmin/js/charts/flot/ |
var gridbordercolor = "#eee";
var InitiateFlotBarChart = function () {
return {
init: function () {
var data2 = [{
color: themesecondary,
label: "Direct Visits",
data: [[3, 2], [4, 5], [5, 4], [6, 11], [7, 12], [8, 11], [9, 8], [10, 14], [11, 12], [12, 16], [13, 9],
[14, 10], [15, 14], [16, 15], [17, 9]],
lines: {
show: true,
fill: true,
lineWidth: .1,
fillColor: {
colors: [{
opacity: 0
}, {
opacity: 0.4
}]
}
},
points: {
show: false
},
shadowSize: 0
},
{
color: themeprimary,
label: "Referral Visits",
data: [[3, 10], [4, 13], [5, 12], [6, 16], [7, 19], [8, 19], [9, 24], [10, 19], [11, 18], [12, 21], [13, 17],
[14, 14], [15, 12], [16, 14], [17, 15]],
bars: {
order: 1,
show: true,
borderWidth: 0,
barWidth: 0.4,
lineWidth: .5,
fillColor: {
colors: [{
opacity: 0.4
}, {
opacity: 1
}]
}
}
},
{
color: themethirdcolor,
label: "Search Engines",
data: [[3, 14], [4, 11], [5, 10], [6, 9], [7, 5], [8, 8], [9, 5], [10, 6], [11, 4], [12, 7], [13, 4],
[14, 3], [15, 4], [16, 6], [17, 4]],
lines: {
show: true,
fill: false,
fillColor: {
colors: [{
opacity: 0.3
}, {
opacity: 0
}]
}
},
points: {
show: true
}
}
];
var options = {
legend: {
show: false
},
xaxis: {
tickDecimals: 0,
color: '#f3f3f3'
},
yaxis: {
min: 0,
color: '#f3f3f3',
tickFormatter: function (val, axis) {
return "";
},
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0,
aboveData: false,
color: '#fbfbfb'
},
tooltip: true,
tooltipOpts: {
defaultTheme: false,
content: " <b>%x May</b> , <b>%s</b> : <span>%y</span>",
}
};
var placeholder = $("#bar-chart");
var plot = $.plot(placeholder, data2, options);
}
};
}();
var InitiateFlotSelectableChart = function () {
return {
init: function () {
var data = [{
color: themeprimary,
label: "Windows",
data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]
}
, {
color: themethirdcolor,
label: "Linux",
data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]
}
, {
color: themesecondary,
label: "Mac OS",
data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]
}, {
color: themefourthcolor,
label: "DOS",
data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]
}];
var options = {
series: {
lines: {
show: true
},
points: {
show: true
}
},
legend: {
noColumns: 4
},
xaxis: {
tickDecimals: 0,
color: gridbordercolor
},
yaxis: {
min: 0,
color: gridbordercolor
},
selection: {
mode: "x"
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0,
aboveData: false
},
tooltip: true,
tooltipOpts: {
defaultTheme: false,
content: "<b>%s</b> : <span>%x</span> : <span>%y</span>",
},
crosshair: {
mode: "x"
}
};
var placeholder = $("#selectable-chart");
placeholder.bind("plotselected", function (event, ranges) {
var zoom = $("#zoom").is(":checked");
if (zoom) {
plot = $.plot(placeholder, data, $.extend(true, {}, options, {
xaxis: {
min: ranges.xaxis.from,
max: ranges.xaxis.to
}
}));
}
});
placeholder.bind("plotunselected", function (event) {
// Do Some Work
});
var plot = $.plot(placeholder, data, options);
$("#clearSelection").click(function () {
plot.clearSelection();
});
$("#setSelection").click(function () {
plot.setSelection({
xaxis: {
from: 1994,
to: 1995
}
});
});
}
};
}();
var InitiateRealTimeChart = function () {
return {
init: function () {
// We use an inline data source in the example, usually data would
// be fetched from a server
var data = [],
totalPoints = 300;
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,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else 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;
}
// Set up the control widget
var updateInterval = 70;
var plot = $.plot("#realtime-chart", [getRandomData()], {
yaxis: {
color: gridbordercolor,
min: 0,
max: 100
},
xaxis: {
color: gridbordercolor,
min: 0,
max: 100
},
colors: [themeprimary],
series: {
lines: {
lineWidth: 0,
fill: true,
fillColor: {
colors: [{
opacity: 0.4
}, {
opacity: 0
}]
},
steps: false
},
shadowSize: 0
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0,
aboveData: false
}
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
}
};
}();
var InitiateStackedChart = function () {
return {
init: 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 data1 = [
{
label: "Windows Phone",
data: d1,
color: themethirdcolor
},
{
label: "Android",
data: d2,
color: themesecondary
},
{
label: "IOS",
data: d3,
color: themeprimary
}
];
var stack = 0,
bars = false,
lines = true,
steps = false;
function plotWithOptions() {
$.plot($("#stacked-chart"), data1, {
series: {
stack: stack,
lines: {
lineWidth: 1,
show: lines,
fill: true,
steps: steps
},
bars: {
show: bars,
barWidth: 0.4
}
}
,
xaxis: {
color: gridbordercolor
},
yaxis: {
color: gridbordercolor
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0,
aboveData: false
},
legend: {
noColumns: 3
},
});
}
$(".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 InitiateVisitorChart = function () {
return {
init: function () {
var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476], [1199746800000, 462], [1199833200000, 448], [1199919600000, 442], [1200006000000, 403], [1200092400000, 204], [1200178800000, 194], [1200265200000, 327], [1200351600000, 374], [1200438000000, 507], [1200524400000, 546], [1200610800000, 482], [1200697200000, 283], [1200783600000, 221], [1200870000000, 483], [1200956400000, 523], [1201042800000, 528], [1201129200000, 483], [1201215600000, 452], [1201302000000, 270], [1201388400000, 222], [1201474800000, 439], [1201561200000, 559], [1201647600000, 521], [1201734000000, 477], [1201820400000, 442], [1201906800000, 252], [1201993200000, 236], [1202079600000, 525], [1202166000000, 477], [1202252400000, 386], [1202338800000, 409], [1202425200000, 408], [1202511600000, 237], [1202598000000, 193], [1202684400000, 357], [1202770800000, 414], [1202857200000, 393], [1202943600000, 353], [1203030000000, 364], [1203116400000, 215], [1203202800000, 214], [1203289200000, 356], [1203375600000, 399], [1203462000000, 334], [1203548400000, 348], [1203634800000, 243], [1203721200000, 126], [1203807600000, 157], [1203894000000, 288]];
// first correct the timestamps - they are recorded as the daily
// midnights in UTC+0100, but Flot always displays dates in UTC
// so we have to add one hour to hit the midnights in the plot
for (var i = 0; i < d.length; ++i) {
d[i][0] += 60 * 60 * 1000;
}
// helper for returning the weekends in a period
function weekendAreas(axes) {
var markings = [],
d = new Date(axes.xaxis.min);
// go to the first Saturday
d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
d.setUTCSeconds(0);
d.setUTCMinutes(0);
d.setUTCHours(0);
var i = d.getTime();
// when we don't set yaxis, the rectangle automatically
// extends to infinity upwards and downwards
do {
markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
i += 7 * 24 * 60 * 60 * 1000;
} while (i < axes.xaxis.max);
return markings;
}
var options = {
xaxis: {
mode: "time",
tickLength: 5,
color: gridbordercolor
},
selection: {
mode: "x"
},
yaxis: {
color: gridbordercolor
},
grid: {
borderWidth: 0,
aboveData: false
},
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.1
}, {
opacity: 0.15
}]
}
},
shadowSize: 0
}
};
var plot = $.plot("#visitors-chart", [{ data: d, color: themefourthcolor }], options);
var overview = $.plot("#visitors-chart-overview", [{ data: d, color: themefourthcolor }], {
series: {
lines: {
show: true,
lineWidth: 1
},
shadowSize: 0
},
xaxis: {
ticks: [],
mode: "time"
},
yaxis: {
ticks: [],
min: 0,
autoscaleMargin: 0.1
},
selection: {
mode: "x"
},
grid: {
borderWidth: 0,
aboveData: false
}
});
// now connect the two
$("#visitors-chart").bind("plotselected", function (event, ranges) {
// do the zooming
plot = $.plot("#visitors-chart", [{ data: d, color: themeprimary }], $.extend(true, {}, options, {
xaxis: {
min: ranges.xaxis.from,
max: ranges.xaxis.to
}
}));
// don't fire event on the overview to prevent eternal loop
overview.setSelection(ranges, true);
});
$("#visitors-chart-overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});
}
};
}();
var InitiateAnnotationChart = function () {
return {
init: function () {
var d1 = [];
for (var i = 0; i < 30; ++i) {
d1.push([i, Math.sin(i)]);
}
var data = [{
data: d1, bars: {
show: true,
order: 1,
fillColor: { colors: [{ color: themeprimary }, { color: themeprimary }] }
},
color: themeprimary
}];
var markings = [
{ color: "#f5f5f5", yaxis: { from: 1 } },
{ color: "#f5f5f5", yaxis: { to: -1 } },
{ color: themethirdcolor, lineWidth: 1, xaxis: { from: 2, to: 2 } },
{ color: themefourthcolor, lineWidth: 1, xaxis: { from: 8, to: 8 } }
];
var placeholder = $("#annotation-chart");
var plot = $.plot(placeholder, data, {
bars: { show: true, barWidth: 0.5, fillColor: { colors: [{ opacity: 0.7 }, { opacity: 1 }] } },
xaxis: { ticks: [], autoscaleMargin: 0.02, color: gridbordercolor },
yaxis: { min: -1.5, max: 1.5, color: gridbordercolor },
grid: { markings: markings, borderWidth: 0, aboveData: false }
});
var o = plot.pointOffset({ x: 2, y: -1.2 });
// Append it to the placeholder that Flot already uses for positioning
placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:" + themethirdcolor + ";font-size:smaller'>Warming up</div>");
o = plot.pointOffset({ x: 8, y: -1.2 });
placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:" + themefourthcolor + ";font-size:smaller'>Actual measurements</div>");
// Draw a little arrow on top of the last label to demonstrate canvas
// drawing
var ctx = plot.getCanvas().getContext("2d");
ctx.beginPath();
o.left += 4;
ctx.moveTo(o.left, o.top);
ctx.lineTo(o.left, o.top - 10);
ctx.lineTo(o.left + 10, o.top - 5);
ctx.lineTo(o.left, o.top);
ctx.fillStyle = themefourthcolor;
ctx.fill();
// Add the Flot version string to the footer
}
};
}();
var InitiatePieChart = function () {
return {
init: function () {
// Example Data
//var data = [
// { label: "Series1", data: 10},
// { label: "Series2", data: 30},
// { label: "Series3", data: 90},
// { label: "Series4", data: 70},
// { label: "Series5", data: 80},
// { label: "Series6", data: 110}
//];
var data = [
{ label: "Windows", data: [[1, 10]], color: themefifthcolor },
{ label: "Linux", data: [[1, 30]], color: themesecondary },
{ label: "Mac OS X", data: [[1, 90]], color: themethirdcolor },
{ label: "Android", data: [[1, 70]], color: themefourthcolor },
{ label: "Unix", data: [[1, 80]], color: themeprimary }
];
//var data = [
// { label: "Series A", data: 0.2063},
// { label: "Series B", data: 38888}
//];
// Randomly Generated Data
//var data = [],
// series = Math.floor(Math.random() * 6) + 3;
//for (var i = 0; i < series; i++) {
// data[i] = {
// label: "Series" + (i + 1),
// data: Math.floor(Math.random() * 100) + 1
// }
//}
var placeholder = $("#pie-chart");
$("#example-1").click(function () {
placeholder.unbind();
$("#title").text("Default pie chart");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
gradient: {
radial: true,
colors: [
{ opacity: 0.5 },
{ opacity: 1.0 }
]
}
}
}
});
});
$("#example-2").click(function () {
placeholder.unbind();
$("#title").text("Default without legend");
$.plot(placeholder, data, {
series: {
pie: {
show: true
}
},
legend: {
show: false
}
});
});
$("#example-3").click(function () {
placeholder.unbind();
$("#title").text("Custom Label Formatter");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 1,
formatter: labelFormatter,
background: {
opacity: 0.8
}
}
}
},
legend: {
show: false
}
});
});
$("#example-4").click(function () {
placeholder.unbind();
$("#title").text("Label Radius");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3 / 4,
formatter: labelFormatter,
background: {
opacity: 0.5
}
}
}
},
legend: {
show: false
}
});
});
$("#example-5").click(function () {
placeholder.unbind();
$("#title").text("Label Styles #1");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3 / 4,
formatter: labelFormatter,
background: {
opacity: 0.5,
color: "#000"
}
}
}
},
legend: {
show: false
}
});
});
$("#example-6").click(function () {
placeholder.unbind();
$("#title").text("Label Styles #2");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 3 / 4,
label: {
show: true,
radius: 3 / 4,
formatter: labelFormatter,
background: {
opacity: 0.5,
color: "#000"
}
}
}
},
legend: {
show: false
}
});
});
$("#example-7").click(function () {
placeholder.unbind();
$("#title").text("Hidden Labels");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 2 / 3,
formatter: labelFormatter,
threshold: 0.1
}
}
},
legend: {
show: false
}
});
});
$("#example-8").click(function () {
placeholder.unbind();
$("#title").text("Combined Slice");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
combine: {
color: "#999",
threshold: 0.05
}
}
},
legend: {
show: false
}
});
});
$("#example-9").click(function () {
placeholder.unbind();
$("#title").text("Rectangular Pie");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 500,
label: {
show: true,
formatter: labelFormatter,
threshold: 0.1
}
}
},
legend: {
show: false
}
});
});
$("#example-10").click(function () {
placeholder.unbind();
$("#title").text("Tilted Pie");
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
tilt: 0.5,
label: {
show: true,
radius: 1,
formatter: labelFormatter,
background: {
opacity: 0.8
}
},
combine: {
color: "#999",
threshold: 0.1
}
}
},
legend: {
show: false
}
});
});
$("#example-11").click(function () {
placeholder.unbind();
$("#title").text("Donut Hole");
$.plot(placeholder, data, {
series: {
pie: {
innerRadius: 0.5,
show: true,
gradient: {
radial: true,
colors: [
{ opacity: 1.0 },
{ opacity: 1.0 },
{ opacity: 1.0 },
{ opacity: 0.5 },
{ opacity: 1.0 }
]
}
}
}
});
});
$("#example-12").click(function () {
placeholder.unbind();
$("#title").text("Interactivity");
$.plot(placeholder, data, {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
}
});
placeholder.bind("plothover", function (event, pos, obj) {
if (!obj) {
return;
}
var percent = parseFloat(obj.series.percent).toFixed(2);
$("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>");
});
placeholder.bind("plotclick", function (event, pos, obj) {
if (!obj) {
return;
}
percent = parseFloat(obj.series.percent).toFixed(2);
alert("" + obj.series.label + ": " + percent + "%");
});
});
// Show the initial default chart
$("#example-1").click();
// A custom label formatter used by several of the plots
function labelFormatter(label, series) {
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
}
//
}
};
}();
var InitiateHorizonalChart = function () {
return {
init: function () {
// Set up our data array
var my_data = [[3, 0], [6, 1], [5, 2], [2, 3], [8, 4]];
// Setup labels for use on the Y-axis
var tickLabels = [[0, 'Yes'], [1, 'No'], [2, 'Maybe'], [3, 'Sometimes'], [4, 'Never']];
$.plot($("#horizonal-chart"), [
{
data: my_data,
bars: {
show: true,
horizontal: true
}
}
],
{
bars: {
fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1 }] },
barWidth: 0.5,
lineWidth: 1,
borderWidth: 0
},
colors: [themeprimary],
yaxis: {
ticks: tickLabels
},
grid: {
show: true,
hoverable: true,
clickable: true,
tickColor: gridbordercolor,
borderWidth: 0,
borderColor: gridbordercolor,
},
}
);
}
};
}();