<!DOCTYPE html>
<html>
<head>
<?php include 'attribute/attribute_head.php';?>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<?php include 'attribute/attribute_header.php';?>
<?php include 'attribute/attribute_sidebar.php';?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Flot Charts
<small>preview sample</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Charts</a></li>
<li class="active">Flot</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<!-- interactive chart -->
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Interactive Area Chart</h3>
<div class="box-tools pull-right">
Real time
<div class="btn-group" id="realtime" data-toggle="btn-toggle">
<button type="button" class="btn btn-default btn-xs active"
data-toggle="on">On</button>
<button type="button" class="btn btn-default btn-xs"
data-toggle="off">Off</button>
</div>
</div>
</div>
<div class="box-body">
<div id="interactive" style="height: 300px;"></div>
</div><!-- /.box-body-->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="col-md-6">
<!-- Line chart -->
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Line Chart</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="line-chart" style="height: 300px;"></div>
</div><!-- /.box-body-->
</div><!-- /.box -->
<!-- Area chart -->
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Full Width Area Chart</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="area-chart" style="height: 338px;" class="full-width-chart"></div>
</div><!-- /.box-body-->
</div><!-- /.box -->
</div><!-- /.col -->
<div class="col-md-6">
<!-- Bar chart -->
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Bar Chart</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="bar-chart" style="height: 300px;"></div>
</div><!-- /.box-body-->
</div><!-- /.box -->
<!-- Donut chart -->
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Donut Chart</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="donut-chart" style="height: 300px;"></div>
</div><!-- /.box-body-->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs"><b>Version</b> 1.0.0</div>
<strong>Team © 2024
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript::;">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
<li>
<a href="javascript::;">
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
<p>New phone +1(800)555-1234</p>
</div>
</a>
</li>
<li>
<a href="javascript::;">
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
<p>nora@example.com</p>
</div>
</a>
</li>
<li>
<a href="javascript::;">
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
<p>Execution time 5 seconds</p>
</div>
</a>
</li>
</ul><!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript::;">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
<li>
<a href="javascript::;">
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</a>
</li>
<li>
<a href="javascript::;">
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-warning pull-right">50%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</a>
</li>
<li>
<a href="javascript::;">
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</a>
</li>
</ul><!-- /.control-sidebar-menu -->
</div><!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
</p>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div><!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right">
</label>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
</label>
</div><!-- /.form-group -->
</form>
</div><!-- /.tab-pane -->
</div>
</aside><!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div><!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- FLOT CHARTS -->
<script src="plugins/flot/jquery.flot.min.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="plugins/flot/jquery.flot.resize.min.js"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="plugins/flot/jquery.flot.pie.min.js"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="plugins/flot/jquery.flot.categories.min.js"></script>
<!-- Page script -->
<script>
$(function() {
/*
* Flot Interactive Chart
* -----------------------
*/
// We use an inline data source in the example, usually data would
// be fetched from a server
var data = [],
totalPoints = 100;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else if (y > 100) {
y = 100;
}
data.push(y);
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]]);
}
return res;
}
var interactive_plot = $.plot("#interactive", [getRandomData()], {
grid: {
borderColor: "#f3f3f3",
borderWidth: 1,
tickColor: "#f3f3f3"
},
series: {
shadowSize: 0, // Drawing is faster without shadows
color: "#3c8dbc"
},
lines: {
fill: true, //Converts the line chart to area chart
color: "#3c8dbc"
},
yaxis: {
min: 0,
max: 100,
show: true
},
xaxis: {
show: true
}
});
var updateInterval = 500; //Fetch data ever x milliseconds
var realtime = "on"; //If == to on then fetch data every x seconds. else stop fetching
function update() {
interactive_plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
interactive_plot.draw();
if (realtime === "on")
setTimeout(update, updateInterval);
}
//INITIALIZE REALTIME DATA FETCHING
if (realtime === "on") {
update();
}
//REALTIME TOGGLE
$("#realtime .btn").click(function() {
if ($(this).data("toggle") === "on") {
realtime = "on";
} else {
realtime = "off";
}
update();
});
/*
* END INTERACTIVE CHART
*/
/*
* LINE CHART
* ----------
*/
//LINE randomly generated data
var sin = [],
cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var line_data1 = {
data: sin,
color: "#3c8dbc"
};
var line_data2 = {
data: cos,
color: "#00c0ef"
};
$.plot("#line-chart", [line_data1, line_data2], {
grid: {
hoverable: true,
borderColor: "#f3f3f3",
borderWidth: 1,
tickColor: "#f3f3f3"
},
series: {
shadowSize: 0,
lines: {
show: true
},
points: {
show: true
}
},
lines: {
fill: false,
color: ["#3c8dbc", "#f56954"]
},
yaxis: {
show: true,
},
xaxis: {
show: true
}
});
//Initialize tooltip on hover
$('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
position: "absolute",
display: "none",
opacity: 0.8
}).appendTo("body");
$("#line-chart").bind("plothover", function(event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#line-chart-tooltip").html(item.series.label + " of " + x + " = " + y)
.css({
top: item.pageY + 5,
left: item.pageX + 5
})
.fadeIn(200);
} else {
$("#line-chart-tooltip").hide();
}
});
/* END LINE CHART */
/*
* FULL WIDTH STATIC AREA CHART
* -----------------
*/
var areaData = [
[2, 88.0],
[3, 93.3],
[4, 102.0],
[5, 108.5],
[6, 115.7],
[7, 115.6],
[8, 124.6],
[9, 130.3],
[10, 134.3],
[11, 141.4],
[12, 146.5],
[13, 151.7],
[14, 159.9],
[15, 165.4],
[16, 167.8],
[17, 168.7],
[18, 169.5],
[19, 168.0]
];
$.plot("#area-chart", [areaData], {
grid: {
borderWidth: 0
},
series: {
shadowSize: 0, // Drawing is faster without shadows
color: "#00c0ef"
},
lines: {
fill: true //Converts the line chart to area chart
},
yaxis: {
show: false
},
xaxis: {
show: false
}
});
/* END AREA CHART */
/*
* BAR CHART
* ---------
*/
var bar_data = {
data: [
["January", 10],
["February", 8],
["March", 4],
["April", 13],
["May", 17],
["June", 9]
],
color: "#3c8dbc"
};
$.plot("#bar-chart", [bar_data], {
grid: {
borderWidth: 1,
borderColor: "#f3f3f3",
tickColor: "#f3f3f3"
},
series: {
bars: {
show: true,
barWidth: 0.5,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
/* END BAR CHART */
/*
* DONUT CHART
* -----------
*/
var donutData = [{
label: "Series2",
data: 30,
color: "#3c8dbc"
},
{
label: "Series3",
data: 20,
color: "#0073b7"
},
{
label: "Series4",
data: 50,
color: "#00c0ef"
}
];
$.plot("#donut-chart", donutData, {
series: {
pie: {
show: true,
radius: 1,
innerRadius: 0.5,
label: {
show: true,
radius: 2 / 3,
formatter: labelFormatter,
threshold: 0.1
}
}
},
legend: {
show: false
}
});
/*
* END DONUT CHART
*/
});
/*
* Custom Label formatter
* ----------------------
*/
function labelFormatter(label, series) {
return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">' +
label +
"<br>" +
Math.round(series.percent) + "%</div>";
}
</script>
</body>
</html> |