mirror of https://github.com/ColorlibHQ/AdminLTE
718 lines
38 KiB
HTML
718 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>AdminLTE - jQplot</title>
|
|
<meta charset="UTF-8">
|
|
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
|
|
<!-- bootstrap 3.0.2 -->
|
|
<link href="../css/bootstrap.min.css" rel="stylesheet" />
|
|
<!-- font Awesome -->
|
|
<link href="../css/font-awesome.min.css" rel="stylesheet" />
|
|
<!-- jqplot stylesheet -->
|
|
<link href="../js/jqplot/jquery.jqplot.css" rel="stylesheet"/>
|
|
<!-- Theme style -->
|
|
<link href="../theme/theme.css" rel="stylesheet" />
|
|
<!-- Google font Signika -->
|
|
<link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-theme bg-blue navbar-static-top" role="navigation">
|
|
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="../index.html"><span class="fa fa-shield"></span> AdminLTE</a>
|
|
<a href="#" class='lte-menu-sm visible-xs navbar-brand'>
|
|
<span class="fa fa-list"></span>
|
|
</a>
|
|
</div>
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-gears"></i></a>
|
|
<ul class="dropdown-menu navbar-selector">
|
|
<li role="presentation" class="dropdown-header font-primary noClick">Navbar Color</li>
|
|
<li class="font-primary" data-color="bg-primary"><a href="#"><i class="fa fa-gear"></i> Primary</a></li>
|
|
<li class="font-blue" data-color="bg-blue"><a href="#"><i class="fa fa-gear"></i> Blue <small class="text-muted">(default)</small></a></li>
|
|
<li class="font-light-blue" data-color="bg-light-blue"><a href="#"><i class="fa fa-gear"></i> Light Blue</a></li>
|
|
<li class="font-green" data-color="bg-green"><a href="#"><i class="fa fa-gear"></i> Green</a></li>
|
|
<li class="font-yellow" data-color="bg-yellow"><a href="#"><i class="fa fa-gear"></i> Yellow</a></li>
|
|
<li class="font-purple" data-color="bg-purple"><a href="#"><i class="fa fa-gear"></i> Purple</a></li>
|
|
<li class="font-red" data-color="bg-red"><a href="#"><i class="fa fa-gear"></i> Red</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#"><i class="fa fa-bullhorn"></i></a></li>
|
|
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">Profile</a></li>
|
|
<li><a href="#">Friends</a></li>
|
|
<li><a href="#">Settings</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Privacy</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<form class="navbar-form navbar-right">
|
|
<div class="form-group">
|
|
<input type="text" name="search" class="form-control" placeholder="..."/>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.navbar-collapse -->
|
|
</nav>
|
|
<div class="lte-main-content">
|
|
<!-- side bar -->
|
|
<div class="lte-sidebar col-md-2 col-sm-3 hidden-xs">
|
|
<ul class="lte-sidebar-menu">
|
|
<li><a href="../index.html"><i class="fa fa-dashboard"></i> Dashboard</a></li>
|
|
<li class="lte-tree active">
|
|
<a href="#"><i class="fa fa-bar-chart-o"></i> Charts<i class="pull-right fa fa-angle-right"></i></a>
|
|
<ul class="lte-tree-menu">
|
|
<li><a href="../charts/flot.html"><i class="fa fa-bar-chart-o"></i> Flot</a></li>
|
|
<li class="active"><a href="../charts/jqplot.html"><i class="fa fa-bar-chart-o"></i> JQplot</a></li>
|
|
<li><a href="../charts/xcharts.html"><i class="fa fa-bar-chart-o"></i> xCharts</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="../ui.html"><i class="fa fa-tint"></i> User Interface </a></li>
|
|
<!--<li><a href="../widgets.html"><i class="fa fa-gear"></i> Widgets</a></li>-->
|
|
<li class="lte-tree">
|
|
<a href="#"><i class="fa fa-pagelines"></i> Example Pages <i class="pull-right fa fa-angle-right"></i></a>
|
|
<ul class="lte-tree-menu">
|
|
<li><a href="../examples/invoice.html"><i class="fa fa-money"></i> Invoice</a></li>
|
|
<li><a href="../examples/login.html"><i class="fa fa-sign-in"></i> Login</a></li>
|
|
<li><a href="../examples/register.html"><i class="fa fa-lock"></i> Register</a></li>
|
|
<li><a href="../examples/blank_page.html"><i class="fa fa-paperclip"></i> Blank Page</a></li>
|
|
<li><a href="../examples/404.html"><i class="fa fa-unlink"></i> 404 Error Page</a></li>
|
|
<li><a href="../examples/500.html"><i class="fa fa-unlink"></i> 500 Error Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="../forms.html"><i class="fa fa-edit"></i> Forms</a></li>
|
|
<li><a href="../typography.html"><i class="fa fa-text-width"></i> Typography</a></li>
|
|
<li><a href="../calendar.html"><i class="fa fa-calendar"></i> Calendar</a></li>
|
|
|
|
<li class="lte-tree">
|
|
<a href="#"><i class="fa fa-pagelines"></i> Multilevel Dropdown<i class="pull-right fa fa-angle-right"></i></a>
|
|
<ul class="lte-tree-menu">
|
|
<li class="lte-tree">
|
|
<a href="#"><i class="fa fa-pagelines"></i> Level 1<i class="pull-right fa fa-angle-right"></i></a>
|
|
<ul class="lte-tree-menu">
|
|
<li class="lte-tree">
|
|
<a href="#"><i class="fa fa-pagelines"></i> Level 2<i class="pull-right fa fa-angle-right"></i></a>
|
|
<ul class="lte-tree-menu">
|
|
<li><a href="#"><i class="fa fa-pagelines"></i> Level 3</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<!-- /.side-bar-->
|
|
|
|
<div class="lte-main-container col-md-10 col-sm-9">
|
|
<!-- main content -->
|
|
<div class="page-header">
|
|
<i class="fa fa-bar-chart-o"></i> Jqplot Charts <small>example page</small>
|
|
</div>
|
|
<!-- /.page-header -->
|
|
<div class='lte-dashboard'>
|
|
<div class='row'>
|
|
<div class='col-sm-12'>
|
|
<div class='box box-blue'>
|
|
<div class='box-header'>
|
|
<h3 class="box-title"><i class="fa fa-bar-chart-o"></i> Line Chart</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class='box-body'>
|
|
<div id='chart1' class='lte-chart'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='row'>
|
|
<div class='col-sm-6 col-sm-12'>
|
|
<div class='box box-blue'>
|
|
<div class='box-header'>
|
|
<h3 class="box-title"><i class="fa fa-bar-chart-o"></i> Line Chart</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class='box-body'>
|
|
<div id='chart2' class='lte-chart'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='col-sm-6 col-sm-12'>
|
|
<div class='box box-blue'>
|
|
<div class='box-header'>
|
|
<h3 class="box-title"><i class="fa fa-bar-chart-o"></i> Line Chart</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class='box-body'>
|
|
<div id='chart3' class='lte-chart'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='row'>
|
|
<div class='col-md-4 col-sm-12'>
|
|
<div class='box box-blue'>
|
|
<div class='box-header'>
|
|
<h3 class="box-title"><i class="fa fa-bar-chart-o"></i> Pie Chart</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class='box-body'>
|
|
<div id='pie-chart3' class='lte-chart'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='col-md-4 col-sm-12'>
|
|
<div class='box box-blue'>
|
|
<div class='box-header'>
|
|
<h3 class="box-title"><i class="fa fa-bar-chart-o"></i> Pie Chart - 2</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class='box-body'>
|
|
<div id='pie-chart1' class='lte-chart'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='col-md-4 col-sm-12'>
|
|
<div class='box box-blue'>
|
|
<div class='box-header'>
|
|
<h3 class="box-title"><i class="fa fa-bar-chart-o"></i> Pie Chart - 3</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class='box-body'>
|
|
<div id='pie-chart2' class='lte-chart'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='row'>
|
|
<div class='col-md-4 col-sm-12'>
|
|
<div class='box box-blue'>
|
|
<div class='box-header'>
|
|
<h3 class="box-title"><i class="fa fa-bar-chart-o"></i> Bar Chart</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class='box-body'>
|
|
<div id='bar-chart1' class='lte-chart'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-md-4 col-sm-12'>
|
|
<div class='box box-blue'>
|
|
<div class='box-header'>
|
|
<h3 class="box-title"><i class="fa fa-bar-chart-o"></i> Bar Chart - 2</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class='box-body'>
|
|
<div id='bar-chart2' class='lte-chart'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='col-md-4 col-sm-12'>
|
|
<div class='box box-blue'>
|
|
<div class='box-header'>
|
|
<h3 class="box-title"><i class="fa fa-bar-chart-o"></i> Bar Chart - 3</h3>
|
|
<div class="box-tools">
|
|
<i class="fa fa-gear"></i>
|
|
<i class="fa fa-angle-down lte-hider"></i>
|
|
<i class="off fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<div class='box-body'>
|
|
<div id='bar-chart3' class='lte-chart'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.lte-dashboard -->
|
|
</div><!-- ./lte-main-container -->
|
|
</div>
|
|
<!-- ./.lte-main-content -->
|
|
<footer>
|
|
Copyright © 2013 - <a>Preview</a> - <a>Purchase</a> - Built with <a target="blank" href="http://getbootstrap.com">Bootstrap 3</a>
|
|
</footer>
|
|
|
|
|
|
<!-- JQuery 1.10.2 -> Important -->
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
<!-- Bootstrap -> Important-->
|
|
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
|
|
<!-- LTE Tree -> Important -->
|
|
<script src="../js/lteTree.js" type="text/javascript"></script>
|
|
<!-- LTE App -->
|
|
<script src="../js/lteApp.js" type="text/javascript"></script>
|
|
<!-- jqplot -->
|
|
<script src="../js/jqplot/jquery.jqplot.min.js" type="text/javascript"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.logAxisRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.highlighter.min.js"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
|
|
<script type="text/javascript" src="../js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
|
|
|
|
$.jqplot._noToImageButton = true;
|
|
var currYear = [["2011-08-01", 796.01], ["2011-08-02", 510.5], ["2011-08-03", 527.8],
|
|
["2011-08-05", 420.36], ["2011-08-06", 219.47], ["2011-08-07", 333.82], ["2011-08-08", 660.55],
|
|
["2011-08-10", 521], ["2011-08-11", 660.68], ["2011-08-12", 928.65], ["2011-08-13", 864.26],
|
|
["2011-08-15", 623.86], ["2011-08-16", 1300.05], ["2011-08-17", 972.25], ["2011-08-18", 661.98],
|
|
["2011-08-20", 1546.23], ["2011-08-21", 593], ["2011-08-22", 560.25], ["2011-08-23", 857.8],
|
|
["2011-08-25", 1256.14], ["2011-08-26", 1033.01], ["2011-08-27", 811.63], ["2011-08-28", 735.01],
|
|
["2011-08-31", 1177], ["2011-09-01", 1023.66], ["2011-09-02", 1442.31], ["2011-09-03", 1299.24],
|
|
["2011-09-09", 4118.48], ["2011-09-10", 1988.11], ["2011-09-11", 1485.89], ["2011-09-12", 2681.97],
|
|
["2011-09-13", 1679.56], ["2011-09-14", 3538.43], ["2011-09-15", 3118.01], ["2011-09-16", 4198.97],
|
|
["2011-09-17", 3020.44], ["2011-09-18", 3383.45], ["2011-09-19", 2148.91], ["2011-09-20", 3058.82],
|
|
["2011-09-25", 2785.93], ["2011-09-26", 4329.7], ["2011-09-27", 3493.72], ["2011-09-28", 4440.55], ["2011-10-3", 6200.2]];
|
|
var plot1 = $.jqplot("chart1", [currYear], {
|
|
seriesColors: ["#0c5175"],
|
|
highlighter: {
|
|
show: true,
|
|
sizeAdjust: 1,
|
|
tooltipOffset: 9
|
|
},
|
|
grid: {
|
|
background: 'rgba(57,57,57,0.0)',
|
|
drawBorder: false,
|
|
shadow: false,
|
|
gridLineColor: '#eeeeee',
|
|
gridLineWidth: 2
|
|
},
|
|
legend: {
|
|
show: false,
|
|
placement: 'inside'
|
|
},
|
|
seriesDefaults: {
|
|
rendererOptions: {
|
|
smooth: true,
|
|
animation: {
|
|
show: true
|
|
}
|
|
},
|
|
showMarker: false
|
|
},
|
|
series: [
|
|
{
|
|
fill: false,
|
|
label: '2012',
|
|
shadow: false
|
|
}
|
|
],
|
|
axesDefaults: {
|
|
rendererOptions: {
|
|
baselineWidth: 1.5,
|
|
baselineColor: '#444444',
|
|
drawBaseline: false
|
|
}
|
|
},
|
|
axes: {
|
|
xaxis: {
|
|
renderer: $.jqplot.DateAxisRenderer,
|
|
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
|
|
tickOptions: {
|
|
formatString: "%b %e",
|
|
angle: -30,
|
|
textColor: '#444444'
|
|
},
|
|
min: "2011-08-01",
|
|
max: "2011-09-30",
|
|
tickInterval: "7 days",
|
|
drawMajorGridlines: false
|
|
},
|
|
yaxis: {
|
|
renderer: $.jqplot.LogAxisRenderer,
|
|
pad: 0,
|
|
rendererOptions: {
|
|
minorTicks: 1
|
|
},
|
|
tickOptions: {
|
|
formatString: "%'d",
|
|
showMark: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
var s1 = [3200, 5633, 8921, 7842];
|
|
var ticks = ['Jun', 'Jul', 'Aug', 'Sep'];
|
|
var plot2 = $.jqplot('bar-chart1', [s1], {
|
|
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
|
|
animate: !$.jqplot.use_excanvas,
|
|
grid: {
|
|
background: 'rgba(57,57,57,0.0)',
|
|
drawBorder: false,
|
|
shadow: false,
|
|
gridLineColor: '#ffffff',
|
|
gridLineWidth: 2
|
|
},
|
|
seriesDefaults: {
|
|
renderer: $.jqplot.BarRenderer,
|
|
pointLabels: {show: true},
|
|
shadow: false,
|
|
color: "#52b9e9"
|
|
},
|
|
axes: {
|
|
xaxis: {
|
|
renderer: $.jqplot.CategoryAxisRenderer,
|
|
ticks: ticks
|
|
},
|
|
yaxis: {
|
|
show: false
|
|
}
|
|
},
|
|
highlighter: {show: false}
|
|
});
|
|
var data = [
|
|
['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14],
|
|
['Out of home', 16], ['Commuting', 7], ['Orientation', 9]
|
|
];
|
|
var plot3 = jQuery.jqplot('pie-chart1', [data],
|
|
{
|
|
grid: {
|
|
background: 'rgba(57,57,57,0.0)',
|
|
drawBorder: false,
|
|
shadow: false,
|
|
gridLineColor: '#eeeeee',
|
|
gridLineWidth: 2
|
|
},
|
|
seriesDefaults: {
|
|
// Make this a pie chart.
|
|
renderer: jQuery.jqplot.PieRenderer,
|
|
rendererOptions: {
|
|
// Put data labels on the pie slices.
|
|
// By default, labels show the percentage of the slice.
|
|
showDataLabels: true
|
|
}
|
|
},
|
|
legend: {show: true, location: 'e'}
|
|
}
|
|
);
|
|
|
|
var data = [
|
|
['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14],
|
|
['Out of home', 16], ['Commuting', 7], ['Orientation', 9]
|
|
];
|
|
var plot4 = jQuery.jqplot('pie-chart2', [data],
|
|
{
|
|
grid: {
|
|
background: 'rgba(57,57,57,0.0)',
|
|
drawBorder: false,
|
|
shadow: false,
|
|
gridLineColor: '#eeeeee',
|
|
gridLineWidth: 2
|
|
},
|
|
seriesDefaults: {
|
|
renderer: jQuery.jqplot.PieRenderer,
|
|
rendererOptions: {
|
|
// Turn off filling of slices.
|
|
fill: false,
|
|
showDataLabels: true,
|
|
// Add a margin to seperate the slices.
|
|
sliceMargin: 4,
|
|
// stroke the slices with a little thicker line.
|
|
lineWidth: 5
|
|
}
|
|
},
|
|
legend: {show: true, location: 'e'}
|
|
}
|
|
);
|
|
|
|
var current_nav_color = "bg-blue";
|
|
$(".navbar-selector li").not(".noClick").click(function(e) {
|
|
e.preventDefault();
|
|
var bg = $(this).data("color");
|
|
$(".navbar-theme").removeClass(current_nav_color).addClass(bg);
|
|
current_nav_color = bg;
|
|
});
|
|
//Remove widget when clicking the times icon
|
|
$(".box > .box-header > .box-tools > .off").click(function(e) {
|
|
e.preventDefault();
|
|
$(this).parents(".box").first().hide();
|
|
});
|
|
//LTE Tree
|
|
$(".lte-tree").lteTree();
|
|
|
|
var s1 = [['a', 6], ['b', 8], ['c', 14], ['d', 20]];
|
|
var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];
|
|
|
|
var plot5 = $.jqplot('pie-chart3', [s1, s2], {
|
|
grid: {
|
|
background: 'rgba(57,57,57,0.0)',
|
|
drawBorder: false,
|
|
shadow: false,
|
|
gridLineColor: '#eeeeee',
|
|
gridLineWidth: 2
|
|
},
|
|
seriesDefaults: {
|
|
// make this a donut chart.
|
|
renderer: $.jqplot.DonutRenderer,
|
|
rendererOptions: {
|
|
// Donut's can be cut into slices like pies.
|
|
sliceMargin: 3,
|
|
// Pies and donuts can start at any arbitrary angle.
|
|
startAngle: -90,
|
|
showDataLabels: true,
|
|
// By default, data labels show the percentage of the donut/pie.
|
|
// You can show the data 'value' or data 'label' instead.
|
|
dataLabels: 'value'
|
|
}
|
|
}
|
|
});
|
|
|
|
var s1 = [200, 600, 700, 1000];
|
|
var s2 = [460, -210, 690, 820];
|
|
var s3 = [-260, -440, 320, 200];
|
|
// Can specify a custom tick Array.
|
|
// Ticks should match up one for each y value (category) in the series.
|
|
var ticks = ['May', 'June', 'July', 'August'];
|
|
|
|
var plot6 = $.jqplot('bar-chart2', [s1, s2, s3], {
|
|
grid: {
|
|
background: 'rgba(57,57,57,0.0)',
|
|
drawBorder: false,
|
|
shadow: false,
|
|
gridLineColor: '#ffffff',
|
|
gridLineWidth: 2
|
|
},
|
|
// The "seriesDefaults" option is an options object that will
|
|
// be applied to all series in the chart.
|
|
seriesDefaults: {
|
|
renderer: $.jqplot.BarRenderer,
|
|
rendererOptions: {fillToZero: true}
|
|
},
|
|
// Custom labels for the series are specified with the "label"
|
|
// option on the series option. Here a series option object
|
|
// is specified for each series.
|
|
series: [
|
|
{label: 'Hotel'},
|
|
{label: 'Event Regristration'},
|
|
{label: 'Airfare'}
|
|
],
|
|
// Show the legend and put it outside the grid, but inside the
|
|
// plot container, shrinking the grid to accomodate the legend.
|
|
// A value of "outside" would not shrink the grid and allow
|
|
// the legend to overflow the container.
|
|
legend: {
|
|
show: false,
|
|
placement: 'inside'
|
|
},
|
|
axes: {
|
|
// Use a category axis on the x axis and use our custom ticks.
|
|
xaxis: {
|
|
renderer: $.jqplot.CategoryAxisRenderer,
|
|
ticks: ticks
|
|
},
|
|
// Pad the y axis just a little so bars can get close to, but
|
|
// not touch, the grid boundaries. 1.2 is the default padding.
|
|
yaxis: {
|
|
pad: 1.05,
|
|
tickOptions: {formatString: '$%d'}
|
|
}
|
|
}
|
|
});
|
|
|
|
// For horizontal bar charts, x an y values must will be "flipped"
|
|
// from their vertical bar counterpart.
|
|
var plot7 = $.jqplot('bar-chart3', [
|
|
[[2, 1], [4, 2], [6, 3], [3, 4]],
|
|
[[5, 1], [1, 2], [3, 3], [4, 4]],
|
|
[[4, 1], [7, 2], [1, 3], [2, 4]]], {
|
|
grid: {
|
|
background: 'rgba(57,57,57,0.0)',
|
|
drawBorder: false,
|
|
shadow: false,
|
|
gridLineColor: '#ffffff',
|
|
gridLineWidth: 2
|
|
},
|
|
seriesDefaults: {
|
|
renderer: $.jqplot.BarRenderer,
|
|
// Show point labels to the right ('e'ast) of each bar.
|
|
// edgeTolerance of -15 allows labels flow outside the grid
|
|
// up to 15 pixels. If they flow out more than that, they
|
|
// will be hidden.
|
|
pointLabels: {show: true, location: 'e', edgeTolerance: -15},
|
|
// Rotate the bar shadow as if bar is lit from top right.
|
|
shadowAngle: 135,
|
|
// Here's where we tell the chart it is oriented horizontally.
|
|
rendererOptions: {
|
|
barDirection: 'horizontal'
|
|
}
|
|
},
|
|
axes: {
|
|
yaxis: {
|
|
renderer: $.jqplot.CategoryAxisRenderer
|
|
}
|
|
}
|
|
});
|
|
|
|
// Some simple loops to build up data arrays.
|
|
var cosPoints = [];
|
|
for (var i = 0; i < 2 * Math.PI; i += 0.4) {
|
|
cosPoints.push([i, Math.cos(i)]);
|
|
}
|
|
|
|
var sinPoints = [];
|
|
for (var i = 0; i < 2 * Math.PI; i += 0.4) {
|
|
sinPoints.push([i, 2 * Math.sin(i - .8)]);
|
|
}
|
|
|
|
var powPoints1 = [];
|
|
for (var i = 0; i < 2 * Math.PI; i += 0.4) {
|
|
powPoints1.push([i, 2.5 + Math.pow(i / 4, 2)]);
|
|
}
|
|
|
|
var powPoints2 = [];
|
|
for (var i = 0; i < 2 * Math.PI; i += 0.4) {
|
|
powPoints2.push([i, -2.5 - Math.pow(i / 4, 2)]);
|
|
}
|
|
|
|
var plot8 = $.jqplot('chart2', [cosPoints, sinPoints, powPoints1, powPoints2],
|
|
{
|
|
grid: {
|
|
background: 'rgba(57,57,57,0.0)',
|
|
drawBorder: false,
|
|
shadow: false,
|
|
gridLineColor: '#eeeeee',
|
|
gridLineWidth: 2
|
|
},
|
|
title: 'Line Style Options',
|
|
// Series options are specified as an array of objects, one object
|
|
// for each series.
|
|
series: [
|
|
{
|
|
// Change our line width and use a diamond shaped marker.
|
|
lineWidth: 2,
|
|
markerOptions: {style: 'dimaond'}
|
|
},
|
|
{
|
|
// Don't show a line, just show markers.
|
|
// Make the markers 7 pixels with an 'x' style
|
|
showLine: false,
|
|
markerOptions: {size: 7, style: "x"}
|
|
},
|
|
{
|
|
// Use (open) circlular markers.
|
|
markerOptions: {style: "circle"}
|
|
},
|
|
{
|
|
// Use a thicker, 5 pixel line and 10 pixel
|
|
// filled square markers.
|
|
lineWidth: 5,
|
|
markerOptions: {style: "filledSquare", size: 10}
|
|
}
|
|
],
|
|
axes: {
|
|
xaxis: {
|
|
drawMajorGridlines: false
|
|
},
|
|
yaxis: {
|
|
rendererOptions: {
|
|
minorTicks: 1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
var plot9 = $.jqplot('chart3', [[3, 7, 9, 1, 4, 6, 8, 2, 5]], {
|
|
grid: {
|
|
background: 'rgba(57,57,57,0.0)',
|
|
drawBorder: false,
|
|
shadow: false,
|
|
gridLineColor: '#eeeeee',
|
|
gridLineWidth: 2
|
|
},
|
|
// Give the plot a title.
|
|
title: 'Plot With Options',
|
|
// You can specify options for all axes on the plot at once with
|
|
// the axesDefaults object. Here, we're using a canvas renderer
|
|
// to draw the axis label which allows rotated text.
|
|
axesDefaults: {
|
|
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
|
|
},
|
|
// An axes object holds options for all axes.
|
|
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
|
|
// Up to 9 y axes are supported.
|
|
axes: {
|
|
// options for each axis are specified in seperate option objects.
|
|
xaxis: {
|
|
label: "X Axis",
|
|
// Turn off "padding". This will allow data point to lie on the
|
|
// edges of the grid. Default padding is 1.2 and will keep all
|
|
// points inside the bounds of the grid.
|
|
pad: 0,
|
|
drawMajorGridlines: false
|
|
},
|
|
yaxis: {
|
|
rendererOptions: {
|
|
minorTicks: 1
|
|
},
|
|
label: "Y Axis"
|
|
}
|
|
}
|
|
});
|
|
$(window).resize(function() {
|
|
plot1.replot({resetAxes: true});
|
|
plot2.replot({resetAxes: true});
|
|
plot3.replot({resetAxes: true});
|
|
plot4.replot({resetAxes: true});
|
|
plot5.replot({resetAxes: true});
|
|
plot6.replot({resetAxes: true});
|
|
plot7.replot({resetAxes: true});
|
|
plot8.replot({resetAxes: true});
|
|
plot9.replot({resetAxes: true});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |