added admin interface
This commit is contained in:
kicap1992
306
admin/assets/js/pages/charts/chart-widgets.js
Normal file
306
admin/assets/js/pages/charts/chart-widgets.js
Normal file
@ -0,0 +1,306 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
|
||||
// top products =================
|
||||
var dataStackedBar = {
|
||||
labels: ['Q1','Q2','Q3','Q4','Q5','Q6','Q7'],
|
||||
series: [
|
||||
[2350,3205,4520,2351,5632,3205,4520],
|
||||
[2541,2583,1592,2674,2323,1592,2674],
|
||||
[1212,5214,2325,4235,2519,1212,5214],
|
||||
]
|
||||
};
|
||||
new Chartist.Bar('#chart-top-products', dataStackedBar, {
|
||||
height: "250px",
|
||||
stackBars: true,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return (value / 1000) + 'k';
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true
|
||||
}),
|
||||
Chartist.plugins.legend({
|
||||
legendNames: ['Data 1', 'Data 2', 'Data 3']
|
||||
})
|
||||
]
|
||||
}).on('draw', function(data) {
|
||||
if (data.type === 'bar') {
|
||||
data.element.attr({
|
||||
style: 'stroke-width: 20px'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Total Sale =================
|
||||
$('.knob2').knob({
|
||||
'format' : function (value) {
|
||||
return value + '%';
|
||||
}
|
||||
});
|
||||
|
||||
// Income Analysis =================
|
||||
$('.sparkline-pie').sparkline('html', {
|
||||
type: 'pie',
|
||||
offset: 90,
|
||||
width: '160px',
|
||||
height: '160px',
|
||||
sliceColors: ['#182973', '#29bd73', '#ffcd55']
|
||||
})
|
||||
$('#sparkline-compositeline').sparkline('html', {
|
||||
fillColor: false,
|
||||
lineColor: '#445771',
|
||||
width: '200px',
|
||||
height: '30px',
|
||||
lineWidth: '1',
|
||||
});
|
||||
$('#sparkline-compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7], {
|
||||
composite: true,
|
||||
fillColor: false,
|
||||
lineColor: '#182973',
|
||||
lineWidth: '1',
|
||||
chartRangeMin: 0,
|
||||
chartRangeMax: 10
|
||||
});
|
||||
$('#sparkline-compositeline').sparkline([6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7, 4, 1, 5, 7, 9, 9, 8, 7, 6], {
|
||||
composite: true,
|
||||
fillColor: false,
|
||||
lineColor: '#ffcd55',
|
||||
lineWidth: '1',
|
||||
chartRangeMin: 0,
|
||||
chartRangeMax: 10
|
||||
});
|
||||
|
||||
$('.sparkline-pie2').sparkline('html', {
|
||||
type: 'pie',
|
||||
offset: 90,
|
||||
width: '160px',
|
||||
height: '160px',
|
||||
sliceColors: ['#05b4d8', '#35cd3a', '#716aca']
|
||||
})
|
||||
|
||||
// =================
|
||||
$('.sparkbar').sparkline('html', { type: 'bar' });
|
||||
|
||||
|
||||
// BTC =================
|
||||
$('#sparkline16').sparkline([155, 161, 170, 205, 198, 245, 279, 301, 423], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '390',
|
||||
chartRangeMax:100,
|
||||
resize: true,
|
||||
lineColor: '#84b3df',
|
||||
fillColor: '#182973',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
});
|
||||
$('#sparkline16').sparkline([4, 5, 7, 5, 10, 12, 22, 32, 41, 32], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '290',
|
||||
chartRangeMax: 100,
|
||||
lineColor: '#8f8ff0',
|
||||
fillColor: '#29bd73',
|
||||
composite: true,
|
||||
resize: true,
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
});
|
||||
|
||||
// Our Location ======
|
||||
var mapData = {
|
||||
"US": 298,
|
||||
"AU": 760,
|
||||
"CA": 870,
|
||||
"IN": 2000000,
|
||||
"GB": 120,
|
||||
};
|
||||
if( $('#world-map-markers').length > 0 ){
|
||||
$('#world-map-markers').vectorMap(
|
||||
{
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#fff',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 0,
|
||||
color: '#e6e6e6',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#ebebeb'
|
||||
}
|
||||
},
|
||||
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 5,
|
||||
'fill': '#fff',
|
||||
'fill-opacity':1,
|
||||
'stroke': '#000',
|
||||
'stroke-width' : 1,
|
||||
'stroke-opacity': 0.4
|
||||
},
|
||||
},
|
||||
|
||||
markers: [
|
||||
{ latLng: [37.09,-95.71], name: 'America' },
|
||||
{ latLng: [-25.27, 133.77], name: 'Australia' },
|
||||
{ latLng: [56.13,-106.34], name: 'Canada' },
|
||||
{ latLng: [20.59,78.96], name: 'India' },
|
||||
{ latLng: [55.37,-3.43], name: 'United Kingdom' },
|
||||
],
|
||||
|
||||
series: {
|
||||
regions: [{
|
||||
values: {
|
||||
"US": '#bdf3f5',
|
||||
"AU": '#f9f1d8',
|
||||
"IN": '#ffd4c3',
|
||||
"GB": '#e0eff5',
|
||||
"CA": '#efebf4',
|
||||
},
|
||||
attribute: 'fill'
|
||||
}]
|
||||
},
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
zoomOnScroll: false,
|
||||
scaleColors: ['#000000', '#000000'],
|
||||
selectedColor: '#000000',
|
||||
selectedRegions: [],
|
||||
enableZoom: false,
|
||||
hoverColor: '#fff',
|
||||
});
|
||||
}
|
||||
|
||||
// line chart =========================
|
||||
var data = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
|
||||
]
|
||||
};
|
||||
var options = {
|
||||
height: "300px",
|
||||
showPoint: true,
|
||||
lineSmooth: true,
|
||||
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true
|
||||
}),
|
||||
]
|
||||
};
|
||||
new Chartist.Line('#newline_chart', data, options);
|
||||
|
||||
// donut chart
|
||||
var dataDonut = {
|
||||
series: [20, 10, 25, 40, 5]
|
||||
};
|
||||
new Chartist.Pie('#donut_chart', dataDonut, {
|
||||
height: "220px",
|
||||
donut: true,
|
||||
donutWidth: 25,
|
||||
donutSolid: true,
|
||||
startAngle: 270,
|
||||
showLabel: true
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Visitors Statistics =============
|
||||
$(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
|
||||
},
|
||||
selection: {
|
||||
mode: "x"
|
||||
},
|
||||
grid: {
|
||||
markings: weekendAreas,
|
||||
borderColor: '#eaeaea',
|
||||
tickColor: '#eaeaea',
|
||||
hoverable: true,
|
||||
borderWidth: 1,
|
||||
}
|
||||
};
|
||||
|
||||
var plot = $.plot("#Visitors_chart", [d], options);
|
||||
|
||||
// now connect the two
|
||||
|
||||
$("#Visitors_chart").bind("plotselected", function (event, ranges) {
|
||||
|
||||
// do the zooming
|
||||
$.each(plot.getXAxes(), function(_, axis) {
|
||||
var opts = axis.options;
|
||||
opts.min = ranges.xaxis.from;
|
||||
opts.max = ranges.xaxis.to;
|
||||
});
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
plot.clearSelection();
|
||||
|
||||
// don't fire event on the overview to prevent eternal loop
|
||||
|
||||
overview.setSelection(ranges, true);
|
||||
|
||||
});
|
||||
|
||||
// Add the Flot version string to the footer
|
||||
|
||||
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
276
admin/assets/js/pages/charts/chartjs.js
Normal file
276
admin/assets/js/pages/charts/chartjs.js
Normal file
@ -0,0 +1,276 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
new Chart(document.getElementById("radar_chart").getContext("2d"), getChartJs('radar'));
|
||||
});
|
||||
function getChartJs(type) {
|
||||
var config = null;
|
||||
if (type === 'radar') {
|
||||
config = {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [65, 25, 90, 81, 56, 55, 40],
|
||||
borderColor: 'rgba(1,188,210, 0.8)',
|
||||
backgroundColor: 'rgba(1,188,210, 0.5)',
|
||||
pointBorderColor: 'rgba(1,188,210, 0)',
|
||||
pointBackgroundColor: 'rgba(1,188,210, 0.8)',
|
||||
pointBorderWidth: 1
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
data: [72, 48, 40, 19, 96, 27, 100],
|
||||
borderColor: 'rgba(36,42,43, 0.8)',
|
||||
backgroundColor: 'rgba(36,42,43, 0.5)',
|
||||
pointBorderColor: 'rgba(36,42,43, 0)',
|
||||
pointBackgroundColor: 'rgba(36,42,43, 0.8)',
|
||||
pointBorderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
}
|
||||
return config;
|
||||
}
|
||||
|
||||
//=========================
|
||||
$(function() {
|
||||
"use strict";
|
||||
var options;
|
||||
|
||||
var data = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
|
||||
]
|
||||
};
|
||||
|
||||
// line chart
|
||||
options = {
|
||||
height: "300px",
|
||||
showPoint: true,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
lineSmooth: false,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true
|
||||
}),
|
||||
]
|
||||
};
|
||||
new Chartist.Line('#line-chart', data, options);
|
||||
|
||||
|
||||
// bar chart
|
||||
options = {
|
||||
height: "300px",
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true
|
||||
}),
|
||||
]
|
||||
};
|
||||
new Chartist.Bar('#bar-chart', data, options);
|
||||
|
||||
|
||||
// area chart
|
||||
options = {
|
||||
height: "270px",
|
||||
showArea: true,
|
||||
showLine: false,
|
||||
showPoint: true,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
lineSmooth: false,
|
||||
};
|
||||
new Chartist.Line('#area-chart', data, options);
|
||||
|
||||
|
||||
// multiple chart
|
||||
var dataMultiple = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [{
|
||||
name: 'series-real',
|
||||
data: [200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
|
||||
}, {
|
||||
name: 'series-projection',
|
||||
data: [240, 350, 360, 380, 400, 450, 480, 523, 555, 600, 700, 800],
|
||||
}]
|
||||
};
|
||||
options = {
|
||||
lineSmooth: false,
|
||||
height: "230px",
|
||||
low: 0,
|
||||
high: 'auto',
|
||||
series: {
|
||||
'series-projection': {
|
||||
showPoint: true,
|
||||
},
|
||||
},
|
||||
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
},
|
||||
|
||||
plugins: [
|
||||
Chartist.plugins.legend({
|
||||
legendNames: ['Actual', 'Projection']
|
||||
})
|
||||
]
|
||||
};
|
||||
new Chartist.Line('#multiple-chart', dataMultiple, options);
|
||||
|
||||
|
||||
// pie chart
|
||||
var dataPie = {
|
||||
series: [5, 3, 4]
|
||||
};
|
||||
var labels = ['Direct', 'Organic', 'Referral'];
|
||||
var sum = function(a, b) {
|
||||
return a + b;
|
||||
};
|
||||
new Chartist.Pie('#pie-chart', dataPie, {
|
||||
height: "270px",
|
||||
labelInterpolationFnc: function(value, idx) {
|
||||
var percentage = Math.round(value / dataPie.series.reduce(sum) * 100) + '%';
|
||||
return labels[idx] + ' (' + percentage + ')';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// donut chart
|
||||
var dataDonut = {
|
||||
series: [20, 10, 30, 40]
|
||||
};
|
||||
new Chartist.Pie('#donut-chart', dataDonut, {
|
||||
height: "270px",
|
||||
donut: true,
|
||||
donutWidth: 60,
|
||||
donutSolid: true,
|
||||
startAngle: 270,
|
||||
showLabel: true
|
||||
});
|
||||
|
||||
|
||||
// stacked bar chart
|
||||
var dataStackedBar = {
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
series: [
|
||||
[800000, 1200000, 360000, 1300000],
|
||||
[200000, 400000, 500000, 300000],
|
||||
[100000, 200000, 400000, 600000]
|
||||
]
|
||||
};
|
||||
new Chartist.Bar('#stackedbar-chart', dataStackedBar, {
|
||||
height: "270px",
|
||||
stackBars: true,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return (value / 1000) + 'k';
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true
|
||||
}),
|
||||
]
|
||||
}).on('draw', function(data) {
|
||||
if (data.type === 'bar') {
|
||||
data.element.attr({
|
||||
style: 'stroke-width: 30px'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// horizontal bar chart
|
||||
var dataHorizontalBar = {
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3],
|
||||
[3, 2, 9, 5, 4, 6, 4]
|
||||
]
|
||||
};
|
||||
new Chartist.Bar('#horizontalbar-chart', dataHorizontalBar, {
|
||||
height: "270px",
|
||||
seriesBarDistance: 15,
|
||||
reverseData: true,
|
||||
horizontalBars: true,
|
||||
axisY: {
|
||||
offset: 75
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
var chartColors = window.chartColors;
|
||||
var color = Chart.helpers.color;
|
||||
var config = {
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: [
|
||||
color(chartColors.red).alpha(0.5).rgbString(),
|
||||
color(chartColors.orange).alpha(0.5).rgbString(),
|
||||
color(chartColors.yellow).alpha(0.5).rgbString(),
|
||||
color(chartColors.green).alpha(0.5).rgbString(),
|
||||
color(chartColors.blue).alpha(0.5).rgbString(),
|
||||
],
|
||||
label: 'My dataset' // for legend
|
||||
}],
|
||||
labels: [
|
||||
"Red",
|
||||
"Orange",
|
||||
"Yellow",
|
||||
"Green",
|
||||
"Blue"
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'right',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Polar Area Chart'
|
||||
},
|
||||
scale: {
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
reverse: false
|
||||
},
|
||||
animation: {
|
||||
animateRotate: false,
|
||||
animateScale: true
|
||||
}
|
||||
}
|
||||
};
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById("chart-area");
|
||||
window.myPolarArea = Chart.PolarArea(ctx, config);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
651
admin/assets/js/pages/charts/echart.js
Normal file
651
admin/assets/js/pages/charts/echart.js
Normal file
@ -0,0 +1,651 @@
|
||||
|
||||
// Bar Area
|
||||
$(function() {
|
||||
"use strict";
|
||||
var barArea = getChart("echart-bar_area")
|
||||
var app = {};
|
||||
var option = {};
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
for (var i = 0; i < 100; i++) {
|
||||
xAxisData.push('bar' + i);
|
||||
data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
|
||||
data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
|
||||
}
|
||||
option = {
|
||||
|
||||
legend: {
|
||||
data: ['bar', 'bar2'],
|
||||
align: 'right',
|
||||
bottom: '0',
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'15%',
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
silent: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
data: data1,
|
||||
color: '#a27ce6',
|
||||
animationDelay: function (idx) {
|
||||
return idx * 10;
|
||||
}
|
||||
}, {
|
||||
name: 'bar2',
|
||||
type: 'bar',
|
||||
data: data2,
|
||||
color: '#1ab1e3',
|
||||
|
||||
animationDelay: function (idx) {
|
||||
return idx * 5 + 100;
|
||||
}
|
||||
}],
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelayUpdate: function (idx) {
|
||||
return idx * 5;
|
||||
}
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
barArea.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
barArea.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Rainfall and Evaporation
|
||||
$(function() {
|
||||
"use strict";
|
||||
var app = {};
|
||||
var option = {};
|
||||
var rainFall = getChart("echart-rainfall");
|
||||
option = {
|
||||
legend: {
|
||||
data:['data1','data2'],
|
||||
bottom: '0',
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'15%',
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
calculable : true,
|
||||
|
||||
xAxis : {
|
||||
type : 'category',
|
||||
data : ['Jan','Feb','Mar','Apr','May','Jun','July','Aug','Sept','Oct','Nov','Dec'],
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
yAxis : {
|
||||
type : 'value',
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name:'data1',
|
||||
type:'bar',
|
||||
color: '#45e5c3',
|
||||
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||
markPoint : {
|
||||
data : [
|
||||
{type : 'max', name: 'Max'},
|
||||
{type : 'min', name: 'Min'}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name: 'Average'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'data2',
|
||||
type:'bar',
|
||||
color: '#288cff',
|
||||
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||
markPoint : {
|
||||
data : [
|
||||
{name : 'Highest', value : 182.2, xAxis: 7, yAxis: 183},
|
||||
{name : 'Minimum', value : 2.3, xAxis: 11, yAxis: 3}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name : 'Average'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
rainFall.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
rainFall.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Dynamic Data
|
||||
$(function() {
|
||||
"use strict";
|
||||
var dynamicData = getChart("echart-dynamic_data");
|
||||
var app = {};
|
||||
var option = {};
|
||||
|
||||
option = {
|
||||
legend: {
|
||||
data:['Latest transaction price', 'Pre-order queue']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#283b56'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataZoom: {
|
||||
show: false,
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: (function (){
|
||||
var now = new Date();
|
||||
var res = [];
|
||||
var len = 10;
|
||||
while (len--) {
|
||||
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
|
||||
now = new Date(now - 2000);
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: (function (){
|
||||
var res = [];
|
||||
var len = 10;
|
||||
while (len--) {
|
||||
res.push(10 - len - 1);
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
name: 'price',
|
||||
max: 30,
|
||||
min: 0,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
max: 1200,
|
||||
min: 0,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
color: '#5b39b1',
|
||||
name:'queue',
|
||||
type:'bar',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
data:(function (){
|
||||
var res = [];
|
||||
var len = 10;
|
||||
while (len--) {
|
||||
res.push(Math.round(Math.random() * 1000));
|
||||
}
|
||||
return res;
|
||||
})()
|
||||
},
|
||||
{
|
||||
color: '#45e5c3',
|
||||
name:'Latest transaction',
|
||||
type:'line',
|
||||
data:(function (){
|
||||
var res = [];
|
||||
var len = 0;
|
||||
while (len < 10) {
|
||||
res.push((Math.random()*10 + 5).toFixed(1) - 0);
|
||||
len++;
|
||||
}
|
||||
return res;
|
||||
})()
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
dynamicData.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
dynamicData.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Basic Candlestick
|
||||
$(function() {
|
||||
"use strict";
|
||||
var candleStick = getChart("echart-candlestick");
|
||||
var app = {};
|
||||
var option = {};
|
||||
|
||||
option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'8%',
|
||||
},
|
||||
xAxis: {
|
||||
data: ['2018-10-24', '2018-10-25', '2018-10-26', '2018-10-27'],
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'k',
|
||||
data: [
|
||||
{
|
||||
itemStyle:{
|
||||
color: '#1ab1e3',
|
||||
borderColor: '#1ab1e3',
|
||||
},
|
||||
value: [20, 30, 10, 35]
|
||||
},
|
||||
{
|
||||
itemStyle:{
|
||||
color: '#a27ce6',
|
||||
color0: '#a27ce6',
|
||||
borderColor: '#a27ce6',
|
||||
borderColor0: '#a27ce6',
|
||||
},
|
||||
value: [40, 35, 30, 55]
|
||||
},
|
||||
{
|
||||
itemStyle:{
|
||||
color: '#1ab1e3',
|
||||
borderColor: '#1ab1e3',
|
||||
},
|
||||
value: [33, 38, 33, 40]
|
||||
},
|
||||
{
|
||||
itemStyle:{
|
||||
color: '#ffc323',
|
||||
borderColor: '#ffc323',
|
||||
},
|
||||
value: [40, 40, 32, 42]
|
||||
},
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
if (option && typeof option === "object") {
|
||||
candleStick.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
candleStick.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Basic Scatter Chart
|
||||
$(function() {
|
||||
"use strict";
|
||||
var basicScatter = getChart("echart-basic_scatter");
|
||||
var app = {};
|
||||
var option = {};
|
||||
|
||||
option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'5%',
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
symbolSize: 15,
|
||||
color: '#1ab1e3',
|
||||
data: [
|
||||
[10.0, 8.04],
|
||||
[8.0, 6.95],
|
||||
[13.0, 7.58],
|
||||
[9.0, 8.81],
|
||||
[11.0, 8.33],
|
||||
[14.0, 9.96],
|
||||
[6.0, 7.24],
|
||||
[4.0, 4.26],
|
||||
[12.0, 10.84],
|
||||
[7.0, 4.82],
|
||||
[5.0, 5.68]
|
||||
],
|
||||
type: 'scatter'
|
||||
}]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
basicScatter.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
basicScatter.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Doughnut Chart
|
||||
$(function() {
|
||||
"use strict";
|
||||
var doughnutChart = getChart("echart-doughnut");
|
||||
var app = {};
|
||||
var option = {};
|
||||
|
||||
option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'5%',
|
||||
},
|
||||
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data:['Data1','Data2','Data3','Data4','Data5']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'Access source',
|
||||
type:'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{value:335, name:'Data1', itemStyle: {color: '#ffc323',}},
|
||||
{value:310, name:'Data2', itemStyle: {color: '#ff758e',}},
|
||||
{value:234, name:'Data3', itemStyle: {color: '#49c5b6',}},
|
||||
{value:135, name:'Data4', itemStyle: {color: '#60bafd',}},
|
||||
{value:1548, name:'Data5', itemStyle: {color: '#a27ce6',}}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
doughnutChart.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
doughnutChart.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Large scale area chart
|
||||
$(function() {
|
||||
"use strict";
|
||||
var largescaleArea = getChart("echart-large_scale_area");
|
||||
var app = {};
|
||||
var option = {};
|
||||
var base = +new Date(1968, 9, 3);
|
||||
var oneDay = 24 * 3600 * 1000;
|
||||
var date = [];
|
||||
|
||||
var data = [Math.random() * 300];
|
||||
|
||||
for (var i = 1; i < 20000; i++) {
|
||||
var now = new Date(base += oneDay);
|
||||
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
|
||||
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
||||
}
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
position: function (pt) {
|
||||
return [pt[0], '10%'];
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'20%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: date,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, '100%'],
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
dataZoom: [{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 10
|
||||
}, {
|
||||
start: 0,
|
||||
end: 10,
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
name:'Simulation data',
|
||||
type:'line',
|
||||
smooth:true,
|
||||
symbol: 'none',
|
||||
sampling: 'average',
|
||||
itemStyle: {
|
||||
color: '#f8f9fa',
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 158, 68)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(255, 70, 131)'
|
||||
}])
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
largescaleArea.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
largescaleArea.resize();
|
||||
});
|
||||
});
|
||||
|
||||
function getChart(id){
|
||||
var dom = document.getElementById(id);
|
||||
return echarts.init(dom);
|
||||
}
|
||||
1487
admin/assets/js/pages/charts/flot.js
Normal file
1487
admin/assets/js/pages/charts/flot.js
Normal file
File diff suppressed because it is too large
Load Diff
47
admin/assets/js/pages/charts/jquery-knob.js
vendored
Normal file
47
admin/assets/js/pages/charts/jquery-knob.js
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.knob').knob({
|
||||
draw: function () {
|
||||
// "tron" case
|
||||
if (this.$.data('skin') == 'tron') {
|
||||
|
||||
var a = this.angle(this.cv) // Angle
|
||||
, sa = this.startAngle // Previous start angle
|
||||
, sat = this.startAngle // Start angle
|
||||
, ea // Previous end angle
|
||||
, eat = sat + a // End angle
|
||||
, r = true;
|
||||
|
||||
this.g.lineWidth = this.lineWidth;
|
||||
|
||||
this.o.cursor
|
||||
&& (sat = eat - 0.3)
|
||||
&& (eat = eat + 0.3);
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
ea = this.startAngle + this.angle(this.value);
|
||||
this.o.cursor
|
||||
&& (sa = ea - 0.3)
|
||||
&& (ea = ea + 0.3);
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.previousColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
|
||||
this.g.stroke();
|
||||
}
|
||||
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
|
||||
this.g.stroke();
|
||||
|
||||
this.g.lineWidth = 2;
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.o.fgColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
|
||||
this.g.stroke();
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
1
admin/assets/js/pages/charts/jquery-knob.min.js
vendored
Normal file
1
admin/assets/js/pages/charts/jquery-knob.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
$(function(){$(".knob").knob({draw:function(){if("tron"==this.$.data("skin")){var t,i=this.angle(this.cv),s=this.startAngle,h=this.startAngle,r=h+i,e=!0;return this.g.lineWidth=this.lineWidth,this.o.cursor&&(h=r-.3)&&(r+=.3),this.o.displayPrevious&&(t=this.startAngle+this.angle(this.value),this.o.cursor&&(s=t-.3)&&(t+=.3),this.g.beginPath(),this.g.strokeStyle=this.previousColor,this.g.arc(this.xy,this.xy,this.radius-this.lineWidth,s,t,!1),this.g.stroke()),this.g.beginPath(),this.g.strokeStyle=e?this.o.fgColor:this.fgColor,this.g.arc(this.xy,this.xy,this.radius-this.lineWidth,h,r,!1),this.g.stroke(),this.g.lineWidth=2,this.g.beginPath(),this.g.strokeStyle=this.o.fgColor,this.g.arc(this.xy,this.xy,this.radius-this.lineWidth+1+2*this.lineWidth/3,0,2*Math.PI,!1),this.g.stroke(),!1}}})});
|
||||
299
admin/assets/js/pages/charts/morris.js
Normal file
299
admin/assets/js/pages/charts/morris.js
Normal file
@ -0,0 +1,299 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
MorrisArea();
|
||||
MorrisLineChart();
|
||||
MorrisDonutChart();
|
||||
MorrisBarChart();
|
||||
});
|
||||
|
||||
// Morris-chart
|
||||
function MorrisArea() {
|
||||
Morris.Area({
|
||||
element: 'm_area_chart',
|
||||
data: [{
|
||||
period: '2011',
|
||||
iphone: 45,
|
||||
ipad: 75,
|
||||
itouch: 18
|
||||
}, {
|
||||
period: '2012',
|
||||
iphone: 130,
|
||||
ipad: 110,
|
||||
itouch: 82
|
||||
}, {
|
||||
period: '2013',
|
||||
iphone: 80,
|
||||
ipad: 60,
|
||||
itouch: 85
|
||||
}, {
|
||||
period: '2014',
|
||||
iphone: 78,
|
||||
ipad: 205,
|
||||
itouch: 135
|
||||
}, {
|
||||
period: '2015',
|
||||
iphone: 180,
|
||||
ipad: 124,
|
||||
itouch: 140
|
||||
}, {
|
||||
period: '2016',
|
||||
iphone: 105,
|
||||
ipad: 100,
|
||||
itouch: 85
|
||||
},
|
||||
{
|
||||
period: '2017',
|
||||
iphone: 210,
|
||||
ipad: 180,
|
||||
itouch: 120
|
||||
}
|
||||
],
|
||||
xkey: 'period',
|
||||
ykeys: ['iphone', 'ipad', 'itouch'],
|
||||
labels: ['iPhone', 'iPad', 'iPod Touch'],
|
||||
pointSize: 2,
|
||||
fillOpacity: 0,
|
||||
pointStrokeColors: ['#242a2b', '#00bcd2', '#c0d0d6'],
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: '#eeeeee',
|
||||
lineWidth: 2,
|
||||
hideHover: 'auto',
|
||||
lineColors: ['#242a2b', '#00bcd2', '#c0d0d6'],
|
||||
resize: true
|
||||
|
||||
});
|
||||
Morris.Area({
|
||||
element: 'm_area_chart2',
|
||||
data: [{
|
||||
period: '2012',
|
||||
SiteA: 0,
|
||||
SiteB: 10,
|
||||
|
||||
}, {
|
||||
period: '2013',
|
||||
SiteA: 106,
|
||||
SiteB: 71,
|
||||
|
||||
}, {
|
||||
period: '2014',
|
||||
SiteA: 68,
|
||||
SiteB: 41,
|
||||
|
||||
}, {
|
||||
period: '2015',
|
||||
SiteA: 89,
|
||||
SiteB: 285,
|
||||
|
||||
}, {
|
||||
period: '2016',
|
||||
SiteA: 185,
|
||||
SiteB: 104,
|
||||
|
||||
}, {
|
||||
period: '2017',
|
||||
SiteA: 146,
|
||||
SiteB: 102 ,
|
||||
|
||||
}
|
||||
],
|
||||
xkey: 'period',
|
||||
ykeys: ['SiteA', 'SiteB'],
|
||||
labels: ['Site A', 'Site B'],
|
||||
pointSize: 0,
|
||||
fillOpacity: 0.8,
|
||||
pointStrokeColors: ['#242a2b', '#5dd0fc'],
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: '#eeeeee',
|
||||
lineWidth: 0,
|
||||
smooth: false,
|
||||
hideHover: 'auto',
|
||||
lineColors: ['#242a2b', '#5dd0fc'],
|
||||
resize: true
|
||||
|
||||
});
|
||||
|
||||
Morris.Area({
|
||||
element: 'e_area_chart',
|
||||
data: [{
|
||||
period: '2011',
|
||||
iphone: 10,
|
||||
ipad: 5,
|
||||
itouch: 7
|
||||
}, {
|
||||
period: '2012',
|
||||
iphone: 35,
|
||||
ipad: 89,
|
||||
itouch: 45
|
||||
}, {
|
||||
period: '2013',
|
||||
iphone: 25,
|
||||
ipad: 15,
|
||||
itouch: 102
|
||||
}, {
|
||||
period: '2014',
|
||||
iphone: 80,
|
||||
ipad: 12,
|
||||
itouch: 7
|
||||
}, {
|
||||
period: '2015',
|
||||
iphone: 30,
|
||||
ipad: 32,
|
||||
itouch: 148
|
||||
}, {
|
||||
period: '2016',
|
||||
iphone: 25,
|
||||
ipad: 127,
|
||||
itouch: 40
|
||||
}, {
|
||||
period: '2017',
|
||||
iphone: 98,
|
||||
ipad: 10,
|
||||
itouch: 26
|
||||
}
|
||||
|
||||
|
||||
],
|
||||
lineColors: ['#00bcd2', '#242a2b', '#c0d0d6'],
|
||||
xkey: 'period',
|
||||
ykeys: ['iphone', 'ipad', 'itouch'],
|
||||
labels: ['Site A', 'Site B', 'Site C'],
|
||||
pointSize: 0,
|
||||
lineWidth: 0,
|
||||
resize: true,
|
||||
fillOpacity: 0.8,
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: '#eeeeee',
|
||||
hideHover: 'auto'
|
||||
|
||||
});
|
||||
}
|
||||
// LINE CHART
|
||||
function MorrisLineChart() {
|
||||
var line = new Morris.Line({
|
||||
element: 'm_line_chart',
|
||||
resize: true,
|
||||
data: [{
|
||||
y: '2014 Q1',
|
||||
item1: 2356
|
||||
},
|
||||
{
|
||||
y: '2015 Q2',
|
||||
item1: 2586
|
||||
},
|
||||
{
|
||||
y: '2015 Q3',
|
||||
item1: 4512
|
||||
},
|
||||
{
|
||||
y: '2015 Q4',
|
||||
item1: 3265
|
||||
},
|
||||
{
|
||||
y: '2016 Q5',
|
||||
item1: 6258
|
||||
},
|
||||
{
|
||||
y: '2016 Q6',
|
||||
item1: 5234
|
||||
},
|
||||
{
|
||||
y: '2016 Q7',
|
||||
item1: 4725
|
||||
},
|
||||
{
|
||||
y: '2016 Q7',
|
||||
item1: 7526
|
||||
},
|
||||
{
|
||||
y: '2017 Q7',
|
||||
item1: 8452
|
||||
},
|
||||
{
|
||||
y: '2017 Q7',
|
||||
item1: 8931
|
||||
}
|
||||
],
|
||||
xkey: 'y',
|
||||
ykeys: ['item1'],
|
||||
labels: ['Item 1'],
|
||||
gridLineColor: '#eeeeee',
|
||||
lineColors: ['#242a2b'],
|
||||
lineWidth: 2,
|
||||
pointSize: 3,
|
||||
hideHover: 'auto'
|
||||
});
|
||||
}
|
||||
// Morris donut chart
|
||||
function MorrisDonutChart() {
|
||||
Morris.Donut({
|
||||
element: 'm_donut_chart',
|
||||
data: [
|
||||
{
|
||||
label: "Online Sales",
|
||||
value: 45,
|
||||
|
||||
}, {
|
||||
label: "Store Sales",
|
||||
value: 35
|
||||
},{
|
||||
label: "Email Sales",
|
||||
value: 8
|
||||
}, {
|
||||
label: "Agent Sales",
|
||||
value: 12
|
||||
}],
|
||||
|
||||
resize: true,
|
||||
colors: ['#2cbfb7', '#3dd1c9', '#60ded7', '#a1ece8']
|
||||
});
|
||||
}
|
||||
// Morris bar chart
|
||||
function MorrisBarChart() {
|
||||
Morris.Bar({
|
||||
element: 'm_bar_chart',
|
||||
data: [{
|
||||
y: '2012',
|
||||
a: 80,
|
||||
b: 56,
|
||||
c: 89
|
||||
}, {
|
||||
y: '2013',
|
||||
a: 75,
|
||||
b: 65,
|
||||
c: 38
|
||||
}, {
|
||||
y: '2014',
|
||||
a: 59,
|
||||
b: 30,
|
||||
c: 37
|
||||
}, {
|
||||
y: '2015',
|
||||
a: 75,
|
||||
b: 65,
|
||||
c: 40
|
||||
}, {
|
||||
y: '2016',
|
||||
a: 55,
|
||||
b: 40,
|
||||
c: 45
|
||||
}, {
|
||||
y: '2017',
|
||||
a: 75,
|
||||
b: 65,
|
||||
c: 40
|
||||
}, {
|
||||
y: '2018',
|
||||
a: 87,
|
||||
b: 88,
|
||||
c: 36
|
||||
}],
|
||||
xkey: 'y',
|
||||
ykeys: ['a', 'b', 'c'],
|
||||
labels: ['A', 'B', 'C'],
|
||||
barColors: ['#55bbc7', '#00bcd2', '#242a2b'],
|
||||
hideHover: 'auto',
|
||||
gridLineColor: '#eeeeee',
|
||||
resize: true
|
||||
});
|
||||
}
|
||||
// Extra chart
|
||||
147
admin/assets/js/pages/charts/peity_chart.js
Normal file
147
admin/assets/js/pages/charts/peity_chart.js
Normal file
@ -0,0 +1,147 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
|
||||
// MINI LINE CHARTS
|
||||
var params = {
|
||||
width: '60px',
|
||||
height: '30px',
|
||||
lineWidth: '2',
|
||||
lineColor: '#1D92AF',
|
||||
fillColor: 'rgba(29,146,175,0.2) ',
|
||||
spotRadius: '2',
|
||||
highlightLineColor: '#aedaff',
|
||||
highlightSpotColor: '#71aadb',
|
||||
spotColor: false,
|
||||
minSpotColor: false,
|
||||
maxSpotColor: false,
|
||||
disableInteraction: false
|
||||
};
|
||||
|
||||
// values from HTML script
|
||||
$('#demo-sparkline-line1').sparkline('html', params);
|
||||
params.lineColor = '#ef2020';
|
||||
params.fillColor = 'rgba(239,32,32,0.2)';
|
||||
$('#demo-sparkline-line2').sparkline('html', params);
|
||||
params.lineColor = '#ff9800';
|
||||
params.fillColor = 'rgba(255,152,0,0.2)';
|
||||
$('#demo-sparkline-line3').sparkline('html', params);
|
||||
params.lineColor = '#7CAC25';
|
||||
params.fillColor = 'rgba(124,172,37,0.2)';
|
||||
$('#demo-sparkline-line4').sparkline('html', params);
|
||||
params.lineColor = '#777';
|
||||
params.fillColor = 'rgba(119,119,119,0.2)';
|
||||
$('#demo-sparkline-line5').sparkline('html', params);
|
||||
|
||||
// values from Javascript
|
||||
var values1 = getRandomValues();
|
||||
|
||||
params.lineColor = '#1D92AF';
|
||||
params.fillColor = false;
|
||||
$('#demo-sparkline-line6').sparkline(values1[0], params);
|
||||
params.lineColor = '#ef2020';
|
||||
params.fillColor = false;
|
||||
$('#demo-sparkline-line7').sparkline(values1[1], params);
|
||||
params.lineColor = '#ff9800';
|
||||
params.fillColor = false;
|
||||
$('#demo-sparkline-line8').sparkline(values1[2], params);
|
||||
params.lineColor = '#7CAC25';
|
||||
params.fillColor = false;
|
||||
$('#demo-sparkline-line9').sparkline(values1[3], params);
|
||||
params.lineColor = '#777';
|
||||
params.fillColor = false;
|
||||
$('#demo-sparkline-line10').sparkline(values1[4], params);
|
||||
|
||||
// composite line
|
||||
$('#demo-sparkline-compositeline').sparkline('html', {
|
||||
fillColor: false,
|
||||
lineColor: '#ff9800',
|
||||
width: '200px',
|
||||
height: '30px',
|
||||
lineWidth: '2',
|
||||
});
|
||||
|
||||
$('#demo-sparkline-compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7], {
|
||||
composite: true,
|
||||
fillColor: false,
|
||||
lineColor: '#777',
|
||||
lineWidth: '2',
|
||||
chartRangeMin: 0,
|
||||
chartRangeMax: 10
|
||||
});
|
||||
|
||||
|
||||
// MINI BAR CHART
|
||||
var values2 = getRandomValues();
|
||||
|
||||
var paramsBar = {
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
height: 25,
|
||||
barColor: '#0E9BE2'
|
||||
};
|
||||
|
||||
$('#mini-bar-chart1').sparkline(values2[0], paramsBar);
|
||||
paramsBar.barColor = '#7CAC25';
|
||||
$('#mini-bar-chart2').sparkline(values2[1], paramsBar);
|
||||
paramsBar.barColor = '#FF4402';
|
||||
$('#mini-bar-chart3').sparkline(values2[2], paramsBar);
|
||||
paramsBar.barColor = '#ff9800';
|
||||
$('#mini-bar-chart4').sparkline(values2[3], paramsBar);
|
||||
paramsBar.barColor = '#777';
|
||||
$('#mini-bar-chart5').sparkline(values2[4], paramsBar);
|
||||
|
||||
// negative values;
|
||||
$('#mini-bar-negative').sparkline('html', paramsBar);
|
||||
|
||||
// stacked bar
|
||||
$('#mini-bar-stacked').sparkline('html', paramsBar);
|
||||
|
||||
// composite bar
|
||||
$('#demo-sparkline-compositebar').sparkline('html', {
|
||||
type: 'bar',
|
||||
barColor: '#7CAC25',
|
||||
barWidth: 5,
|
||||
height: 25,
|
||||
});
|
||||
|
||||
$('#demo-sparkline-compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6], {
|
||||
composite: true,
|
||||
fillColor: false,
|
||||
lineColor: '#777',
|
||||
});
|
||||
|
||||
|
||||
// MINI PIE CHARTS
|
||||
var paramsPie = {
|
||||
type: "pie",
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
sliceColors: ["#0E9BE2", "#ff9800", "#7CAC25"]
|
||||
};
|
||||
|
||||
$('#mini-pie-chart1').sparkline('html', paramsPie);
|
||||
$('#mini-pie-chart2').sparkline('html', paramsPie);
|
||||
$('#mini-pie-chart3').sparkline('html', paramsPie);
|
||||
$('#mini-pie-chart4').sparkline('html', paramsPie);
|
||||
$('#mini-pie-chart5').sparkline('html', paramsPie);
|
||||
$('#mini-pie-chart6').sparkline('html', paramsPie);
|
||||
|
||||
|
||||
function getRandomValues() {
|
||||
// data setup
|
||||
var values = new Array(20);
|
||||
|
||||
for (var i = 0; i < values.length; i++) {
|
||||
values[i] = [5 + randomVal(), 10 + randomVal(), 15 + randomVal(), 20 + randomVal(), 30 + randomVal(),
|
||||
35 + randomVal(), 40 + randomVal(), 45 + randomVal(), 50 + randomVal()
|
||||
];
|
||||
}
|
||||
|
||||
return values;
|
||||
}
|
||||
|
||||
function randomVal() {
|
||||
return Math.floor(Math.random() * 80);
|
||||
}
|
||||
|
||||
});
|
||||
59
admin/assets/js/pages/charts/polar_area_chart.js
Normal file
59
admin/assets/js/pages/charts/polar_area_chart.js
Normal file
@ -0,0 +1,59 @@
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var chartColors = window.chartColors;
|
||||
var color = Chart.helpers.color;
|
||||
var config = {
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: [
|
||||
color(chartColors.red).alpha(0.5).rgbString(),
|
||||
color(chartColors.orange).alpha(0.5).rgbString(),
|
||||
color(chartColors.yellow).alpha(0.5).rgbString(),
|
||||
color(chartColors.green).alpha(0.5).rgbString(),
|
||||
color(chartColors.blue).alpha(0.5).rgbString(),
|
||||
],
|
||||
label: 'My dataset' // for legend
|
||||
}],
|
||||
labels: [
|
||||
"Red",
|
||||
"Orange",
|
||||
"Yellow",
|
||||
"Green",
|
||||
"Blue"
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'right',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Polar Area Chart'
|
||||
},
|
||||
scale: {
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
reverse: false
|
||||
},
|
||||
animation: {
|
||||
animateRotate: false,
|
||||
animateScale: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById("chart-area");
|
||||
window.myPolarArea = Chart.PolarArea(ctx, config);
|
||||
};
|
||||
190
admin/assets/js/pages/charts/sparkline.js
Normal file
190
admin/assets/js/pages/charts/sparkline.js
Normal file
@ -0,0 +1,190 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.sparkline-pie').sparkline('html', {
|
||||
type: 'pie',
|
||||
offset: 90,
|
||||
width: '150px',
|
||||
height: '150px',
|
||||
sliceColors: ['#fb4364', '#7868da', '#3aaaec']
|
||||
})
|
||||
|
||||
drawDocSparklines();
|
||||
drawMouseSpeedDemo();
|
||||
});
|
||||
|
||||
//Taken from http://omnipotent.net/jquery.sparkline
|
||||
function drawDocSparklines() {
|
||||
|
||||
// Bar + line composite charts
|
||||
$('#compositebar').sparkline('html', { type: 'bar', barColor: '#aaf' });
|
||||
$('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
|
||||
{ composite: true, fillColor: false, lineColor: 'red' });
|
||||
|
||||
|
||||
// Line charts taking their values from the tag
|
||||
$('.sparkline-1').sparkline();
|
||||
|
||||
// Larger line charts for the docs
|
||||
$('.largeline').sparkline('html',
|
||||
{ type: 'line', height: '2.5em', width: '4em' });
|
||||
|
||||
// Customized line chart
|
||||
$('#linecustom').sparkline('html',
|
||||
{
|
||||
height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa',
|
||||
minSpotColor: false, maxSpotColor: false, spotColor: '#60bafd', spotRadius: 3
|
||||
});
|
||||
|
||||
// Bar charts using inline values
|
||||
$('.sparkbar').sparkline('html', { type: 'bar' });
|
||||
|
||||
$('.barformat').sparkline([1, 3, 5, 3, 8], {
|
||||
type: 'bar',
|
||||
tooltipFormat: '{{value:levels}} - {{value}}',
|
||||
tooltipValueLookups: {
|
||||
levels: $.range_map({ ':2': 'Low', '3:6': 'Medium', '7:': 'High' })
|
||||
}
|
||||
});
|
||||
|
||||
// Tri-state charts using inline values
|
||||
$('.sparktristate').sparkline('html', { type: 'tristate' });
|
||||
$('.sparktristatecols').sparkline('html',
|
||||
{ type: 'tristate', colorMap: { '-2': '#fa7', '2': '#60bafd' } });
|
||||
|
||||
// Composite line charts, the second using values supplied via javascript
|
||||
$('#compositeline').sparkline('html', { fillColor: false, changeRangeMin: 0, chartRangeMax: 10 });
|
||||
$('#compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
|
||||
{ composite: true, fillColor: false, lineColor: 'red', changeRangeMin: 0, chartRangeMax: 10 });
|
||||
|
||||
// Line charts with normal range marker
|
||||
$('#normalline').sparkline('html',
|
||||
{ fillColor: false, normalRangeMin: -1, normalRangeMax: 8 });
|
||||
$('#normalExample').sparkline('html',
|
||||
{ fillColor: false, normalRangeMin: 80, normalRangeMax: 95, normalRangeColor: '#60bafd' });
|
||||
|
||||
// Discrete charts
|
||||
$('.discrete1').sparkline('html',
|
||||
{ type: 'discrete', lineColor: '#1ab1e3', xwidth: 18 });
|
||||
$('#discrete2').sparkline('html',
|
||||
{ type: 'discrete', lineColor: '#1ab1e3', thresholdColor: 'red', thresholdValue: 4 });
|
||||
|
||||
// Bullet charts
|
||||
$('.sparkbullet').sparkline('html', { type: 'bullet' });
|
||||
|
||||
// Pie charts
|
||||
$('.sparkpie').sparkline('html', { type: 'pie', height: '2em' });
|
||||
|
||||
// Box plots
|
||||
$('.sparkboxplot').sparkline('html', { type: 'box' });
|
||||
$('.sparkboxplotraw').sparkline([1, 3, 5, 8, 10, 15, 18],
|
||||
{ type: 'box', raw: true, showOutliers: true, target: 6 });
|
||||
|
||||
// Box plot with specific field order
|
||||
$('.boxfieldorder').sparkline('html', {
|
||||
type: 'box',
|
||||
tooltipFormatFieldlist: ['med', 'lq', 'uq'],
|
||||
tooltipFormatFieldlistKey: 'field'
|
||||
});
|
||||
|
||||
// click event demo sparkline
|
||||
$('.clickdemo').sparkline();
|
||||
$('.clickdemo').bind('sparklineClick', function (ev) {
|
||||
var sparkline = ev.sparklines[0],
|
||||
region = sparkline.getCurrentRegionFields();
|
||||
value = region.y;
|
||||
alert("Clicked on x=" + region.x + " y=" + region.y);
|
||||
});
|
||||
|
||||
// mouseover event demo sparkline
|
||||
$('.mouseoverdemo').sparkline();
|
||||
$('.mouseoverdemo').bind('sparklineRegionChange', function (ev) {
|
||||
var sparkline = ev.sparklines[0],
|
||||
region = sparkline.getCurrentRegionFields();
|
||||
value = region.y;
|
||||
$('.mouseoverregion').text("x=" + region.x + " y=" + region.y);
|
||||
}).bind('mouseleave', function () {
|
||||
$('.mouseoverregion').text('');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
** Draw the little mouse speed animated graph
|
||||
** This just attaches a handler to the mousemove event to see
|
||||
** (roughly) how far the mouse has moved
|
||||
** and then updates the display a couple of times a second via
|
||||
** setTimeout()
|
||||
**/
|
||||
function drawMouseSpeedDemo() {
|
||||
var mrefreshinterval = 500; // update display every 500ms
|
||||
var lastmousex = -1;
|
||||
var lastmousey = -1;
|
||||
var lastmousetime;
|
||||
var mousetravel = 0;
|
||||
var mpoints = [];
|
||||
var mpoints_max = 30;
|
||||
$('html').mousemove(function (e) {
|
||||
var mousex = e.pageX;
|
||||
var mousey = e.pageY;
|
||||
if (lastmousex > -1) {
|
||||
mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));
|
||||
}
|
||||
lastmousex = mousex;
|
||||
lastmousey = mousey;
|
||||
});
|
||||
var mdraw = function () {
|
||||
var md = new Date();
|
||||
var timenow = md.getTime();
|
||||
if (lastmousetime && lastmousetime != timenow) {
|
||||
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
|
||||
mpoints.push(pps);
|
||||
if (mpoints.length > mpoints_max)
|
||||
mpoints.splice(0, 1);
|
||||
mousetravel = 0;
|
||||
$('#mousespeed').sparkline(mpoints, { width: mpoints.length * 2, tooltipSuffix: ' pixels per second' });
|
||||
}
|
||||
lastmousetime = timenow;
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
};
|
||||
// We could use setInterval instead, but I prefer to do it this way
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
}
|
||||
|
||||
//====
|
||||
|
||||
$("#sparkline14").sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40, 45, 56, 7, 10], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '100',
|
||||
lineColor: '#7868da',
|
||||
fillColor: 'transparent',
|
||||
spotColor: '#fff',
|
||||
minSpotColor: undefined,
|
||||
maxSpotColor: undefined,
|
||||
highlightSpotColor: undefined,
|
||||
highlightLineColor: undefined
|
||||
});
|
||||
|
||||
$('#sparkline16').sparkline([15, 23, 45, 20, 54, 45, 35, 57, 30], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '100',
|
||||
chartRangeMax: 50,
|
||||
resize: true,
|
||||
lineColor: '#51aaed',
|
||||
fillColor: '#60bafd',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
});
|
||||
|
||||
$('#sparkline16').sparkline([8, 17, 13, 14, 10, 16, 17, 20, 12, 27], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '100',
|
||||
chartRangeMax: 40,
|
||||
lineColor: '#40c77c',
|
||||
fillColor: '#50d38a',
|
||||
composite: true,
|
||||
resize: true,
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
});
|
||||
Reference in New Issue
Block a user