mirror of https://github.com/ColorlibHQ/AdminLTE
add sparkline demo in inline charts (#2922)
REJack
GitHub
parent
949f91985f
commit
ac9e60684c
|
|
@ -934,6 +934,50 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- /.row -->
|
<!-- /.row -->
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">
|
||||||
|
<i class="far fa-chart-bar"></i>
|
||||||
|
Sparklines
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="card-tools">
|
||||||
|
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||||
|
<i class="fas fa-minus"></i>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- /.card-header -->
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4 text-center">
|
||||||
|
<div id="sparkline-1"></div>
|
||||||
|
</div>
|
||||||
|
<!-- ./col -->
|
||||||
|
<div class="col-4 text-center">
|
||||||
|
<div id="sparkline-2"></div>
|
||||||
|
</div>
|
||||||
|
<!-- ./col -->
|
||||||
|
<div class="col-4 text-center">
|
||||||
|
<div id="sparkline-3"></div>
|
||||||
|
</div>
|
||||||
|
<!-- ./col -->
|
||||||
|
</div>
|
||||||
|
<!-- /.row -->
|
||||||
|
</div>
|
||||||
|
<!-- /.card-body -->
|
||||||
|
</div>
|
||||||
|
<!-- /.card -->
|
||||||
|
</div>
|
||||||
|
<!-- /.col -->
|
||||||
|
</div>
|
||||||
|
<!-- /.row -->
|
||||||
|
|
||||||
</div><!-- /.container-fluid -->
|
</div><!-- /.container-fluid -->
|
||||||
</section>
|
</section>
|
||||||
<!-- /.content -->
|
<!-- /.content -->
|
||||||
|
|
@ -965,7 +1009,7 @@
|
||||||
<!-- jQuery Knob -->
|
<!-- jQuery Knob -->
|
||||||
<script src="../../plugins/jquery-knob/jquery.knob.min.js"></script>
|
<script src="../../plugins/jquery-knob/jquery.knob.min.js"></script>
|
||||||
<!-- Sparkline -->
|
<!-- Sparkline -->
|
||||||
<script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
|
<script src="../../plugins/sparklines/sparkline.js"></script>
|
||||||
<!-- page script -->
|
<!-- page script -->
|
||||||
<script>
|
<script>
|
||||||
$(function () {
|
$(function () {
|
||||||
|
|
@ -1033,219 +1077,16 @@
|
||||||
/* END JQUERY KNOB */
|
/* END JQUERY KNOB */
|
||||||
|
|
||||||
//INITIALIZE SPARKLINE CHARTS
|
//INITIALIZE SPARKLINE CHARTS
|
||||||
$('.sparkline').each(function () {
|
var sparkline1 = new Sparkline($('#sparkline-1')[0], { width: 240, height: 70, lineColor: '#92c1dc', endColor: '#92c1dc' })
|
||||||
var $this = $(this)
|
var sparkline2 = new Sparkline($('#sparkline-2')[0], { width: 240, height: 70, lineColor: '#f56954', endColor: '#f56954' })
|
||||||
$this.sparkline('html', $this.data())
|
var sparkline3 = new Sparkline($('#sparkline-3')[0], { width: 240, height: 70, lineColor: '#3af221', endColor: '#3af221' })
|
||||||
})
|
|
||||||
|
|
||||||
/* SPARKLINE DOCUMENTATION EXAMPLES https://omnipotent.net/jquery.sparkline/#s-about */
|
sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021])
|
||||||
drawDocSparklines()
|
sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921])
|
||||||
drawMouseSpeedDemo()
|
sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21])
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
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 : '#77f',
|
|
||||||
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' : '#44f'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 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: '#4f4'
|
|
||||||
})
|
|
||||||
|
|
||||||
// Discrete charts
|
|
||||||
$('.discrete1').sparkline('html',
|
|
||||||
{
|
|
||||||
type : 'discrete',
|
|
||||||
lineColor: 'blue',
|
|
||||||
xwidth : 18
|
|
||||||
})
|
|
||||||
$('#discrete2').sparkline('html',
|
|
||||||
{
|
|
||||||
type : 'discrete',
|
|
||||||
lineColor : 'blue',
|
|
||||||
thresholdColor: 'red',
|
|
||||||
thresholdValue: 4
|
|
||||||
})
|
|
||||||
|
|
||||||
// Bullet charts
|
|
||||||
$('.sparkbullet').sparkline('html', { type: 'bullet' })
|
|
||||||
|
|
||||||
// Pie charts
|
|
||||||
$('.sparkpie').sparkline('html', {
|
|
||||||
type : 'pie',
|
|
||||||
height: '1.0em'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue