226 lines
6.6 KiB
JavaScript
226 lines
6.6 KiB
JavaScript
|
//[Dashboard Javascript]
|
||
|
|
|
||
|
|
//Project: MinimalLite Admin - Responsive Admin Template
|
||
|
|
//Primary use: Used only for the main dashboard (index.html)
|
||
|
|
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
// Make the dashboard widgets sortable Using jquery UI
|
||
|
|
$('.connectedSortable').sortable({
|
||
|
|
placeholder : 'sort-highlight',
|
||
|
|
connectWith : '.connectedSortable',
|
||
|
|
handle : '.box-header, .nav-tabs',
|
||
|
|
forcePlaceholderSize: true,
|
||
|
|
zIndex : 999999
|
||
|
|
});
|
||
|
|
$('.connectedSortable .box-header, .connectedSortable .nav-tabs-custom').css('cursor', 'move');
|
||
|
|
|
||
|
|
|
||
|
|
// donut chart
|
||
|
|
$('.donut').peity('donut');
|
||
|
|
|
||
|
|
// chart
|
||
|
|
$("#linechart").sparkline([1,4,3,7,6,4,8,9,6,8,12], {
|
||
|
|
type: 'line',
|
||
|
|
width: '100',
|
||
|
|
height: '38',
|
||
|
|
lineColor: '#26c6da',
|
||
|
|
fillColor: '#ffffff',
|
||
|
|
lineWidth: 2,
|
||
|
|
minSpotColor: '#0fc491',
|
||
|
|
maxSpotColor: '#0fc491',
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#barchart").sparkline([1,4,3,7,6,4,8,9,6,8,12], {
|
||
|
|
type: 'bar',
|
||
|
|
height: '38',
|
||
|
|
barWidth: 6,
|
||
|
|
barSpacing: 4,
|
||
|
|
barColor: '#ffb22b',
|
||
|
|
});
|
||
|
|
$("#discretechart").sparkline([1,4,3,7,6,4,8,9,6,8,12], {
|
||
|
|
type: 'discrete',
|
||
|
|
width: '50',
|
||
|
|
height: '38',
|
||
|
|
lineColor: '#745af2',
|
||
|
|
});
|
||
|
|
$("#baralc").sparkline([2,4,3,7,6,4,8,9,6,8,12,6,7,9,4,8,5,7,9,13,10,9,9,8], {
|
||
|
|
type: 'bar',
|
||
|
|
height: '80',
|
||
|
|
barWidth: 6,
|
||
|
|
barSpacing: 4,
|
||
|
|
barColor: '#fc4b6c',
|
||
|
|
});
|
||
|
|
$("#lineIncrease").sparkline([1,8,6,5,6,8,7,9,7,8,10,16,14,10], {
|
||
|
|
type: 'line',
|
||
|
|
width: '100%',
|
||
|
|
height: '140',
|
||
|
|
lineWidth: 2,
|
||
|
|
lineColor: '#ffffff',
|
||
|
|
fillColor: "#398bf7",
|
||
|
|
spotColor: '#ffffff',
|
||
|
|
minSpotColor: '#ffffff',
|
||
|
|
maxSpotColor: '#ffffff',
|
||
|
|
spotRadius: 3,
|
||
|
|
});
|
||
|
|
$("#linearea").sparkline([1,3,5,4,6,8,7,9,7,8,10,16,14,10], {
|
||
|
|
type: 'line',
|
||
|
|
width: '100%',
|
||
|
|
height: '80',
|
||
|
|
lineColor: '#26c6da',
|
||
|
|
fillColor: '#26c6da',
|
||
|
|
lineWidth: 2,
|
||
|
|
});
|
||
|
|
|
||
|
|
// uk-chart
|
||
|
|
/* $('#uk').vectorMap({
|
||
|
|
map : 'uk_mill_en',
|
||
|
|
backgroundColor : 'transparent',
|
||
|
|
regionStyle : {
|
||
|
|
initial : {
|
||
|
|
fill : '#c9d6de'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
*/
|
||
|
|
|
||
|
|
// Morris-chart
|
||
|
|
|
||
|
|
/*
|
||
|
|
Morris.Area({
|
||
|
|
element: 'morris-area-chart',
|
||
|
|
data: [{
|
||
|
|
period: '2010',
|
||
|
|
iphone: 50,
|
||
|
|
ipad: 80,
|
||
|
|
itouch: 20
|
||
|
|
}, {
|
||
|
|
period: '2011',
|
||
|
|
iphone: 130,
|
||
|
|
ipad: 100,
|
||
|
|
itouch: 80
|
||
|
|
}, {
|
||
|
|
period: '2012',
|
||
|
|
iphone: 80,
|
||
|
|
ipad: 60,
|
||
|
|
itouch: 70
|
||
|
|
}, {
|
||
|
|
period: '2013',
|
||
|
|
iphone: 70,
|
||
|
|
ipad: 200,
|
||
|
|
itouch: 140
|
||
|
|
}, {
|
||
|
|
period: '2014',
|
||
|
|
iphone: 180,
|
||
|
|
ipad: 150,
|
||
|
|
itouch: 140
|
||
|
|
}, {
|
||
|
|
period: '2015',
|
||
|
|
iphone: 105,
|
||
|
|
ipad: 100,
|
||
|
|
itouch: 80
|
||
|
|
},
|
||
|
|
{
|
||
|
|
period: '2016',
|
||
|
|
iphone: 250,
|
||
|
|
ipad: 150,
|
||
|
|
itouch: 200
|
||
|
|
}],
|
||
|
|
xkey: 'period',
|
||
|
|
ykeys: ['iphone', 'ipad', 'itouch'],
|
||
|
|
labels: ['iPhone', 'iPad', 'iPod Touch'],
|
||
|
|
pointSize: 3,
|
||
|
|
fillOpacity: 0,
|
||
|
|
pointStrokeColors:['#26c6da', '#fc4b6c', '#398bf7'],
|
||
|
|
behaveLikeLine: true,
|
||
|
|
gridLineColor: '#e0e0e0',
|
||
|
|
lineWidth: 3,
|
||
|
|
hideHover: 'auto',
|
||
|
|
lineColors: ['#26c6da', '#fc4b6c', '#398bf7'],
|
||
|
|
resize: true
|
||
|
|
|
||
|
|
});
|
||
|
|
*/
|
||
|
|
//--------------
|
||
|
|
//- AREA CHART -
|
||
|
|
//--------------
|
||
|
|
|
||
|
|
// Get context with jQuery - using jQuery's .get() method.
|
||
|
|
// var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
|
||
|
|
// This will get the first returned node in the jQuery collection.
|
||
|
|
// var areaChart = new Chart(areaChartCanvas)
|
||
|
|
/*
|
||
|
|
var areaChartData = {
|
||
|
|
labels : ['1', '2', '3', '4', '5', '6', '7', '8'],
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label : 'Electronics',
|
||
|
|
fillColor : 'rgba(252,75,108,0.3)',
|
||
|
|
strokeColor : 'rgba(252,75,108,0)',
|
||
|
|
pointColor : 'rgba(252,75,108,0.5)',
|
||
|
|
pointStrokeColor : '#fc4b6c',
|
||
|
|
pointHighlightFill : '#fff',
|
||
|
|
pointHighlightStroke: 'rgba(252,75,108,1)',
|
||
|
|
data : [0, 5, 6, 8, 25, 9, 8, 24]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label : 'Digital Goods',
|
||
|
|
fillColor : 'rgba(57,139,247,0.7)',
|
||
|
|
strokeColor : 'rgba(57,139,247,0)',
|
||
|
|
pointColor : '#398bf7',
|
||
|
|
pointStrokeColor : 'rgba(57,139,247,0.5)',
|
||
|
|
pointHighlightFill : '#fff',
|
||
|
|
pointHighlightStroke: 'rgba(57,139,247,1)',
|
||
|
|
data : [0, 3, 1, 2, 8, 1, 5, 1]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
var areaChartOptions = {
|
||
|
|
//Boolean - If we should show the scale at all
|
||
|
|
showScale : true,
|
||
|
|
//Boolean - Whether grid lines are shown across the chart
|
||
|
|
scaleShowGridLines : true,
|
||
|
|
//String - Colour of the grid lines
|
||
|
|
scaleGridLineColor : 'rgba(0,0,0,.05)',
|
||
|
|
//Number - Width of the grid lines
|
||
|
|
scaleGridLineWidth : 1,
|
||
|
|
//Boolean - Whether to show horizontal lines (except X axis)
|
||
|
|
scaleShowHorizontalLines: true,
|
||
|
|
//Boolean - Whether to show vertical lines (except Y axis)
|
||
|
|
scaleShowVerticalLines : true,
|
||
|
|
//Boolean - Whether the line is curved between points
|
||
|
|
bezierCurve : true,
|
||
|
|
//Number - Tension of the bezier curve between points
|
||
|
|
bezierCurveTension : 0.5,
|
||
|
|
//Boolean - Whether to show a dot for each point
|
||
|
|
pointDot : true,
|
||
|
|
//Number - Radius of each point dot in pixels
|
||
|
|
pointDotRadius : 1,
|
||
|
|
//Number - Pixel width of point dot stroke
|
||
|
|
pointDotStrokeWidth : 1,
|
||
|
|
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
|
||
|
|
pointHitDetectionRadius : 20,
|
||
|
|
//Boolean - Whether to show a stroke for datasets
|
||
|
|
datasetStroke : true,
|
||
|
|
//Number - Pixel width of dataset stroke
|
||
|
|
datasetStrokeWidth : 0,
|
||
|
|
//Boolean - Whether to fill the dataset with a color
|
||
|
|
datasetFill : true,
|
||
|
|
//String - A legend template
|
||
|
|
legendTemplate : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
|
||
|
|
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
|
||
|
|
maintainAspectRatio : true,
|
||
|
|
//Boolean - whether to make the chart responsive to window resizing
|
||
|
|
responsive : true
|
||
|
|
};
|
||
|
|
|
||
|
|
//Create the line chart
|
||
|
|
// areaChart.Line(areaChartData, areaChartOptions);
|
||
|
|
|
||
|
|
|
||
|
|
}); // End of use strict
|
||
|
|
|