You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

592 lines
17 KiB

$(function () {
"use strict";
// ==============================================================
// Total revenue chart
// ==============================================================
new Chartist.Line(
".total-revenue4",
{
labels: ["0", "4", "8", "12", "16", "20", "24", "30"],
series: [
[0, 2, 3.5, 0, 13, 1, 4, 1],
[0, 4, 0, 4, 0, 4, 0, 4],
],
},
{
high: 15,
low: 0,
showArea: true,
fullWidth: true,
plugins: [Chartist.plugins.tooltip()], // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
axisY: {
onlyInteger: true,
offset: 20,
labelInterpolationFnc: function (value) {
return value / 1 + "k";
},
},
}
);
// ==============================================================
// User analytics
// ==============================================================
new Chartist.Line(
".user-analytics",
{
labels: [
"10 jan",
"15 jan",
"20 jan",
"25 jan",
"30 jan",
"05 Feb",
"10 Feb",
],
series: [[0, 2, 3.5, 0, 13, 1, 4]],
},
{
high: 25,
low: 0,
showArea: true,
lineSmooth: Chartist.Interpolation.simple({
divisor: 10,
}),
fullWidth: true,
chartPadding: {
top: 15,
right: 20,
bottom: 5,
left: 10,
},
plugins: [Chartist.plugins.tooltip()], // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
axisY: {
onlyInteger: true,
offset: 20,
labelInterpolationFnc: function (value) {
return value / 1 + "k";
},
},
}
);
// ==============================================================
// Realtime chart
// ==============================================================
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 = 250;
$("#updateInterval")
.val(updateInterval)
.change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 3000) {
updateInterval = 3000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#placeholder", [getRandomData()], {
series: {
shadowSize: 0, // Drawing is faster without shadows
},
yaxis: {
min: 0,
max: 100,
},
xaxis: {
show: false,
},
colors: ["#26c6da"],
grid: {
color: "#AFAFAF",
hoverable: true,
borderWidth: 0,
backgroundColor: "transparent",
},
tooltip: true,
tooltipOpts: {
content: "Visit: %y",
defaultTheme: false,
},
});
$(window).resize(function () {
$.plot($("#placeholder"), data);
});
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();
// ==============================================================
// Android vs IOS
// ==============================================================
new Chartist.Line(
".andvios",
{
labels: [
"0",
"4",
"8",
"12",
"16",
"20",
"24",
"30",
"16",
"20",
"24",
"30",
"34",
"38",
"42",
"46",
"50",
"54",
],
series: [
[11, 4, 3, 14, 9, 10, 18, 15, 24, 17, 19, 26, 31, 26, 37, 41, 46, 51],
[8, 1, 1, 10, 11, 6, 12, 14, 21, 15, 21, 24, 28, 23, 34, 38, 41, 47],
],
},
{
low: 0,
showArea: true,
fullWidth: true,
chartPadding: 0,
axisX: {
showLabel: false,
divisor: 2,
showGrid: false,
offset: 0,
},
plugins: [Chartist.plugins.tooltip()], // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
axisY: {
onlyInteger: true,
showLabel: false,
offset: 0,
},
}
);
// ==============================================================
// Badnwidth usage
// ==============================================================
new Chartist.Line(
".usage",
{
labels: ["0", "4", "8", "12", "16", "20", "24", "30"],
series: [[5, 0, 12, 1, 8, 3, 12, 15]],
},
{
high: 13,
low: 0,
showArea: true,
fullWidth: true,
plugins: [Chartist.plugins.tooltip()], // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
axisY: {
onlyInteger: true,
offset: 20,
showLabel: false,
showGrid: false,
labelInterpolationFnc: function (value) {
return value / 1 + "k";
},
},
axisX: {
showLabel: false,
divisor: 2,
showGrid: false,
offset: 0,
},
}
);
// ==============================================================
// Download count
// ==============================================================
var sparklineLogin = function () {
$(".spark-count").sparkline(
[4, 5, 0, 10, 9, 12, 4, 9, 4, 5, 3, 10, 9, 12, 10, 9, 12, 4, 9],
{
type: "bar",
width: "100%",
height: "100",
barWidth: "8",
resize: true,
barSpacing: "5",
barColor: "rgba(255, 255, 255, 0.3)",
}
);
$("#spark1").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
type: "line",
width: "100%",
height: "50",
lineColor: "#26c6da",
fillColor: "#26c6da",
maxSpotColor: "#26c6da",
highlightLineColor: "rgba(0, 0, 0, 0.2)",
highlightSpotColor: "#26c6da",
});
$("#spark2").sparkline([0, 2, 8, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
type: "line",
width: "100%",
height: "50",
lineColor: "#009efb",
fillColor: "#009efb",
minSpotColor: "#009efb",
maxSpotColor: "#009efb",
highlightLineColor: "rgba(0, 0, 0, 0.2)",
highlightSpotColor: "#009efb",
});
$("#spark3").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
type: "line",
width: "100%",
height: "50",
lineColor: "#707cd2",
fillColor: "#707cd2",
maxSpotColor: "#707cd2",
highlightLineColor: "rgba(0, 0, 0, 0.2)",
highlightSpotColor: "#707cd2",
});
$("#spark4").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
type: "line",
width: "100%",
height: "50",
lineColor: "#fff",
fillColor: "#707cd2",
maxSpotColor: "#707cd2",
highlightLineColor: "rgba(0, 0, 0, 0.2)",
highlightSpotColor: "#707cd2",
});
$("#spark5").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
type: "line",
width: "100%",
height: "50",
lineColor: "#fff",
fillColor: "#2cabe3",
maxSpotColor: "#2cabe3",
highlightLineColor: "rgba(0, 0, 0, 0.2)",
highlightSpotColor: "#2cabe3",
});
$("#spark6").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
type: "line",
width: "100%",
height: "50",
lineColor: "#fff",
fillColor: "#2cd07e",
maxSpotColor: "#2cd07e",
highlightLineColor: "rgba(0, 0, 0, 0.2)",
highlightSpotColor: "#2cd07e",
});
$("#spark7").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
type: "line",
width: "100%",
height: "50",
lineColor: "#fff",
fillColor: "#ffc36d",
maxSpotColor: "#ffc36d",
highlightLineColor: "rgba(0, 0, 0, 0.2)",
highlightSpotColor: "#ffc36d",
});
$("#spark8").sparkline([4, 5, 0, 10, 9, 12, 4, 9], {
type: "bar",
width: "100%",
height: "70",
barWidth: "8",
resize: true,
barSpacing: "5",
barColor: "#26c6da",
});
$("#spark9").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
type: "bar",
width: "100%",
height: "70",
barWidth: "8",
resize: true,
barSpacing: "5",
barColor: "#707cd2",
});
$("#spark10").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
type: "bar",
width: "100%",
height: "70",
barWidth: "8",
resize: true,
barSpacing: "5",
barColor: "#03a9f3",
});
$("#spark11").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
type: "bar",
width: "100%",
height: "70",
barWidth: "8",
resize: true,
barSpacing: "5",
barColor: "#f62d51",
});
$("#sparklinedash").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
type: "bar",
height: "50",
barWidth: "2",
resize: true,
barSpacing: "5",
barColor: "#ffb22b",
});
$("#sparklinedash2").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
type: "bar",
height: "50",
barWidth: "2",
resize: true,
barSpacing: "5",
barColor: "#f64e60",
});
$("#sparklinedash3").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
type: "bar",
height: "50",
barWidth: "2",
resize: true,
barSpacing: "5",
barColor: "#6993ff",
});
$("#sparklinedash4").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
type: "bar",
height: "50",
barWidth: "2",
resize: true,
barSpacing: "5",
barColor: "#2cabe3",
});
$("#sparkline8").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
type: "line",
width: "100%",
height: "50",
lineColor: "#6993ff",
fillColor: "#6993ff",
maxSpotColor: "#6993ff",
highlightLineColor: "rgba(0, 0, 0, 0.2)",
highlightSpotColor: "#6993ff",
});
$("#sparkline9").sparkline([0, 2, 8, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
type: "line",
width: "100%",
height: "50",
lineColor: "#1bc5bd",
fillColor: "#1bc5bd",
minSpotColor: "#1bc5bd",
maxSpotColor: "#1bc5bd",
highlightLineColor: "rgba(0, 0, 0, 0.2)",
highlightSpotColor: "#1bc5bd",
});
$("#sparkline10").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
type: "line",
width: "100%",
height: "50",
lineColor: "#f64e60",
fillColor: "#f64e60",
maxSpotColor: "#f64e60",
highlightLineColor: "rgba(0, 0, 0, 0.2)",
highlightSpotColor: "#f64e60",
});
};
var sparkResize;
$(window).resize(function (e) {
clearTimeout(sparkResize);
sparkResize = setTimeout(sparklineLogin, 500);
});
sparklineLogin();
// ==============================================================
// Download count
// ==============================================================
new Chartist.Bar(
".download-state",
{
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4],
],
},
{
high: 11,
low: 0,
showArea: true,
seriesBarDistance: 10,
fullWidth: true,
plugins: [Chartist.plugins.tooltip()],
axisX: {
// On the x-axis start means top and end means bottom
showGrid: false,
},
},
{}
);
// ==============================================================
// Our Visitor
// ==============================================================
var chart = c3.generate({
bindto: "#visitor",
data: {
columns: [
["Open", 45],
["Clicked", 15],
["Un-opened", 27],
["Bounced", 18],
],
type: "donut",
tooltip: {
show: true,
},
},
donut: {
label: {
show: false,
},
title: "Ratio",
width: 35,
},
legend: {
hide: true,
//or hide: 'data1'
//or hide: ['data1', 'data2']
},
color: {
pattern: ["#40c4ff", "#2961ff", "#ff821c", "#7e74fb"],
},
});
// ==============================================================
// Foo1 total visit
// ==============================================================
var opts = {
angle: 0, // The span of the gauge arc
lineWidth: 0.2, // The line thickness
radiusScale: 0.7, // Relative radius
pointer: {
length: 0.64, // // Relative to gauge radius
strokeWidth: 0.04, // The thickness
color: "#000000", // Fill color
},
limitMax: false, // If false, the max value of the gauge will be updated if value surpass max
limitMin: false, // If true, the min value of the gauge will be fixed unless you set it manually
colorStart: "#009efb", // Colors
colorStop: "#009efb", // just experiment with them
strokeColor: "#E0E0E0", // to see which ones work best for you
generateGradient: true,
highDpiSupport: true, // High resolution support
};
var target = document.getElementById("foo"); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 45; // set animation speed (32 is default value)
gauge.set(1850); // set actual value
// ==============================================================
// Foo1 total visit
// ==============================================================
var opts = {
angle: 0, // The span of the gauge arc
lineWidth: 0.2, // The line thickness
radiusScale: 0.7, // Relative radius
pointer: {
length: 0.64, // // Relative to gauge radius
strokeWidth: 0.04, // The thickness
color: "#000000", // Fill color
},
limitMax: false, // If false, the max value of the gauge will be updated if value surpass max
limitMin: false, // If true, the min value of the gauge will be fixed unless you set it manually
colorStart: "#707cd2", // Colors
colorStop: "#707cd2", // just experiment with them
strokeColor: "#E0E0E0", // to see which ones work best for you
generateGradient: true,
highDpiSupport: true, // High resolution support
};
var target = document.getElementById("foo2"); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 45; // set animation speed (32 is default value)
gauge.set(850); // set actual value
// ==============================================================
// Foo1 total visit
// ==============================================================
var opts = {
angle: 0, // The span of the gauge arc
lineWidth: 0.2, // The line thickness
radiusScale: 0.7, // Relative radius
pointer: {
length: 0.64, // // Relative to gauge radius
strokeWidth: 0.04, // The thickness
color: "#000000", // Fill color
},
limitMax: false, // If false, the max value of the gauge will be updated if value surpass max
limitMin: false, // If true, the min value of the gauge will be fixed unless you set it manually
colorStart: "#f62d51", // Colors
colorStop: "#f62d51", // just experiment with them
strokeColor: "#E0E0E0", // to see which ones work best for you
generateGradient: true,
highDpiSupport: true, // High resolution support
};
var target = document.getElementById("foo3"); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 45; // set animation speed (32 is default value)
gauge.set(1250); // set actual value
// ==============================================================
// Foo1 total visit
// ==============================================================
var opts = {
angle: 0, // The span of the gauge arc
lineWidth: 0.2, // The line thickness
radiusScale: 0.7, // Relative radius
pointer: {
length: 0.64, // // Relative to gauge radius
strokeWidth: 0.04, // The thickness
color: "#000000", // Fill color
},
limitMax: false, // If false, the max value of the gauge will be updated if value surpass max
limitMin: false, // If true, the min value of the gauge will be fixed unless you set it manually
colorStart: "#26c6da", // Colors
colorStop: "#26c6da", // just experiment with them
strokeColor: "#E0E0E0", // to see which ones work best for you
generateGradient: true,
highDpiSupport: true, // High resolution support
};
var target = document.getElementById("foo4"); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 45; // set animation speed (32 is default value)
gauge.set(2850); // set actual value
});