dashboard2.js (8926B)
1 $(function () { 2 3 'use strict'; 4 5 /* ChartJS 6 * ------- 7 * Here we will create a few charts using ChartJS 8 */ 9 10 //----------------------- 11 //- MONTHLY SALES CHART - 12 //----------------------- 13 14 // Get context with jQuery - using jQuery's .get() method. 15 var salesChartCanvas = $("#salesChart").get(0).getContext("2d"); 16 // This will get the first returned node in the jQuery collection. 17 var salesChart = new Chart(salesChartCanvas); 18 19 var salesChartData = { 20 labels: ["January", "February", "March", "April", "May", "June", "July"], 21 datasets: [ 22 { 23 label: "Electronics", 24 fillColor: "rgb(210, 214, 222)", 25 strokeColor: "rgb(210, 214, 222)", 26 pointColor: "rgb(210, 214, 222)", 27 pointStrokeColor: "#c1c7d1", 28 pointHighlightFill: "#fff", 29 pointHighlightStroke: "rgb(220,220,220)", 30 data: [65, 59, 80, 81, 56, 55, 40] 31 }, 32 { 33 label: "Digital Goods", 34 fillColor: "rgba(60,141,188,0.9)", 35 strokeColor: "rgba(60,141,188,0.8)", 36 pointColor: "#3b8bba", 37 pointStrokeColor: "rgba(60,141,188,1)", 38 pointHighlightFill: "#fff", 39 pointHighlightStroke: "rgba(60,141,188,1)", 40 data: [28, 48, 40, 19, 86, 27, 90] 41 } 42 ] 43 }; 44 45 var salesChartOptions = { 46 //Boolean - If we should show the scale at all 47 showScale: true, 48 //Boolean - Whether grid lines are shown across the chart 49 scaleShowGridLines: false, 50 //String - Colour of the grid lines 51 scaleGridLineColor: "rgba(0,0,0,.05)", 52 //Number - Width of the grid lines 53 scaleGridLineWidth: 1, 54 //Boolean - Whether to show horizontal lines (except X axis) 55 scaleShowHorizontalLines: true, 56 //Boolean - Whether to show vertical lines (except Y axis) 57 scaleShowVerticalLines: true, 58 //Boolean - Whether the line is curved between points 59 bezierCurve: true, 60 //Number - Tension of the bezier curve between points 61 bezierCurveTension: 0.3, 62 //Boolean - Whether to show a dot for each point 63 pointDot: false, 64 //Number - Radius of each point dot in pixels 65 pointDotRadius: 4, 66 //Number - Pixel width of point dot stroke 67 pointDotStrokeWidth: 1, 68 //Number - amount extra to add to the radius to cater for hit detection outside the drawn point 69 pointHitDetectionRadius: 20, 70 //Boolean - Whether to show a stroke for datasets 71 datasetStroke: true, 72 //Number - Pixel width of dataset stroke 73 datasetStrokeWidth: 2, 74 //Boolean - Whether to fill the dataset with a color 75 datasetFill: true, 76 //String - A legend template 77 legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%=datasets[i].label%></li><%}%></ul>", 78 //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 79 maintainAspectRatio: true, 80 //Boolean - whether to make the chart responsive to window resizing 81 responsive: true 82 }; 83 84 //Create the line chart 85 salesChart.Line(salesChartData, salesChartOptions); 86 87 //--------------------------- 88 //- END MONTHLY SALES CHART - 89 //--------------------------- 90 91 //------------- 92 //- PIE CHART - 93 //------------- 94 // Get context with jQuery - using jQuery's .get() method. 95 var pieChartCanvas = $("#pieChart").get(0).getContext("2d"); 96 var pieChart = new Chart(pieChartCanvas); 97 var PieData = [ 98 { 99 value: 700, 100 color: "#f56954", 101 highlight: "#f56954", 102 label: "Chrome" 103 }, 104 { 105 value: 500, 106 color: "#00a65a", 107 highlight: "#00a65a", 108 label: "IE" 109 }, 110 { 111 value: 400, 112 color: "#f39c12", 113 highlight: "#f39c12", 114 label: "FireFox" 115 }, 116 { 117 value: 600, 118 color: "#00c0ef", 119 highlight: "#00c0ef", 120 label: "Safari" 121 }, 122 { 123 value: 300, 124 color: "#3c8dbc", 125 highlight: "#3c8dbc", 126 label: "Opera" 127 }, 128 { 129 value: 100, 130 color: "#d2d6de", 131 highlight: "#d2d6de", 132 label: "Navigator" 133 } 134 ]; 135 var pieOptions = { 136 //Boolean - Whether we should show a stroke on each segment 137 segmentShowStroke: true, 138 //String - The colour of each segment stroke 139 segmentStrokeColor: "#fff", 140 //Number - The width of each segment stroke 141 segmentStrokeWidth: 1, 142 //Number - The percentage of the chart that we cut out of the middle 143 percentageInnerCutout: 50, // This is 0 for Pie charts 144 //Number - Amount of animation steps 145 animationSteps: 100, 146 //String - Animation easing effect 147 animationEasing: "easeOutBounce", 148 //Boolean - Whether we animate the rotation of the Doughnut 149 animateRotate: true, 150 //Boolean - Whether we animate scaling the Doughnut from the centre 151 animateScale: false, 152 //Boolean - whether to make the chart responsive to window resizing 153 responsive: true, 154 // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 155 maintainAspectRatio: false, 156 //String - A legend template 157 legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>", 158 //String - A tooltip template 159 tooltipTemplate: "<%=value %> <%=label%> users" 160 }; 161 //Create pie or douhnut chart 162 // You can switch between pie and douhnut using the method below. 163 pieChart.Doughnut(PieData, pieOptions); 164 //----------------- 165 //- END PIE CHART - 166 //----------------- 167 168 /* jVector Maps 169 * ------------ 170 * Create a world map with markers 171 */ 172 $('#world-map-markers').vectorMap({ 173 map: 'world_mill_en', 174 normalizeFunction: 'polynomial', 175 hoverOpacity: 0.7, 176 hoverColor: false, 177 backgroundColor: 'transparent', 178 regionStyle: { 179 initial: { 180 fill: 'rgba(210, 214, 222, 1)', 181 "fill-opacity": 1, 182 stroke: 'none', 183 "stroke-width": 0, 184 "stroke-opacity": 1 185 }, 186 hover: { 187 "fill-opacity": 0.7, 188 cursor: 'pointer' 189 }, 190 selected: { 191 fill: 'yellow' 192 }, 193 selectedHover: {} 194 }, 195 markerStyle: { 196 initial: { 197 fill: '#00a65a', 198 stroke: '#111' 199 } 200 }, 201 markers: [ 202 {latLng: [41.90, 12.45], name: 'Vatican City'}, 203 {latLng: [43.73, 7.41], name: 'Monaco'}, 204 {latLng: [-0.52, 166.93], name: 'Nauru'}, 205 {latLng: [-8.51, 179.21], name: 'Tuvalu'}, 206 {latLng: [43.93, 12.46], name: 'San Marino'}, 207 {latLng: [47.14, 9.52], name: 'Liechtenstein'}, 208 {latLng: [7.11, 171.06], name: 'Marshall Islands'}, 209 {latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'}, 210 {latLng: [3.2, 73.22], name: 'Maldives'}, 211 {latLng: [35.88, 14.5], name: 'Malta'}, 212 {latLng: [12.05, -61.75], name: 'Grenada'}, 213 {latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'}, 214 {latLng: [13.16, -59.55], name: 'Barbados'}, 215 {latLng: [17.11, -61.85], name: 'Antigua and Barbuda'}, 216 {latLng: [-4.61, 55.45], name: 'Seychelles'}, 217 {latLng: [7.35, 134.46], name: 'Palau'}, 218 {latLng: [42.5, 1.51], name: 'Andorra'}, 219 {latLng: [14.01, -60.98], name: 'Saint Lucia'}, 220 {latLng: [6.91, 158.18], name: 'Federated States of Micronesia'}, 221 {latLng: [1.3, 103.8], name: 'Singapore'}, 222 {latLng: [1.46, 173.03], name: 'Kiribati'}, 223 {latLng: [-21.13, -175.2], name: 'Tonga'}, 224 {latLng: [15.3, -61.38], name: 'Dominica'}, 225 {latLng: [-20.2, 57.5], name: 'Mauritius'}, 226 {latLng: [26.02, 50.55], name: 'Bahrain'}, 227 {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'} 228 ] 229 }); 230 231 /* SPARKLINE CHARTS 232 * ---------------- 233 * Create a inline charts with spark line 234 */ 235 236 //----------------- 237 //- SPARKLINE BAR - 238 //----------------- 239 $('.sparkbar').each(function () { 240 var $this = $(this); 241 $this.sparkline('html', { 242 type: 'bar', 243 height: $this.data('height') ? $this.data('height') : '30', 244 barColor: $this.data('color') 245 }); 246 }); 247 248 //----------------- 249 //- SPARKLINE PIE - 250 //----------------- 251 $('.sparkpie').each(function () { 252 var $this = $(this); 253 $this.sparkline('html', { 254 type: 'pie', 255 height: $this.data('height') ? $this.data('height') : '90', 256 sliceColors: $this.data('color') 257 }); 258 }); 259 260 //------------------ 261 //- SPARKLINE LINE - 262 //------------------ 263 $('.sparkline').each(function () { 264 var $this = $(this); 265 $this.sparkline('html', { 266 type: 'line', 267 height: $this.data('height') ? $this.data('height') : '90', 268 width: '100%', 269 lineColor: $this.data('linecolor'), 270 fillColor: $this.data('fillcolor'), 271 spotColor: $this.data('spotcolor') 272 }); 273 }); 274 });