|
@@ -1,718 +0,0 @@
|
|
|
-<!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>
|