Widgets
Note:
Most of the UI elements, including Bootstrap components, forms controls, charts, tables, etc., are provided with example code in their respective demo pages. However, the demo page for widgets is not included with example code on it. You can find the example code for all of the widgets below:
A widget allows you to show any statistics or other contextual information in a very nice way on your dashboard or other pages. A hyper widget is composed of a title, the statistics number, relevant icons, sub-statistics, and a sub-title. You can show trends (e.g., up or down) using sub-titles.
Sample Widget
Sample Widget 2
Orders
1,587
+11% From previous period
Informational Widget
Toll Free : 1-234-567-8901
Toll Free : 1-234-567-8901
Rich media Widget
Profile Widget
Michael Franklin
Authorised Brand Seller
-
$ 25,184
Total Revenue
-
5482
Number of Orders
Michael Franklin
Authorised Brand Seller
-
$ 25,184
Total Revenue
-
5482
Number of Orders
Simple TImeline
Transactions
Tile Box
Chart Widgets
Apex.grid = {
padding: {
right: 0,
left: 0
}
}
Apex.dataLabels = {
enabled: false
}
var randomizeArray = function (arg) {
var array = arg.slice();
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
var sparklineData = [47, 45, 54, 38, 56, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46];
var colorPalette = ['#00D8B6', '#008FFB', '#FEB019', '#FF4560', '#775DD0']
var salesspark = {
chart: {
type: 'area',
height: 180,
sparkline: {
enabled: true
},
},
stroke: {
width: 2,
curve: 'straight'
},
fill: {
opacity: 0.2,
},
series: [{
name: 'Hyper Sales ',
data: randomizeArray(sparklineData)
}],
yaxis: {
min: 0
},
colors: ['#DCE6EC'],
title: {
text: '$424,652',
offsetX: 20,
offsetY: 20,
style: {
fontSize: '24px'
}
},
subtitle: {
text: 'Sales',
offsetX: 20,
offsetY: 55,
style: {
fontSize: '14px'
}
}
}
new ApexCharts(document.querySelector("#sales-spark"), salesspark).render();
var profitspark = {
chart: {
type: 'bar',
height: 180,
sparkline: {
enabled: true
},
},
stroke: {
width: 0,
curve: 'straight'
},
fill: {
opacity: 0.5,
},
series: [{
name: 'Net Profits ',
data: randomizeArray(sparklineData)
}],
xaxis: {
crosshairs: {
width: 1
},
},
yaxis: {
min: 0
},
colors: ['#0acf97'],
title: {
text: '$135,965',
offsetX: 20,
offsetY: 20,
style: {
fontSize: '24px'
}
},
subtitle: {
text: 'Profits',
offsetX: 20,
offsetY: 55,
style: {
fontSize: '14px'
}
}
}
new ApexCharts(document.querySelector("#profit-spark"), profitspark).render();
var spark1 = {
chart: {
type: 'line',
height: 100,
sparkline: {
enabled: true
},
},
series: [{
data: [25, 66, 41, 59, 25, 44, 12, 36, 9, 21]
}],
stroke: {
width: 4,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ['#734CEA']
}
new ApexCharts(document.querySelector("#spark1"), spark1).render();
var spark2 = {
chart: {
type: 'bar',
height: 100,
sparkline: {
enabled: true
},
},
series: [{
data: [12, 14, 2, 47, 32, 44, 14, 55, 41, 69]
}],
stroke: {
width: 3,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ['#34bfa3']
}
new ApexCharts(document.querySelector("#spark2"), spark2).render();
var spark3 = {
chart: {
type: 'line',
height: 100,
sparkline: {
enabled: true
},
},
series: [{
data: [47, 45, 74, 32, 56, 31, 44, 33, 45, 19]
}],
stroke: {
width: 4,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ['#f4516c']
}
new ApexCharts(document.querySelector("#spark3"), spark3).render();
var spark4 = {
chart: {
type: 'bar',
height: 100,
sparkline: {
enabled: true
},
},
plotOptions: {
bar: {
horizontal: false,
endingShape: 'rounded',
columnWidth: '55%',
},
},
series: [{
data: [15, 75, 47, 65, 14, 32, 19, 54, 44, 61]
}],
stroke: {
width: 3,
curve: 'smooth'
},
markers: {
size: 0
},
colors: ['#00c5dc']
}
new ApexCharts(document.querySelector("#spark4"), spark4).render();
10:01
10:01
How to customize the style of widget?
Open file
src/scss/custom/components/_widgets.scss
and change the different style to change the background,
text or other colors.