//[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 : '', //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