add sparkline demo in inline charts (#2922)
This commit is contained in:
REJack
GitHub
parent
949f91985f
commit
ac9e60684c
|
|
@ -934,6 +934,50 @@
|
|||
</div>
|
||||
<!-- /.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 -->
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
|
|
@ -965,7 +1009,7 @@
|
|||
<!-- jQuery Knob -->
|
||||
<script src="../../plugins/jquery-knob/jquery.knob.min.js"></script>
|
||||
<!-- Sparkline -->
|
||||
<script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
|
||||
<script src="../../plugins/sparklines/sparkline.js"></script>
|
||||
<!-- page script -->
|
||||
<script>
|
||||
$(function () {
|
||||
|
|
@ -1033,219 +1077,16 @@
|
|||
/* END JQUERY KNOB */
|
||||
|
||||
//INITIALIZE SPARKLINE CHARTS
|
||||
$('.sparkline').each(function () {
|
||||
var $this = $(this)
|
||||
$this.sparkline('html', $this.data())
|
||||
})
|
||||
var sparkline1 = new Sparkline($('#sparkline-1')[0], { width: 240, height: 70, lineColor: '#92c1dc', endColor: '#92c1dc' })
|
||||
var sparkline2 = new Sparkline($('#sparkline-2')[0], { width: 240, height: 70, lineColor: '#f56954', endColor: '#f56954' })
|
||||
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 */
|
||||
drawDocSparklines()
|
||||
drawMouseSpeedDemo()
|
||||
sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021])
|
||||
sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921])
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue