Primer Commit
This commit is contained in:
LuisAngelSalinasl
533
dist/js/pages/widget/widget-charts.js
vendored
Normal file
533
dist/js/pages/widget/widget-charts.js
vendored
Normal file
@@ -0,0 +1,533 @@
|
||||
/*
|
||||
Template Name: Admin Template
|
||||
Author: Wrappixel
|
||||
|
||||
File: js
|
||||
*/
|
||||
$(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: '#7460ee',
|
||||
fillColor: '#7460ee',
|
||||
maxSpotColor: '#7460ee',
|
||||
highlightLineColor: 'rgba(0, 0, 0, 0.2)',
|
||||
highlightSpotColor: '#7460ee'
|
||||
});
|
||||
$("#spark4").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '50',
|
||||
lineColor: '#fff',
|
||||
fillColor: '#7460ee',
|
||||
maxSpotColor: '#7460ee',
|
||||
highlightLineColor: 'rgba(0, 0, 0, 0.2)',
|
||||
highlightSpotColor: '#7460ee'
|
||||
});
|
||||
$("#spark5").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '50',
|
||||
lineColor: '#fff',
|
||||
fillColor: '#2962FF',
|
||||
maxSpotColor: '#2962FF',
|
||||
highlightLineColor: 'rgba(0, 0, 0, 0.2)',
|
||||
highlightSpotColor: '#2962FF'
|
||||
});
|
||||
$("#spark6").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '50',
|
||||
lineColor: '#fff',
|
||||
fillColor: '#36bea6',
|
||||
maxSpotColor: '#36bea6',
|
||||
highlightLineColor: 'rgba(0, 0, 0, 0.2)',
|
||||
highlightSpotColor: '#36bea6'
|
||||
});
|
||||
$("#spark7").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '50',
|
||||
lineColor: '#fff',
|
||||
fillColor: '#ffbc34',
|
||||
maxSpotColor: '#ffbc34',
|
||||
highlightLineColor: 'rgba(0, 0, 0, 0.2)',
|
||||
highlightSpotColor: '#ffbc34'
|
||||
});
|
||||
$('#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: '#7460ee'
|
||||
});
|
||||
$('#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: '#26c6da'
|
||||
});
|
||||
$('#sparklinedash2').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
|
||||
type: 'bar',
|
||||
height: '50',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
barSpacing: '5',
|
||||
barColor: '#7460ee'
|
||||
});
|
||||
$('#sparklinedash3').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
|
||||
type: 'bar',
|
||||
height: '50',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
barSpacing: '5',
|
||||
barColor: '#03a9f3'
|
||||
});
|
||||
$('#sparklinedash4').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
|
||||
type: 'bar',
|
||||
height: '50',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
barSpacing: '5',
|
||||
barColor: '#f62d51'
|
||||
});
|
||||
}
|
||||
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: '#7460ee', // Colors
|
||||
colorStop: '#7460ee', // 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
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user