mirror of https://github.com/ColorlibHQ/gentelella
upgrade font-awesome to 5.8.1
Britney Wright
parent
eea0150c65
commit
cb11dd6725
|
|
@ -25,7 +25,7 @@
|
|||
"devDependencies": {
|
||||
"jquery": "^2.2.3",
|
||||
"bootstrap": "^3.4.1",
|
||||
"font-awesome": "fontawesome#^4.6.1",
|
||||
"font-awesome": "fontawesome#^5.8.1",
|
||||
"fastclick": "^1.0.6",
|
||||
"nprogress": "^0.2.0",
|
||||
"Chart.js": "^2.0.2",
|
||||
|
|
|
|||
|
|
@ -302,7 +302,9 @@ html , body{
|
|||
margin-bottom: 10px;
|
||||
float: left
|
||||
}
|
||||
.main_menu span.fa {
|
||||
.main_menu span.fa,
|
||||
.main_menu span.fab,
|
||||
.main_menu span.fas {
|
||||
float: right;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
|
|
@ -310,7 +312,9 @@ html , body{
|
|||
min-width: inherit;
|
||||
color: #C4CFDA
|
||||
}
|
||||
.active a span.fa {
|
||||
.active a span.fa,
|
||||
.active a span.fab,
|
||||
.active a span.fas {
|
||||
text-align: right !important;
|
||||
margin-right: 4px
|
||||
}
|
||||
|
|
@ -318,10 +322,14 @@ html , body{
|
|||
margin: 0
|
||||
}
|
||||
.nav-sm span.fa,
|
||||
.nav-sm span.fab,
|
||||
.nav-sm span.fas,
|
||||
.nav-sm .menu_section h3 {
|
||||
display: none
|
||||
}
|
||||
.nav-sm li li span.fa {
|
||||
.nav-sm li li span.fa,
|
||||
.nav-sm li li span.fab,
|
||||
.nav-sm li li span.fas {
|
||||
display: inline-block
|
||||
}
|
||||
.nav_menu {
|
||||
|
|
@ -1832,25 +1840,27 @@ h4.graph_title {
|
|||
padding-left: 10px;
|
||||
border-radius: 4px
|
||||
}
|
||||
.fontawesome-icon-list .fa-hover a:hover .fa {
|
||||
.fontawesome-icon-list .fa-hover a:hover .fa,
|
||||
.fontawesome-icon-list .fb-hover a:hover .fab,
|
||||
.fontawesome-icon-list .fa-hover a:hover .fas {
|
||||
font-size: 28px;
|
||||
vertical-align: -6px
|
||||
}
|
||||
.fontawesome-icon-list .fa-hover a .fa {
|
||||
.fontawesome-icon-list .fa-hover a .fa,
|
||||
.fontawesome-icon-list .fa-hover a .fab,
|
||||
.fontawesome-icon-list .fa-hover a .fas {
|
||||
width: 32px;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
margin-right: 10px
|
||||
}
|
||||
.main_menu .fa {
|
||||
.main_menu .fa,
|
||||
.main_menu .fab,
|
||||
.main_menu .fas {
|
||||
width: 26px;
|
||||
opacity: .99;
|
||||
display: inline-block;
|
||||
font-family: FontAwesome;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -13,7 +13,8 @@
|
|||
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="fonts/css/all.min.css" rel="stylesheet">
|
||||
<link href="fonts/css/v4-shims.min.css" rel="stylesheet">
|
||||
<link href="css/animate.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
|
|
@ -157,7 +158,8 @@
|
|||
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="fonts/css/all.min.css" rel="stylesheet">
|
||||
<link href="fonts/css/v4-shims.min.css" rel="stylesheet">
|
||||
<link href="css/animate.min.css" rel="stylesheet">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="fonts/css/all.min.css" rel="stylesheet">
|
||||
<link href="fonts/css/v4-shims.min.css" rel="stylesheet">
|
||||
<link href="css/animate.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
|
|
@ -180,7 +181,8 @@
|
|||
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="fonts/css/all.min.css" rel="stylesheet">
|
||||
<link href="fonts/css/v4-shims.min.css" rel="stylesheet">
|
||||
<link href="css/animate.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Theme styling -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- FullCalendar -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- jQuery custom content scroller -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- jQuery custom content scroller -->
|
||||
|
|
|
|||
|
|
@ -6,13 +6,14 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
||||
<title>Gentelella Alela! | </title>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- bootstrap-daterangepicker -->
|
||||
|
|
|
|||
|
|
@ -12,10 +12,11 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Custom Theme Style -->
|
||||
<link href="../build/css/custom.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- Dropzone.js -->
|
||||
|
|
|
|||
|
|
@ -12,10 +12,11 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Custom Theme Style -->
|
||||
<link href="../build/css/custom.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
|
|
|
|||
|
|
@ -12,10 +12,11 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Custom styling plus plugins -->
|
||||
<link href="../build/css/custom.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -12,10 +12,11 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Custom styling plus plugins -->
|
||||
<link href="../build/css/custom.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
|
@ -1979,6 +1980,9 @@
|
|||
<div class="fa-hover col-md-3 col-sm-4 col-xs-12"><a href="#/adn"><i class="fa fa-adn"></i> fa-adn</a>
|
||||
</div>
|
||||
|
||||
<div class="fa-hover col-md-3 col-sm-4 col-xs-12"><a href="#/amazon"><i class="fab fa-amazon"></i> fab fa-amazon</a>
|
||||
</div>
|
||||
|
||||
<div class="fa-hover col-md-3 col-sm-4 col-xs-12"><a href="#/android"><i class="fa fa-android"></i> fa-android</a>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- bootstrap-wysiwyg -->
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- bootstrap-daterangepicker -->
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- bootstrap-progressbar -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- Animate.css -->
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="fonts/css/all.min.css" rel="stylesheet">
|
||||
<link href="fonts/css/v4-shims.min.css" rel="stylesheet">
|
||||
<link href="css/animate.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styling plus plugins -->
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- bootstrap-daterangepicker -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- iCheck -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<!-- Bootstrap -->
|
||||
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/all.min.css" rel="stylesheet">
|
||||
<link href="../vendors/font-awesome/css/v4-shims.min.css" rel="stylesheet">
|
||||
<!-- NProgress -->
|
||||
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
|
||||
<!-- bootstrap-progressbar -->
|
||||
|
|
|
|||
|
|
@ -13,6 +13,6 @@
|
|||
"commit": "453b017cc5acfd75e252b93e8635f57f4196d45d"
|
||||
},
|
||||
"_source": "https://github.com/flot/flot.git",
|
||||
"_target": ">=0.8.0",
|
||||
"_target": "^0.8.3",
|
||||
"_originalSource": "flot"
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
*.min.js
|
||||
!excanvas.min.js
|
||||
node_modules/
|
||||
debug.log
|
||||
coverage/**
|
||||
dist/
|
||||
.vscode
|
||||
|
|
@ -1,40 +1,3 @@
|
|||
dist: trusty
|
||||
language: node_js
|
||||
node_js:
|
||||
- '8'
|
||||
addons:
|
||||
firefox: latest
|
||||
chrome: stable
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
before_install:
|
||||
- export DISPLAY=:99.0
|
||||
- sh -e /etc/init.d/xvfb start
|
||||
- npm install -g greenkeeper-lockfile@1
|
||||
- npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN
|
||||
before_script:
|
||||
- greenkeeper-lockfile-update
|
||||
- sudo chown root /opt/google/chrome/chrome-sandbox
|
||||
- sudo chmod 4755 /opt/google/chrome/chrome-sandbox
|
||||
after_script:
|
||||
- greenkeeper-lockfile-upload
|
||||
before_deploy:
|
||||
- tar -tf $(npm pack)
|
||||
install:
|
||||
- npm install
|
||||
script:
|
||||
- npm test
|
||||
- npm run build
|
||||
- npm run coverage
|
||||
env:
|
||||
secure: mkyiKGXQ8wkx4kSi/x7kProXE76E2Ix5xP+xHAcTpMhsFJYsyFE8LR8wC7UWxg80nbww6P1mWpJkMPm2QnWW8OSuKh9pF2bluTU7VAf68JHROA55FZauO0NgLWxF1tog/RLaTXBzoqXBx5+Zlcp2jl4UdsDSIr/1TogSEC7hV3dMiqzTsiC09RnAgtGsUfzDjCGVgyz2yDBMCoi+kfzJiRz7f1dW5GxhUypuV4jjEXTt1V6XrIA0C/uD27LP+kswHadMT6HURPiWEJteKNFz6hnfXttF1XmTwW++kzahDoap607oLszz+g8ss/9F0ILyO3tffyKnoEOImJLogvLUm3slxfHvh9PYh7x8oyPHFtfs7QAJ5Q2Cr23VvwJNslkuNCphEsQJS/HQ70VuSF6MlGrhbsLGp8kEFZrXADqojkGQ/duPk3QykiXUaUxr0uPEllptOLh5TTKYarRM/IVv4kE5iC4egJXouKxwwL5LIglnyCTycEdTLv/IUfYap8ABqi20eBm+AJGk44Z72fl+G/xoPrzbtVosQfPbuLurVJHHDDExHM3bFqfUNnB9xIEwWTihSc6ycI7IhuMQlg1G1t5rRY5YyVQN/4oP4k6qNgYbJs9PrxfyMw7Z+dSg/L2SyJbc/ReNiFkvpTNDYGY/dULvx1uGM1NGdmC+z+nljfk=
|
||||
deploy:
|
||||
provider: npm
|
||||
skip_cleanup: true
|
||||
email: webapps.ops@ni.com
|
||||
api_key:
|
||||
secure: kJyDLyReYLVr01TidziatIzTk1GpTvGLQo7XLAQReDemRkN13905TaYPsrl5IMnkLfk6RaizbCscx7z1MGi3P/U+2DC10OE4pbnUVrcCZLX9RPqLmVgVWxX+pPH+Mu3Td/Ay7CYeNdo031Lufxbc+m0kGlVnMyPBwctU36ES+OI=
|
||||
on:
|
||||
tags: true
|
||||
repo: flot/flot
|
||||
- 0.8
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ the plot, see below.
|
|||
|
||||
The rest of the options are all documented below as they are the same
|
||||
as the default options passed in via the options parameter in the plot
|
||||
command. When you specify them for a specific data series, they will
|
||||
commmand. When you specify them for a specific data series, they will
|
||||
override the default options for the plot for that data series.
|
||||
|
||||
Here's a complete example of a simple data specification:
|
||||
|
|
@ -531,18 +531,14 @@ calendars don't follow a simple base 10 system. For many cases, Flot
|
|||
abstracts most of this away, but it can still be a bit difficult to
|
||||
get the data into Flot. So we'll first discuss the data format.
|
||||
|
||||
The time series support in Flot is based on Epoch timestamps, i.e.,
|
||||
everywhere a time value is expected or handed over, a number is used.
|
||||
This is a number, not a Date object. Flot supports three different time
|
||||
bases in which the timestamps can be given: seconds, milliseconds and
|
||||
microseconds. The timestamp is therefore the number of microseconds,
|
||||
milliseconds or seconds since January 1, 1970 00:00:00 UTC.
|
||||
The time series support in Flot is based on Javascript timestamps,
|
||||
i.e. everywhere a time value is expected or handed over, a Javascript
|
||||
timestamp number is used. This is a number, not a Date object. A
|
||||
Javascript timestamp is the number of milliseconds since January 1,
|
||||
1970 00:00:00 UTC. This is almost the same as Unix timestamps, except it's
|
||||
in milliseconds, so remember to multiply by 1000!
|
||||
|
||||
The time base in which the timestamps are given to Flot can be selected
|
||||
by setting the "timeBase" option to "microseconds", "milliseconds"
|
||||
or "seconds" in axis options. If not set, it defaults to "seconds".
|
||||
|
||||
You can see a native Javascript timestamp (in milliseconds) like this
|
||||
You can see a timestamp like this
|
||||
|
||||
```js
|
||||
alert((new Date()).getTime())
|
||||
|
|
@ -649,7 +645,6 @@ this:
|
|||
```js
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
timeBase: "milliseconds",
|
||||
timeformat: "%Y/%m/%d"
|
||||
}
|
||||
```
|
||||
|
|
@ -668,7 +663,6 @@ standard strftime specifiers are supported (plus the nonstandard %q):
|
|||
%M: minutes, zero-padded (00-59)
|
||||
%q: quarter (1-4)
|
||||
%S: seconds, zero-padded (00-59)
|
||||
%s: sub-seconds, accuracy can be denoted with a number (e.g., %3s)
|
||||
%y: year (two digits)
|
||||
%Y: year (four digits)
|
||||
%p: am/pm
|
||||
|
|
@ -700,12 +694,6 @@ applies if you have not set "timeformat". Use the "%I" and "%p" or
|
|||
"%P" options if you want to build your own format string with 12-hour
|
||||
times.
|
||||
|
||||
If you want to have ticks with a fixed sub-second accuracy, you can add
|
||||
a number in the subsecond specifier (e.g., "%3s" for millisecond
|
||||
accuracy) in the "timeformat" string". If the accuracy for the sub-second
|
||||
timestamps is not given, Flot will automatically determine the accuracy
|
||||
depending on the timespan of the axis and the number of ticks, to create.
|
||||
|
||||
If the Date object has a strftime property (and it is a function), it
|
||||
will be used instead of the built-in formatter. Thus you can include
|
||||
a strftime library such as http://hacks.bluesmoon.info/strftime/ for
|
||||
|
|
|
|||
|
|
@ -1,20 +1,40 @@
|
|||
# flot [](https://travis-ci.org/flot/flot) [](https://circleci.com/gh/flot/flot) [](https://coveralls.io/github/flot/flot?branch=master) [](https://greenkeeper.io/)
|
||||
# Flot [](https://travis-ci.org/flot/flot)
|
||||
|
||||
## About ##
|
||||
|
||||
flot is a JavaScript plotting library for engineering and scientific
|
||||
applications derived from Flot: <http://www.flotcharts.org/>
|
||||
Flot is a Javascript plotting library for jQuery.
|
||||
Read more at the website: <http://www.flotcharts.org/>
|
||||
|
||||
Take a look at the the examples in examples/index.html; they should give a good
|
||||
impression of what flot can do, and the source code of the examples is probably
|
||||
the fastest way to learn how to use flot.
|
||||
impression of what Flot can do, and the source code of the examples is probably
|
||||
the fastest way to learn how to use Flot.
|
||||
|
||||
|
||||
## Installation ##
|
||||
|
||||
Just include the JavaScript file after you've included jQuery.
|
||||
Just include the Javascript file after you've included jQuery.
|
||||
|
||||
Generally, all modern browsers are supported.
|
||||
Generally, all browsers that support the HTML5 canvas tag are
|
||||
supported.
|
||||
|
||||
For support for Internet Explorer < 9, you can use [Excanvas]
|
||||
[excanvas], a canvas emulator; this is used in the examples bundled
|
||||
with Flot. You just include the excanvas script like this:
|
||||
|
||||
```html
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
|
||||
```
|
||||
|
||||
If it's not working on your development IE 6.0, check that it has
|
||||
support for VML which Excanvas is relying on. It appears that some
|
||||
stripped down versions used for test environments on virtual machines
|
||||
lack the VML support.
|
||||
|
||||
You can also try using [Flashcanvas][flashcanvas], which uses Flash to
|
||||
do the emulation. Although Flash can be a bit slower to load than VML,
|
||||
if you've got a lot of points, the Flash version can be much faster
|
||||
overall. Flot contains some wrapper code for activating Excanvas which
|
||||
Flashcanvas is compatible with.
|
||||
|
||||
You need at least jQuery 1.2.6, but try at least 1.3.2 for interactive
|
||||
charts because of performance improvements in event handling.
|
||||
|
|
@ -51,8 +71,8 @@ $.plot($("#placeholder"), data, options);
|
|||
|
||||
Here, data is an array of data series and options is an object with
|
||||
settings if you want to customize the plot. Take a look at the
|
||||
examples for some ideas of what to put in or look at the
|
||||
[API reference](API.md). Here's a quick example that'll draw a line
|
||||
examples for some ideas of what to put in or look at the
|
||||
[API reference](API.md). Here's a quick example that'll draw a line
|
||||
from (0, 0) to (1, 1):
|
||||
|
||||
```js
|
||||
|
|
@ -62,17 +82,29 @@ $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
|
|||
The plot function immediately draws the chart and then returns a plot
|
||||
object with a couple of methods.
|
||||
|
||||
## Documentation and examples
|
||||
|
||||
API Documentation is available here: [API reference](docs/API.md)
|
||||
## What's with the name? ##
|
||||
|
||||
About how the plugins work: [Plugins](docs/PLUGINS.md)
|
||||
First: it's pronounced with a short o, like "plot". Not like "flawed".
|
||||
|
||||
High level overview on how interactions are handled internally: [Interactions](docs/interactions.md)
|
||||
So "Flot" rhymes with "plot".
|
||||
|
||||
Examples are included in the examples folder of this repository, but they can be tried out online as well: [Examples](https://rawgit.com/flot/flot/master/examples/index.html)
|
||||
And if you look up "flot" in a Danish-to-English dictionary, some of
|
||||
the words that come up are "good-looking", "attractive", "stylish",
|
||||
"smart", "impressive", "extravagant". One of the main goals with Flot
|
||||
is pretty looks.
|
||||
|
||||
## CircleCI
|
||||
|
||||
[CircleCI](https://circleci.com/) is used in this repo to run [dont-break](https://www.npmjs.com/package/dont-break),
|
||||
which checks if the current version of flot breaks unit tests on specified dependent projects.
|
||||
## Notes about the examples ##
|
||||
|
||||
In order to have a useful, functional example of time-series plots using time
|
||||
zones, date.js from [timezone-js][timezone-js] (released under the Apache 2.0
|
||||
license) and the [Olson][olson] time zone database (released to the public
|
||||
domain) have been included in the examples directory. They are used in
|
||||
examples/axes-time-zones/index.html.
|
||||
|
||||
|
||||
[excanvas]: http://code.google.com/p/explorercanvas/
|
||||
[flashcanvas]: http://code.google.com/p/flashcanvas/
|
||||
[timezone-js]: https://github.com/mde/timezone-js
|
||||
[olson]: http://ftp.iana.org/time-zones
|
||||
|
|
|
|||
|
|
@ -4,42 +4,19 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: AJAX</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
||||
var options = {
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2
|
||||
},
|
||||
points: {
|
||||
show: true
|
||||
}
|
||||
lines: {
|
||||
show: true
|
||||
},
|
||||
points: {
|
||||
show: true
|
||||
},
|
||||
xaxis: {
|
||||
tickDecimals: 0,
|
||||
|
|
|
|||
|
|
@ -1,109 +1,87 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Adding Annotations</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script type="text/javascript">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Adding Annotations</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
$(function() {
|
||||
|
||||
var d1 = [];
|
||||
for (var i = 0; i < 20; ++i) {
|
||||
d1.push([i, Math.sin(i)]);
|
||||
}
|
||||
var d1 = [];
|
||||
for (var i = 0; i < 20; ++i) {
|
||||
d1.push([i, Math.sin(i)]);
|
||||
}
|
||||
|
||||
var data = [{ data: d1, label: "Pressure", color: "#333" }];
|
||||
var data = [{ data: d1, label: "Pressure", color: "#333" }];
|
||||
|
||||
var markings = [
|
||||
{ color: "#f6f6f6", yaxis: { from: 1 } },
|
||||
{ color: "#f6f6f6", yaxis: { to: -1 } },
|
||||
{ color: "#000", lineWidth: 1, xaxis: { from: 2, to: 2 } },
|
||||
{ color: "#000", lineWidth: 1, xaxis: { from: 8, to: 8 } }
|
||||
];
|
||||
var markings = [
|
||||
{ color: "#f6f6f6", yaxis: { from: 1 } },
|
||||
{ color: "#f6f6f6", yaxis: { to: -1 } },
|
||||
{ color: "#000", lineWidth: 1, xaxis: { from: 2, to: 2 } },
|
||||
{ color: "#000", lineWidth: 1, xaxis: { from: 8, to: 8 } }
|
||||
];
|
||||
|
||||
var placeholder = $("#placeholder");
|
||||
var placeholder = $("#placeholder");
|
||||
|
||||
var plot = $.plot(placeholder, data, {
|
||||
series: {
|
||||
bars: { show: true, barWidth: 0.5, fill: 0.9 }
|
||||
},
|
||||
xaxis: { show: false },
|
||||
yaxis: { min: -2, max: 2, autoScale: "none" },
|
||||
grid: { markings: markings }
|
||||
});
|
||||
var plot = $.plot(placeholder, data, {
|
||||
bars: { show: true, barWidth: 0.5, fill: 0.9 },
|
||||
xaxis: { ticks: [], autoscaleMargin: 0.02 },
|
||||
yaxis: { min: -2, max: 2 },
|
||||
grid: { markings: markings }
|
||||
});
|
||||
|
||||
var o = plot.pointOffset({ x: 2, y: -1.2});
|
||||
var o = plot.pointOffset({ x: 2, y: -1.2});
|
||||
|
||||
// Append it to the placeholder that Flot already uses for positioning
|
||||
// Append it to the placeholder that Flot already uses for positioning
|
||||
|
||||
placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Warming up</div>");
|
||||
placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Warming up</div>");
|
||||
|
||||
o = plot.pointOffset({ x: 8, y: -1.2});
|
||||
placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Actual measurements</div>");
|
||||
o = plot.pointOffset({ x: 8, y: -1.2});
|
||||
placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Actual measurements</div>");
|
||||
|
||||
// Draw a little arrow on top of the last label to demonstrate canvas
|
||||
// drawing
|
||||
// Draw a little arrow on top of the last label to demonstrate canvas
|
||||
// drawing
|
||||
|
||||
var ctx = plot.getCanvas().getContext("2d");
|
||||
ctx.beginPath();
|
||||
o.left += 4;
|
||||
ctx.moveTo(o.left, o.top);
|
||||
ctx.lineTo(o.left, o.top - 10);
|
||||
ctx.lineTo(o.left + 10, o.top - 5);
|
||||
ctx.lineTo(o.left, o.top);
|
||||
ctx.fillStyle = "#000";
|
||||
ctx.fill();
|
||||
var ctx = plot.getCanvas().getContext("2d");
|
||||
ctx.beginPath();
|
||||
o.left += 4;
|
||||
ctx.moveTo(o.left, o.top);
|
||||
ctx.lineTo(o.left, o.top - 10);
|
||||
ctx.lineTo(o.left + 10, o.top - 5);
|
||||
ctx.lineTo(o.left, o.top);
|
||||
ctx.fillStyle = "#000";
|
||||
ctx.fill();
|
||||
|
||||
// Add the Flot version string to the footer
|
||||
// Add the Flot version string to the footer
|
||||
|
||||
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||||
});
|
||||
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||||
});
|
||||
|
||||
</script>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<h2>Adding Annotations</h2>
|
||||
</div>
|
||||
<div id="header">
|
||||
<h2>Adding Annotations</h2>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<div id="content">
|
||||
|
||||
<div class="demo-container">
|
||||
<div id="placeholder" class="demo-placeholder"></div>
|
||||
</div>
|
||||
<div class="demo-container">
|
||||
<div id="placeholder" class="demo-placeholder"></div>
|
||||
</div>
|
||||
|
||||
<p>Flot has support for simple background decorations such as lines and rectangles. They can be useful for marking up certain areas. You can easily add any HTML you need with standard DOM manipulation, e.g. for labels. For drawing custom shapes there is also direct access to the canvas.</p>
|
||||
<p>Flot has support for simple background decorations such as lines and rectangles. They can be useful for marking up certain areas. You can easily add any HTML you need with standard DOM manipulation, e.g. for labels. For drawing custom shapes there is also direct access to the canvas.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
||||
</div>
|
||||
<div id="footer">
|
||||
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,62 +4,39 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Interacting with axes</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
||||
function generate(start, end, fn) {
|
||||
var res = [];
|
||||
for (var i = 0; i <= 40; ++i) {
|
||||
var x = start + i / 40 * (end - start);
|
||||
for (var i = 0; i <= 100; ++i) {
|
||||
var x = start + i / 100 * (end - start);
|
||||
res.push([x, fn(x)]);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
var data = [
|
||||
{ data: generate(0, 10, function (x) { return Math.sqrt(x);}), xaxis: 1, yaxis:1, lines: { show: true, fill: true }},
|
||||
{ data: generate(0, 10, function (x) { return Math.sin(x);}), xaxis: 1, yaxis:2, points: { show: true }},
|
||||
{ data: generate(0, 10, function (x) { return (x < 3 || x > 5) ? Math.cos(x) : null;}), xaxis: 1, yaxis:3 },
|
||||
{ data: generate(2, 10, function (x) { return Math.tan(x);}), xaxis: 2, yaxis: 4, lines: { show: true, steps: true }},
|
||||
{ data: generate(5, 15, function (x) { return 30 * Math.sin(x/2+3);}), xaxis: 3, yaxis: 5, bars: {show: true, fill: true, barWidth:0.1, align: "center"}}
|
||||
{ data: generate(0, 10, function (x) { return Math.sqrt(x);}), xaxis: 1, yaxis:1 },
|
||||
{ data: generate(0, 10, function (x) { return Math.sin(x);}), xaxis: 1, yaxis:2 },
|
||||
{ data: generate(0, 10, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:3 },
|
||||
{ data: generate(2, 10, function (x) { return Math.tan(x);}), xaxis: 2, yaxis: 4 }
|
||||
];
|
||||
|
||||
var plot = $.plot("#placeholder", data, {
|
||||
xaxes: [
|
||||
{ position: 'bottom' },
|
||||
{ position: 'bottom'},
|
||||
{ position: 'top'}
|
||||
],
|
||||
yaxes: [
|
||||
{ position: 'left' },
|
||||
{ position: 'left' },
|
||||
{ position: 'right' },
|
||||
{ position: 'left' },
|
||||
{ position: 'right' }
|
||||
{ position: 'left' }
|
||||
]
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -4,31 +4,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Multiple Axes</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../lib/globalize.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../lib/globalize.culture.en-US.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -46,10 +25,7 @@
|
|||
{ data: oilprices, label: "Oil price ($)" },
|
||||
{ data: exchangerates, label: "USD/EUR exchange rate", yaxis: 2 }
|
||||
], {
|
||||
series: {
|
||||
lines: {lineWidth: 2}
|
||||
},
|
||||
xaxes: [ { mode: "time", timeBase: "milliseconds" } ],
|
||||
xaxes: [ { mode: "time" } ],
|
||||
yaxes: [ { min: 0 }, {
|
||||
// align if we are to the right
|
||||
alignTicksWithAxis: position == "right" ? 1 : null,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/* eslint-disable */
|
||||
// -----
|
||||
// The `timezoneJS.Date` object gives you full-blown timezone support, independent from the timezone set on the end-user's machine running the browser. It uses the Olson zoneinfo files for its timezone data.
|
||||
//
|
||||
|
|
|
|||
|
|
@ -4,30 +4,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Time zones</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../lib/globalize.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="date.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
|
|
@ -76,24 +56,21 @@
|
|||
|
||||
var plot = $.plot("#placeholderUTC", [d], {
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
timeBase: "milliseconds"
|
||||
mode: "time"
|
||||
}
|
||||
});
|
||||
|
||||
var plot = $.plot("#placeholderLocal", [d], {
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
timezone: "browser",
|
||||
timeBase: "milliseconds"
|
||||
timezone: "browser"
|
||||
}
|
||||
});
|
||||
|
||||
var plot = $.plot("#placeholderChicago", [d], {
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
timezone: "America/Chicago",
|
||||
timeBase: "milliseconds"
|
||||
timezone: "America/Chicago"
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,29 +4,9 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Basic Options</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function () {
|
||||
|
|
@ -56,14 +36,12 @@
|
|||
points: { show: true }
|
||||
},
|
||||
xaxis: {
|
||||
autoScale: "exact",
|
||||
ticks: [
|
||||
0, [ Math.PI/2, "\u03c0/2" ], [ Math.PI, "\u03c0" ],
|
||||
[ Math.PI * 3/2, "3\u03c0/2" ], [ Math.PI * 2, "2\u03c0" ]
|
||||
]
|
||||
},
|
||||
yaxis: {
|
||||
autoScale: "none",
|
||||
ticks: 10,
|
||||
min: -2,
|
||||
max: 2,
|
||||
|
|
|
|||
|
|
@ -4,29 +4,9 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Basic Usage</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
|
|||
|
|
@ -4,30 +4,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Categories</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.categories.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.categories.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -44,8 +24,7 @@
|
|||
},
|
||||
xaxis: {
|
||||
mode: "categories",
|
||||
showTicks: false,
|
||||
gridLines: false
|
||||
tickLength: 0
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -78,3 +57,8 @@
|
|||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
|
||||
body {
|
||||
background: url(background.png) repeat-x;
|
||||
font: 18px "proxima-nova", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font: 18px/1.5em "proxima-nova", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
a { color: #069; }
|
||||
|
|
@ -84,63 +83,15 @@ input[type=checkbox] {
|
|||
-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||
-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||
-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.demo-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: block;
|
||||
-webkit-margin-start: 2px;
|
||||
-webkit-margin-end: 2px;
|
||||
-webkit-padding-before: 0.35em;
|
||||
-webkit-padding-start: 0.75em;
|
||||
-webkit-padding-end: 0.75em;
|
||||
-webkit-padding-after: 0.625em;
|
||||
min-width: -webkit-min-content;
|
||||
border-width: 2px;
|
||||
border-style: groove;
|
||||
border-color: threedface;
|
||||
border-image: initial;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: block;
|
||||
-webkit-padding-start: 2px;
|
||||
-webkit-padding-end: 2px;
|
||||
border-width: initial;
|
||||
border-style: none;
|
||||
border-color: initial;
|
||||
border-image: initial;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.legendLayer .background {
|
||||
fill: rgba(255, 255, 255, 0.85);
|
||||
stroke: rgba(0, 0, 0, 0.85);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin-top: -1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tickLabel {
|
||||
line-height: 1.1;
|
||||
}
|
||||
.legend table {
|
||||
border-spacing: 5px;
|
||||
}
|
||||
|
|
@ -4,30 +4,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Image Plots</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.image.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.image.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -41,14 +21,12 @@
|
|||
}
|
||||
},
|
||||
xaxis: {
|
||||
autoScale: "none",
|
||||
min: -8,
|
||||
max: 8
|
||||
max: 4
|
||||
},
|
||||
yaxis: {
|
||||
autoScale: "none",
|
||||
min: -8,
|
||||
max: 8
|
||||
max: 4
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,119 +1,80 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples</title>
|
||||
<link href="examples.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples</title>
|
||||
<link href="examples.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
|
||||
h3 {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script type="text/javascript">
|
||||
</style>
|
||||
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
$(function() {
|
||||
|
||||
// Add the Flot version string to the footer
|
||||
// Add the Flot version string to the footer
|
||||
|
||||
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||||
});
|
||||
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||||
});
|
||||
|
||||
</script>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<h2>Flot Examples</h2>
|
||||
</div>
|
||||
<div id="header">
|
||||
<h2>Flot Examples</h2>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<div id="content">
|
||||
|
||||
<p>Here are some examples for <a href="http://www.flotcharts.org">Flot</a>, the Javascript charting library for jQuery:</p>
|
||||
<p>Here are some examples for <a href="http://www.flotcharts.org">Flot</a>, the Javascript charting library for jQuery:</p>
|
||||
|
||||
<h3>Basic Usage</h3>
|
||||
<h3>Basic Usage</h3>
|
||||
|
||||
<ul>
|
||||
<li><a href="basic-usage/index.html">Basic example</a></li>
|
||||
<li><a href="series-types/index.html">Different graph types</a> and <a href="categories/index.html">simple categories/textual data</a></li>
|
||||
<li><a href="basic-options/index.html">Setting various options</a> and <a href="annotating/index.html">annotating a chart</a></li>
|
||||
<li><a href="ajax/index.html">Updating graphs with AJAX</a> and <a href="realtime/index.html">real-time updates</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="basic-usage/index.html">Basic example</a></li>
|
||||
<li><a href="series-types/index.html">Different graph types</a> and <a href="categories/index.html">simple categories/textual data</a></li>
|
||||
<li><a href="basic-options/index.html">Setting various options</a> and <a href="annotating/index.html">annotating a chart</a></li>
|
||||
<li><a href="ajax/index.html">Updating graphs with AJAX</a> and <a href="realtime/index.html">real-time updates</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Interactivity</h3>
|
||||
<h3>Interactivity</h3>
|
||||
|
||||
<ul>
|
||||
<li><a href="series-toggle/index.html">Turning series on/off</a></li>
|
||||
<li><a href="selection/index.html">Rectangular selection support and zooming</a> and <a href="zooming/index.html">zooming with overview</a> (both with selection plugin)</li>
|
||||
<li><a href="interacting/index.html">Interacting with the data points</a></li>
|
||||
<li><a href="navigate/index.html">Panning and zooming</a> (with navigation plugin)</li>
|
||||
<li><a href="navigateTouch/index.html">Panning and zooming simple and log-axis charts with Touch</a> (with touchNavigation plugin)</li>
|
||||
<li><a href="resize/index.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="series-toggle/index.html">Turning series on/off</a></li>
|
||||
<li><a href="selection/index.html">Rectangular selection support and zooming</a> and <a href="zooming/index.html">zooming with overview</a> (both with selection plugin)</li>
|
||||
<li><a href="interacting/index.html">Interacting with the data points</a></li>
|
||||
<li><a href="navigate/index.html">Panning and zooming</a> (with navigation plugin)</li>
|
||||
<li><a href="resize/index.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
|
||||
</ul>
|
||||
|
||||
<h3>Axes</h3>
|
||||
<h3>Additional Features</h3>
|
||||
|
||||
<ul>
|
||||
<li><a href="axes-time/index.html">Plotting time series</a>, <a href="visitors/index.html">visitors per day with zooming and weekends</a> (with selection plugin)</li>
|
||||
<li><a href="axes-time-zones/index.html">Time zone support</a></li>
|
||||
<li><a href="log-scale/index.html">Log scales</a></li>
|
||||
<li><a href="axes-multiple/index.html">Multiple axes</a></li>
|
||||
<li><a href="axes-interacting/index.html">Interacting with the axes</a></li>
|
||||
<li><a href="axes-autoscaling/index.html">Autoscaling options</a></li>
|
||||
<li><a href="axes-tickLabels/index.html">Tick labels options</a></li>
|
||||
<li><a href="axes-labels/index.html">Axis labels</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="symbols/index.html">Using other symbols than circles for points</a> (with symbol plugin)</li>
|
||||
<li><a href="axes-time/index.html">Plotting time series</a>, <a href="visitors/index.html">visitors per day with zooming and weekends</a> (with selection plugin) and <a href="axes-time-zones/index.html">time zone support</a></li>
|
||||
<li><a href="axes-multiple/index.html">Multiple axes</a> and <a href="axes-interacting/index.html">interacting with the axes</a></li>
|
||||
<li><a href="threshold/index.html">Thresholding the data</a> (with threshold plugin)</li>
|
||||
<li><a href="stacking/index.html">Stacked charts</a> (with stacking plugin)</li>
|
||||
<li><a href="percentiles/index.html">Using filled areas to plot percentiles</a> (with fillbetween plugin)</li>
|
||||
<li><a href="tracking/index.html">Tracking curves with crosshair</a> (with crosshair plugin)</li>
|
||||
<li><a href="image/index.html">Plotting prerendered images</a> (with image plugin)</li>
|
||||
<li><a href="series-errorbars/index.html">Plotting error bars</a> (with errorbars plugin)</li>
|
||||
<li><a href="series-pie/index.html">Pie charts</a> (with pie plugin)</li>
|
||||
<li><a href="canvas/index.html">Rendering text with canvas instead of HTML</a> (with canvas plugin)</li>
|
||||
</ul>
|
||||
|
||||
<h3>Additional Features</h3>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li><a href="symbols/index.html">Using other symbols than circles for points</a> (with symbol plugin)</li>
|
||||
<li><a href="threshold/index.html">Thresholding the data</a> (with threshold plugin)</li>
|
||||
<li><a href="stacking/index.html">Stacked charts</a> (with stacking plugin)</li>
|
||||
<li><a href="percentiles/index.html">Using filled areas to plot percentiles</a> (with fillbetween plugin)</li>
|
||||
<li><a href="tracking/index.html">Tracking curves with crosshair</a> (with crosshair plugin)</li>
|
||||
<li><a href="image/index.html">Plotting prerendered images</a> (with image plugin)</li>
|
||||
<li><a href="series-errorbars/index.html">Plotting error bars</a> (with errorbars plugin)</li>
|
||||
<li><a href="plot-legend/index.html">Plot Legend</a> </li>
|
||||
<li><a href="series-pie/index.html">Pie charts</a> (with pie plugin)</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
<p><i>
|
||||
Note that these examples use the non-minified source, so they will not work on older browsers such as Internet Explorer.
|
||||
Use the built source (which comes installed with the NPM package) if you need broader support.
|
||||
</i></p>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
Copyright © 2007 - 2013 IOLA and Ole Laursen
|
||||
</div>
|
||||
<div id="footer">
|
||||
Copyright © 2007 - 2013 IOLA and Ole Laursen
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,31 +4,9 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Interactivity</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../lib/jquery.event.drag.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../lib/jquery.mousewheel.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -60,13 +38,6 @@
|
|||
yaxis: {
|
||||
min: -1.2,
|
||||
max: 1.2
|
||||
},
|
||||
zoom: {
|
||||
interactive: true
|
||||
},
|
||||
pan: {
|
||||
interactive: true,
|
||||
enableTouch: true
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -100,10 +71,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
$("#placeholder").bind("plothovercleanup", function (event, pos, item) {
|
||||
$("#tooltip").hide();
|
||||
});
|
||||
|
||||
$("#placeholder").bind("plotclick", function (event, pos, item) {
|
||||
if (item) {
|
||||
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
|
||||
|
|
|
|||
|
|
@ -22,32 +22,11 @@
|
|||
font-size: smaller;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../lib/jquery.event.drag.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../lib/jquery.mousewheel.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
</style>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.navigate.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -73,20 +52,17 @@
|
|||
var plot = $.plot(placeholder, data, {
|
||||
series: {
|
||||
lines: {
|
||||
show: true
|
||||
},
|
||||
show: true
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
xaxis: {
|
||||
zoomRange: [0.1, 10],
|
||||
panRange: [-10, 10],
|
||||
gridLines: true
|
||||
panRange: [-10, 10]
|
||||
},
|
||||
yaxis: {
|
||||
zoomRange: [0.1, 10],
|
||||
panRange: [-10, 10],
|
||||
gridLines: true,
|
||||
autoScale: 'exact'
|
||||
panRange: [-10, 10]
|
||||
},
|
||||
zoom: {
|
||||
interactive: true
|
||||
|
|
@ -96,7 +72,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
// show pan/zoom messages to illustrate events
|
||||
// show pan/zoom messages to illustrate events
|
||||
|
||||
placeholder.bind("plotpan", function (event, plot) {
|
||||
var axes = plot.getAxes();
|
||||
|
|
@ -114,7 +90,7 @@
|
|||
+ " – " + axes.yaxis.max.toFixed(2));
|
||||
});
|
||||
|
||||
// add zoom out button
|
||||
// add zoom out button
|
||||
|
||||
$("<div class='button' style='right:20px;top:20px'>zoom out</div>")
|
||||
.appendTo(placeholder)
|
||||
|
|
|
|||
|
|
@ -4,30 +4,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Percentiles</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.fillbetween.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
|
|||
|
|
@ -3,30 +3,10 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Real-time updates</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -86,7 +66,7 @@
|
|||
|
||||
var plot = $.plot("#placeholder", [ getRandomData() ], {
|
||||
series: {
|
||||
shadowSize: 0 // Drawing is faster without shadows
|
||||
shadowSize: 0 // Drawing is faster without shadows
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
|
|
|
|||
|
|
@ -5,32 +5,11 @@
|
|||
<title>Flot Examples: Resizing</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<link href="../shared/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../shared/jquery-ui/jquery-ui.min.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.resize.js"></script>
|
||||
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../shared/jquery-ui/jquery-ui.min.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -44,7 +23,7 @@
|
|||
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
|
||||
|
||||
var placeholder = $("#placeholder");
|
||||
var plot = $.plot(placeholder, [d1, d2, d3]);
|
||||
var plot = $.plot(placeholder, [d1, d2, d3]);
|
||||
|
||||
// The plugin includes a jQuery plugin for adding resize events to any
|
||||
// element. Add a callback so we can display the placeholder size.
|
||||
|
|
|
|||
|
|
@ -4,29 +4,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Selection</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.selection.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -44,7 +25,7 @@
|
|||
label: "United States",
|
||||
data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]
|
||||
}, {
|
||||
label: "Russia",
|
||||
label: "Russia",
|
||||
data: [[1992, 13.4], [1993, 12.2], [1994, 10.6], [1995, 10.2], [1996, 10.1], [1997, 9.7], [1998, 9.5], [1999, 9.7], [2000, 9.9], [2001, 9.9], [2002, 9.9], [2003, 10.3], [2004, 10.5]]
|
||||
}, {
|
||||
label: "United Kingdom",
|
||||
|
|
@ -76,12 +57,9 @@
|
|||
noColumns: 2
|
||||
},
|
||||
xaxis: {
|
||||
autoScale: "exact",
|
||||
tickDecimals: 0
|
||||
},
|
||||
yaxis: {
|
||||
autoScale: "loose",
|
||||
autoScaleMargin: 0.2,
|
||||
min: 0
|
||||
},
|
||||
selection: {
|
||||
|
|
|
|||
|
|
@ -5,30 +5,10 @@
|
|||
<title>Flot Examples: Error Bars</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../lib/jquery.mousewheel.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.navigate.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -61,9 +41,9 @@
|
|||
var data1_points = {
|
||||
show: true,
|
||||
radius: 5,
|
||||
fillColor: "blue",
|
||||
errorbars: "xy",
|
||||
xerr: {show: true, asymmetric: true, upperCap: "-", lowerCap: "-"},
|
||||
fillColor: "blue",
|
||||
errorbars: "xy",
|
||||
xerr: {show: true, asymmetric: true, upperCap: "-", lowerCap: "-"},
|
||||
yerr: {show: true, color: "red", upperCap: "-"}
|
||||
};
|
||||
|
||||
|
|
@ -76,7 +56,7 @@
|
|||
var data2_points = {
|
||||
show: true,
|
||||
radius: 5,
|
||||
errorbars: "y",
|
||||
errorbars: "y",
|
||||
yerr: {show:true, asymmetric:true, upperCap: drawArrow, lowerCap: drawSemiCircle}
|
||||
};
|
||||
|
||||
|
|
@ -89,7 +69,7 @@
|
|||
var data3_points = {
|
||||
//do not show points
|
||||
radius: 0,
|
||||
errorbars: "y",
|
||||
errorbars: "y",
|
||||
yerr: {show:true, upperCap: "-", lowerCap: "-", radius: 5}
|
||||
};
|
||||
|
||||
|
|
@ -105,7 +85,7 @@
|
|||
}
|
||||
|
||||
var data = [
|
||||
{color: "blue", points: data1_points, data: data1, label: "data1"},
|
||||
{color: "blue", points: data1_points, data: data1, label: "data1"},
|
||||
{color: "red", points: data2_points, data: data2, label: "data2"},
|
||||
{color: "green", lines: {show: true}, points: data3_points, data: data3, label: "data3"},
|
||||
// bars with errors
|
||||
|
|
@ -124,12 +104,10 @@
|
|||
}
|
||||
},
|
||||
xaxis: {
|
||||
autoScale: 'none',
|
||||
min: 0.6,
|
||||
max: 3.1
|
||||
},
|
||||
yaxis: {
|
||||
autoScale: 'none',
|
||||
min: 0,
|
||||
max: 3.5
|
||||
},
|
||||
|
|
|
|||
|
|
@ -75,30 +75,10 @@
|
|||
}
|
||||
|
||||
</style>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.pie.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.pie.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -151,7 +131,7 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
|
|
@ -177,7 +157,7 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
|
|
@ -209,7 +189,7 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
|
|
@ -259,7 +239,7 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
|
|
@ -309,14 +289,14 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
background: {
|
||||
opacity: 0.5,
|
||||
color: "#000"
|
||||
}
|
||||
|
|
@ -361,14 +341,14 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
background: {
|
||||
opacity: 0.5,
|
||||
color: "#000"
|
||||
}
|
||||
|
|
@ -413,7 +393,7 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
|
|
@ -459,7 +439,7 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true,
|
||||
combine: {
|
||||
color: "#999",
|
||||
|
|
@ -499,7 +479,7 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 500,
|
||||
label: {
|
||||
|
|
@ -543,7 +523,7 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
tilt: 0.5,
|
||||
|
|
@ -603,7 +583,7 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
innerRadius: 0.5,
|
||||
show: true
|
||||
}
|
||||
|
|
@ -631,7 +611,7 @@
|
|||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
|
|
@ -775,7 +755,7 @@
|
|||
<li><b>opacity:</b> <i>0.5</i> - Opacity of the highlight overlay on top of the current pie slice. Currently this just uses a white overlay, but support for changing the color of the overlay will also be added at a later date.
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2>Changes/Features</h2>
|
||||
<ul>
|
||||
<li style="list-style: none;"><i>v1.0 - November 20th, 2009 - Brian Medendorp</i></li>
|
||||
|
|
@ -820,7 +800,7 @@
|
|||
<li>Merged original pie modifications by Sergey Nosenko into the latest SVN version <i>(as of May 15th, 2009)</i> so that it will work with ie8.</li>
|
||||
<li>Pie graph will now be centered in the canvas unless moved because of the legend or manually via the options. Additionally it prevents the pie from being moved beyond the edge of the canvas.</li>
|
||||
<li>Modified the code related to the labelFormatter option to apply flot's legend labelFormatter first. This is so that the labels will be consistent, but still provide extra formatting for the positioned labels (such as adding the percentage value).</li>
|
||||
<li>Positioned labels now have their backgrounds applied as a separate element (much like the legend background) so that the opacity value can be set independently from the label itself (foreground). Additionally, the background color defaults to that of the matching slice.</li>
|
||||
<li>Positioned labels now have their backgrounds applied as a seperate element (much like the legend background) so that the opacity value can be set independently from the label itself (foreground). Additionally, the background color defaults to that of the matching slice.</li>
|
||||
<li>As long as the labelOffset and radiusLimit are not set to hard values, the pie will be shrunk if the labels will extend outside the edge of the canvas</li>
|
||||
<li>Added new options "radiusLimitFactor" and "radiusLimit" which limits how large the (visual) radius of the pie is in relation to the full radius (as calculated from the canvas dimensions) or a hard-pixel value (respectively). This allows for pushing the labels "outside" the pie.</li>
|
||||
<li>Added a new option "labelHidePercent" that does not show the positioned labels of slices smaller than the specified percentage. This is to help prevent a bunch of overlapping labels from small slices.</li>
|
||||
|
|
|
|||
|
|
@ -4,29 +4,9 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Toggling Series</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -35,7 +15,7 @@
|
|||
"usa": {
|
||||
label: "USA",
|
||||
data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
|
||||
},
|
||||
},
|
||||
"russia": {
|
||||
label: "Russia",
|
||||
data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
|
||||
|
|
@ -71,7 +51,7 @@
|
|||
++i;
|
||||
});
|
||||
|
||||
// insert checkboxes
|
||||
// insert checkboxes
|
||||
var choiceContainer = $("#choices");
|
||||
$.each(datasets, function(key, val) {
|
||||
choiceContainer.append("<br/><input type='checkbox' name='" + key +
|
||||
|
|
@ -95,9 +75,6 @@
|
|||
|
||||
if (data.length > 0) {
|
||||
$.plot("#placeholder", data, {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
yaxis: {
|
||||
min: 0
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,30 +3,10 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Series Types</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
|
|||
|
|
@ -4,29 +4,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Stacking</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.stack.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -64,10 +45,7 @@
|
|||
show: bars,
|
||||
barWidth: 0.6
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
autoScale:"exact"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,31 +3,11 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Symbols</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.symbol.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -47,20 +27,17 @@
|
|||
|
||||
var data = [
|
||||
{ data: generate(2, 1.8), points: { symbol: "circle" } },
|
||||
{ data: generate(3, 1.5), points: { symbol: "square" } },
|
||||
{ data: generate(4, 0.9), points: { symbol: "diamond" } },
|
||||
{ data: generate(6, 1.4), points: { symbol: "triangle" } },
|
||||
{ data: generate(7, 1.1), points: { symbol: "cross" } },
|
||||
{ data: generate(8, 1.0), points: { symbol: "ellipse" } },
|
||||
{ data: generate(9, 1.3), points: { symbol: "plus" } }
|
||||
{ data: generate(3, 1.5), points: { symbol: "square" } },
|
||||
{ data: generate(4, 0.9), points: { symbol: "diamond" } },
|
||||
{ data: generate(6, 1.4), points: { symbol: "triangle" } },
|
||||
{ data: generate(7, 1.1), points: { symbol: "cross" } }
|
||||
];
|
||||
|
||||
$.plot("#placeholder", data, {
|
||||
series: {
|
||||
points: {
|
||||
show: true,
|
||||
radius: 3,
|
||||
lineWidth: 2
|
||||
radius: 3
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
|
|
|
|||
|
|
@ -4,30 +4,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Thresholds</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.threshold.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.threshold.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
|
|||
|
|
@ -4,30 +4,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Tracking</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.crosshair.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.crosshair.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -42,21 +22,16 @@
|
|||
{ data: sin, label: "sin(x) = -0.00"},
|
||||
{ data: cos, label: "cos(x) = -0.00" }
|
||||
], {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2
|
||||
show: true
|
||||
}
|
||||
},
|
||||
crosshair: {
|
||||
mode: "xy"
|
||||
mode: "x"
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
autoHighlight: false
|
||||
},
|
||||
yaxis: {
|
||||
|
|
@ -65,7 +40,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
var legends = $("#placeholder .legendLayer text tspan");
|
||||
var legends = $("#placeholder .legendLabel");
|
||||
|
||||
legends.each(function () {
|
||||
// fix the widths so they don't jump around
|
||||
|
|
@ -78,28 +53,34 @@
|
|||
function updateLegend() {
|
||||
|
||||
updateLegendTimeout = null;
|
||||
var pos = latestPosition;
|
||||
var axes = plot.getAxes();
|
||||
|
||||
var pos = latestPosition;
|
||||
|
||||
var axes = plot.getAxes();
|
||||
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
|
||||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
|
||||
return;
|
||||
}
|
||||
|
||||
var i, j, dataset = plot.getData();
|
||||
|
||||
for (i = 0; i < dataset.length; ++i) {
|
||||
|
||||
var series = dataset[i];
|
||||
|
||||
// Find the nearest points, x-wise
|
||||
|
||||
for (j = 0; j < series.data.length; ++j) {
|
||||
if (series.data[j][0] > pos.x) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Now Interpolate
|
||||
|
||||
var y,
|
||||
p1 = series.data[j - 1],
|
||||
p2 = series.data[j];
|
||||
|
||||
if (p1 == null) {
|
||||
y = p2[1];
|
||||
} else if (p2 == null) {
|
||||
|
|
@ -107,18 +88,17 @@
|
|||
} else {
|
||||
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
|
||||
}
|
||||
|
||||
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
|
||||
}
|
||||
}
|
||||
|
||||
$("#placeholder").bind("plothover", function (event, pos, item) {
|
||||
$("#placeholder").bind("plothover", function (event, pos, item) {
|
||||
latestPosition = pos;
|
||||
if (!updateLegendTimeout) {
|
||||
updateLegendTimeout = setTimeout(updateLegend, 50);
|
||||
}
|
||||
}).bind("plotclick", function (event, pos, item) {
|
||||
plot.lockCrosshair(pos);
|
||||
});;
|
||||
});
|
||||
|
||||
// Add the Flot version string to the footer
|
||||
|
||||
|
|
|
|||
|
|
@ -4,30 +4,11 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Visitors</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../lib/globalize.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.selection.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -72,9 +53,7 @@
|
|||
var options = {
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
timeBase: "milliseconds",
|
||||
tickLength: 5,
|
||||
gridLines: false
|
||||
tickLength: 5
|
||||
},
|
||||
selection: {
|
||||
mode: "x"
|
||||
|
|
@ -101,7 +80,7 @@
|
|||
yaxis: {
|
||||
ticks: [],
|
||||
min: 0,
|
||||
autoScaleMargin: 0.1
|
||||
autoscaleMargin: 0.1
|
||||
},
|
||||
selection: {
|
||||
mode: "x"
|
||||
|
|
|
|||
|
|
@ -4,29 +4,10 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Selection and zooming</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../jquery.flot.selection.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
|
@ -58,11 +39,7 @@
|
|||
show: true
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
autoScale: "none"
|
||||
},
|
||||
yaxis: {
|
||||
autoScale:"none",
|
||||
ticks: 10
|
||||
},
|
||||
selection: {
|
||||
|
|
@ -88,11 +65,9 @@
|
|||
shadowSize: 0
|
||||
},
|
||||
xaxis: {
|
||||
autoScale: "none",
|
||||
ticks: 4
|
||||
},
|
||||
yaxis: {
|
||||
autoScale: "none",
|
||||
ticks: 3,
|
||||
min: -2,
|
||||
max: 2
|
||||
|
|
|
|||
|
|
@ -1,51 +1,11 @@
|
|||
{
|
||||
"name": "flot",
|
||||
"version": "3.0.2",
|
||||
"main": "dist/es5/jquery.flot.js",
|
||||
"scripts": {
|
||||
"test": "node node_modules/karma/bin/karma start --single-run --no-auto-watch --concurrency=1 --stopOnEsLintError",
|
||||
"coverage": "node node_modules/karma/bin/karma start --single-run --coverage --no-auto-watch --concurrency=1",
|
||||
"build": "node ./node_modules/gulp/bin/gulp.js build",
|
||||
"dont-break": "dont-break --timeout 300",
|
||||
"docs": "node ./update_docs.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/flot/flot.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/flot/flot/issues"
|
||||
},
|
||||
"homepage": "https://github.com/flot/flot#readme",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.2.3",
|
||||
"@babel/core": "^7.4.0",
|
||||
"@babel/plugin-external-helpers": "^7.2.0",
|
||||
"@babel/preset-env": "^7.2.3",
|
||||
"concat": "^1.0.3",
|
||||
"files-exist": "^1.1.0",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-babel": "^8.0.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-sourcemaps": "^2.4.0",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"jasmine-core": "~2.7.0",
|
||||
"karma": "^1.3.0",
|
||||
"karma-chrome-launcher": "^2.0.0",
|
||||
"karma-coverage": "^1.1.2",
|
||||
"karma-coveralls": "^1.1.2",
|
||||
"karma-edge-launcher": "^0.4.2",
|
||||
"karma-eslint": "^2.2.0",
|
||||
"karma-firefox-launcher": "^1.0.0",
|
||||
"karma-jasmine": "^1.0.2",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"karma-jasmine-jquery": "^0.1.1",
|
||||
"karma-safari-launcher": "^1.0.0",
|
||||
"karma-spec-reporter": "0.0.32",
|
||||
"ljs": "^0.3.2",
|
||||
"tmp": "0.0.33",
|
||||
"webcharts-development-settings": "^1.0.9"
|
||||
},
|
||||
"dependencies": {}
|
||||
"name": "Flot",
|
||||
"version": "0.8.3",
|
||||
"main": "jquery.flot.js",
|
||||
"scripts": {
|
||||
"test": "make test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jshint": "0.9.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<title>{{ page_title }}</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/fontawesome.min.css">
|
||||
<link href="{{ base_url }}/css/prettify-1.0.css" rel="stylesheet">
|
||||
<link href="{{ base_url }}/css/base.css" rel="stylesheet">
|
||||
{%- for path in extra_css %}
|
||||
|
|
|
|||
|
|
@ -1,100 +0,0 @@
|
|||
# This configuration was automatically generated from a CircleCI 1.0 config.
|
||||
# It should include any build commands you had along with commands that CircleCI
|
||||
# inferred from your project structure. We strongly recommend you read all the
|
||||
# comments in this file to understand the structure of CircleCI 2.0, as the idiom
|
||||
# for configuration has changed substantially in 2.0 to allow arbitrary jobs rather
|
||||
# than the prescribed lifecycle of 1.0. In general, we recommend using this generated
|
||||
# configuration as a reference rather than using it in production, though in most
|
||||
# cases it should duplicate the execution of your original 1.0 config.
|
||||
version: 2
|
||||
jobs:
|
||||
build:
|
||||
working_directory: ~/flot/flot
|
||||
parallelism: 1
|
||||
shell: /bin/bash --login
|
||||
# CircleCI 2.0 does not support environment variables that refer to each other the same way as 1.0 did.
|
||||
# If any of these refer to each other, rewrite them so that they don't or see https://circleci.com/docs/2.0/env-vars/#interpolating-environment-variables-to-set-other-environment-variables .
|
||||
environment:
|
||||
CIRCLE_ARTIFACTS: /tmp/circleci-artifacts
|
||||
CIRCLE_TEST_REPORTS: /tmp/circleci-test-results
|
||||
# In CircleCI 1.0 we used a pre-configured image with a large number of languages and other packages.
|
||||
# In CircleCI 2.0 you can now specify your own image, or use one of our pre-configured images.
|
||||
# The following configuration line tells CircleCI to use the specified docker image as the runtime environment for you job.
|
||||
# We have selected a pre-built image that mirrors the build environment we use on
|
||||
# the 1.0 platform, but we recommend you choose an image more tailored to the needs
|
||||
# of each job. For more information on choosing an image (or alternatively using a
|
||||
# VM instead of a container) see https://circleci.com/docs/2.0/executor-types/
|
||||
# To see the list of pre-built images that CircleCI provides for most common languages see
|
||||
# https://circleci.com/docs/2.0/circleci-images/
|
||||
docker:
|
||||
- image: circleci/build-image:ubuntu-14.04-XXL-upstart-1189-5614f37
|
||||
command: /sbin/init
|
||||
steps:
|
||||
# Machine Setup
|
||||
# If you break your build into multiple jobs with workflows, you will probably want to do the parts of this that are relevant in each
|
||||
# The following `checkout` command checks out your code to your working directory. In 1.0 we did this implicitly. In 2.0 you can choose where in the course of a job your code should be checked out.
|
||||
- checkout
|
||||
# Prepare for artifact and test results collection equivalent to how it was done on 1.0.
|
||||
# In many cases you can simplify this from what is generated here.
|
||||
# 'See docs on artifact collection here https://circleci.com/docs/2.0/artifacts/'
|
||||
- run: mkdir -p $CIRCLE_ARTIFACTS $CIRCLE_TEST_REPORTS
|
||||
# This is based on your 1.0 configuration file or project settings
|
||||
- run:
|
||||
working_directory: ~/flot/flot
|
||||
command: nvm install 8.2.0 && nvm alias default 8.2.0
|
||||
# Dependencies
|
||||
# This would typically go in either a build or a build-and-test job when using workflows
|
||||
# Restore the dependency cache
|
||||
- restore_cache:
|
||||
keys:
|
||||
# This branch if available
|
||||
- v1-dep-{{ .Branch }}-
|
||||
# Default branch if not
|
||||
- v1-dep-master-
|
||||
# Any branch if there are none on the default branch - this should be unnecessary if you have your default branch configured correctly
|
||||
- v1-dep-
|
||||
# This is based on your 1.0 configuration file or project settings
|
||||
- run: sudo apt-get update
|
||||
- run: sudo apt-get install libpango1.0-0
|
||||
- run: sudo apt-get install firefox
|
||||
- run: sudo ln -sf /usr/lib/firefox/firefox /usr/bin/firefox
|
||||
- run: curl -s https://raw.githubusercontent.com/chronogolf/circleci-google-chrome/master/use_chrome_stable_version.sh | bash
|
||||
- run: node --version
|
||||
- run: npm --version
|
||||
- run: npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN
|
||||
# The following line was run implicitly in your 1.0 builds based on what CircleCI inferred about the structure of your project. In 2.0 you need to be explicit about which commands should be run. In some cases you can discard inferred commands if they are not relevant to your project.
|
||||
- run: if [ -z "${NODE_ENV:-}" ]; then export NODE_ENV=test; fi
|
||||
- run: export PATH="~/flot/flot/node_modules/.bin:$PATH"
|
||||
- run: npm install
|
||||
# This is based on your 1.0 configuration file or project settings
|
||||
- run: npm install -g dont-break
|
||||
- run: npm run build
|
||||
# Save dependency cache
|
||||
- save_cache:
|
||||
key: v1-dep-{{ .Branch }}-{{ epoch }}
|
||||
paths:
|
||||
# This is a broad list of cache paths to include many possible development environments
|
||||
# You can probably delete some of these entries
|
||||
- vendor/bundle
|
||||
- ~/virtualenvs
|
||||
- ~/.m2
|
||||
- ~/.ivy2
|
||||
- ~/.bundle
|
||||
- ~/.go_workspace
|
||||
- ~/.gradle
|
||||
- ~/.cache/bower
|
||||
- ./node_modules
|
||||
# Test
|
||||
# This would typically be a build job when using workflows, possibly combined with build
|
||||
# This is based on your 1.0 configuration file or project settings
|
||||
- run: npm run dont-break
|
||||
# Teardown
|
||||
# If you break your build into multiple jobs with workflows, you will probably want to do the parts of this that are relevant in each
|
||||
# Save test results
|
||||
- store_test_results:
|
||||
path: /tmp/circleci-test-results
|
||||
# Save artifacts
|
||||
- store_artifacts:
|
||||
path: /tmp/circleci-artifacts
|
||||
- store_artifacts:
|
||||
path: /tmp/circleci-test-results
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
[
|
||||
"https://github.com/ni-kismet/flot-cursors-plugin",
|
||||
"https://github.com/ni-kismet/flot-intensitygraph-plugin",
|
||||
"https://github.com/ni-kismet/flot-charting-plugin",
|
||||
"https://github.com/ni-kismet/webcharts",
|
||||
"https://github.com/ni-kismet/webcharts-legends"
|
||||
]
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
*
|
||||
|
||||
!dist/*
|
||||
!lib/*
|
||||
!docs/*
|
||||
!source/*
|
||||
!CHANGELOG.md
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,57 +0,0 @@
|
|||
/* eslint-disable */
|
||||
|
||||
var args = process.argv.slice(2);
|
||||
var fs = require('fs');
|
||||
var concat = require('concat');
|
||||
var tmp = require('tmp');
|
||||
|
||||
var distDir = './dist/es5';
|
||||
var distFile = 'jquery.flot.js';
|
||||
|
||||
if (!fs.existsSync(distDir)) {
|
||||
fs.mkdirSync(distDir)
|
||||
}
|
||||
|
||||
function concatenateFiles(destinationPath, callback) {
|
||||
concat([
|
||||
'./jquery.colorhelpers.js',
|
||||
'./jquery.canvaswrapper.js',
|
||||
'./jquery.flot.js',
|
||||
'./jquery.flot.saturated.js',
|
||||
'./jquery.flot.browser.js',
|
||||
'./jquery.flot.drawSeries.js',
|
||||
'./jquery.flot.uiConstants.js',
|
||||
'./jquery.flot.logaxis.js',
|
||||
'./jquery.flot.symbol.js',
|
||||
'./jquery.flot.flatdata.js',
|
||||
'./jquery.flot.navigate.js',
|
||||
'./jquery.flot.touchNavigate.js',
|
||||
'./jquery.flot.hover.js',
|
||||
'./jquery.flot.touch.js',
|
||||
'./jquery.flot.time.js',
|
||||
'./jquery.flot.axislabels.js',
|
||||
'./jquery.flot.selection.js',
|
||||
'./jquery.flot.composeImages.js',
|
||||
'./jquery.flot.legend.js'
|
||||
], destinationPath);
|
||||
}
|
||||
|
||||
if (args[0] === 'test') {
|
||||
console.log('testing distribution ...');
|
||||
var tmpobj = tmp.fileSync();
|
||||
concatenateFiles(tmpobj.name, function(err, result) {
|
||||
var origBuild = fs.readFileSync(distDir + '/' + distFile, 'utf8');
|
||||
var newBuild = fs.readFileSync(tmpobj.name, 'utf8');
|
||||
|
||||
if (newBuild !== origBuild) {
|
||||
console.log('The distribution file dist/es5/jquery.flot.js is not up to date. Type "npm run build" to fix it !');
|
||||
process.exitCode = 1;
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Ok');
|
||||
});
|
||||
} else {
|
||||
console.log('building ', distDir + '/' + distFile);
|
||||
concatenateFiles(distDir + '/' + distFile);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,143 +0,0 @@
|
|||
## Writing plugins ##
|
||||
|
||||
All you need to do to make a new plugin is creating an init function
|
||||
and a set of options (if needed), stuffing it into an object and
|
||||
putting it in the $.plot.plugins array. For example:
|
||||
|
||||
```js
|
||||
function myCoolPluginInit(plot) {
|
||||
plot.coolstring = "Hello!";
|
||||
};
|
||||
|
||||
$.plot.plugins.push({ init: myCoolPluginInit, options: { ... } });
|
||||
|
||||
// if $.plot is called, it will return a plot object with the
|
||||
// attribute "coolstring"
|
||||
```
|
||||
|
||||
Now, given that the plugin might run in many different places, it's
|
||||
a good idea to avoid leaking names. The usual trick here is wrap the
|
||||
above lines in an anonymous function which is called immediately, like
|
||||
this: (function () { inner code ... })(). To make it even more robust
|
||||
in case $ is not bound to jQuery but some other Javascript library, we
|
||||
can write it as
|
||||
|
||||
```js
|
||||
(function ($) {
|
||||
// plugin definition
|
||||
// ...
|
||||
})(jQuery);
|
||||
```
|
||||
|
||||
There's a complete example below, but you should also check out the
|
||||
plugins bundled with Flot.
|
||||
|
||||
|
||||
## Complete example ##
|
||||
|
||||
Here is a simple debug plugin which alerts each of the series in the
|
||||
plot. It has a single option that control whether it is enabled and
|
||||
how much info to output:
|
||||
|
||||
```js
|
||||
(function ($) {
|
||||
function init(plot) {
|
||||
var debugLevel = 1;
|
||||
|
||||
function checkDebugEnabled(plot, options) {
|
||||
if (options.debug) {
|
||||
debugLevel = options.debug;
|
||||
plot.hooks.processDatapoints.push(alertSeries);
|
||||
}
|
||||
}
|
||||
|
||||
function alertSeries(plot, series, datapoints) {
|
||||
var msg = "series " + series.label;
|
||||
if (debugLevel > 1) {
|
||||
msg += " with " + series.data.length + " points";
|
||||
alert(msg);
|
||||
}
|
||||
}
|
||||
|
||||
plot.hooks.processOptions.push(checkDebugEnabled);
|
||||
}
|
||||
|
||||
var options = { debug: 0 };
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: "simpledebug",
|
||||
version: "0.1"
|
||||
});
|
||||
})(jQuery);
|
||||
```
|
||||
|
||||
We also define "name" and "version". It's not used by Flot, but might
|
||||
be helpful for other plugins in resolving dependencies.
|
||||
|
||||
Put the above in a file named "jquery.flot.debug.js", include it in an
|
||||
HTML page and then it can be used with:
|
||||
|
||||
```js
|
||||
$.plot($("#placeholder"), [...], { debug: 2 });
|
||||
```
|
||||
|
||||
This simple plugin illustrates a couple of points:
|
||||
|
||||
- It uses the anonymous function trick to avoid name pollution.
|
||||
- It can be enabled/disabled through an option.
|
||||
- Variables in the init function can be used to store plot-specific
|
||||
state between the hooks.
|
||||
|
||||
The two last points are important because there may be multiple plots
|
||||
on the same page, and you'd want to make sure they are not mixed up.
|
||||
|
||||
|
||||
## Shutting down a plugin ##
|
||||
|
||||
Each plot object has a shutdown hook which is run when plot.shutdown()
|
||||
is called. This usually mostly happens in case another plot is made on
|
||||
top of an existing one.
|
||||
|
||||
The purpose of the hook is to give you a chance to unbind any event
|
||||
handlers you've registered and remove any extra DOM things you've
|
||||
inserted.
|
||||
|
||||
The problem with event handlers is that you can have registered a
|
||||
handler which is run in some point in the future, e.g. with
|
||||
setTimeout(). Meanwhile, the plot may have been shutdown and removed,
|
||||
but because your event handler is still referencing it, it can't be
|
||||
garbage collected yet, and worse, if your handler eventually runs, it
|
||||
may overwrite stuff on a completely different plot.
|
||||
|
||||
|
||||
## Some hints on the options ##
|
||||
|
||||
Plugins should always support appropriate options to enable/disable
|
||||
them because the plugin user may have several plots on the same page
|
||||
where only one should use the plugin. In most cases it's probably a
|
||||
good idea if the plugin is turned off rather than on per default, just
|
||||
like most of the powerful features in Flot.
|
||||
|
||||
If the plugin needs options that are specific to each series, like the
|
||||
points or lines options in core Flot, you can put them in "series" in
|
||||
the options object, e.g.
|
||||
|
||||
```js
|
||||
var options = {
|
||||
series: {
|
||||
downsample: {
|
||||
algorithm: null,
|
||||
maxpoints: 1000
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then they will be copied by Flot into each series, providing default
|
||||
values in case none are specified.
|
||||
|
||||
Think hard and long about naming the options. These names are going to
|
||||
be public API, and code is going to depend on them if the plugin is
|
||||
successful.
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
## jquery.flot.absRelTime.js
|
||||
|
||||
This plugin is used to format the time axis in absolute time representation as
|
||||
well as relative time representation.
|
||||
|
||||
It supports the following options:
|
||||
```js
|
||||
xaxis: {
|
||||
timezone: null, // "browser" for local to the client or timezone for timezone-js
|
||||
timeformat: null, // format string to use
|
||||
twelveHourClock: false, // 12 or 24 time in time mode
|
||||
monthNames: null // list of names of months
|
||||
}
|
||||
```
|
||||
|
||||
Depending upon the timeformat axis parameter value, the axis tick formatter will
|
||||
choose between an absolute time representation if the value is '%A' or
|
||||
relative time for timeformat '%r'.
|
||||
|
||||
If the format for an axis is 'time', inside processOptions hook the tickGenerator
|
||||
and tickFormatter of the axis will be overrided with the custom ones used by time axes.
|
||||
|
||||
The formatted values look like in the example bellow:
|
||||
|
||||
|format|value(s)|formatted value(s)|
|
||||
|------|----:|--------------:|
|
||||
|Absolute time|0|12:00:00 AM 1/1/0001|
|
||||
|Absolute time|300|12:05:00 AM 1/1/0001|
|
||||
|Relative Time|0, 300, 600|00:00:00, 00:05:00, 00:10:00|
|
||||
|Relative Time|300, 600, 900|00:00:00, 00:05:00, 00:10:00|
|
||||
|
||||
### Relative time axis
|
||||
A relative time axis will show the time values with respect to the first data sample.
|
||||
Basically, the first datapoint from the points array will be considered time 00:00:00:00.
|
||||
If the difference between two datapoints is small, the milliseconds will apear.
|
||||
Otherwise, the time representation will contain only the hour, minute and second.
|
||||
|
||||
### Absolute time axis
|
||||
The absolute time representation contains, beside the hours, minutes and seconds
|
||||
corresponding to the sample the date and year.
|
||||
The value will be splitted on two rows, where the first row is the time and
|
||||
the the second one the date in gregorian date format.
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
## jquery.flot.browser.js
|
||||
|
||||
This plugin is used to make available some browser-related utility functions.
|
||||
|
||||
### Methods
|
||||
|
||||
|
||||
- getPageXY(e)
|
||||
|
||||
Calculates the pageX and pageY using the screenX, screenY properties of the event
|
||||
and the scrolling of the page. This is needed because the pageX and pageY
|
||||
properties of the event are not correct while running tests in Edge.
|
||||
|
||||
- getPixelRatio(context)
|
||||
|
||||
This function returns the current pixel ratio defined by the product of desktop
|
||||
zoom and page zoom.
|
||||
Additional info: https://www.html5rocks.com/en/tutorials/canvas/hidpi/
|
||||
|
||||
|
||||
- isSafari, isMobileSafari, isOpera, isFirefox, isIE, isEdge, isChrome, isBlink
|
||||
|
||||
This is a collection of functions, used to check if the code is running in a
|
||||
particular browser or Javascript engine.
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
## jquery.flot.canvaswrapper
|
||||
|
||||
This plugin contains the function for creating and manipulating both the canvas
|
||||
layers and svg layers.
|
||||
|
||||
The Canvas object is a wrapper around an HTML5 canvas tag.
|
||||
The constructor Canvas(cls, container) takes as parameters cls,
|
||||
the list of classes to apply to the canvas adnd the containter,
|
||||
element onto which to append the canvas. The canvas operations
|
||||
don't work unless the canvas is attached to the DOM.
|
||||
|
||||
### jquery.canvaswrapper.js API functions
|
||||
|
||||
|
||||
- resize(width, height)
|
||||
|
||||
Resizes the canvas to the given dimensions.
|
||||
The width represents the new width of the canvas, meanwhile the height
|
||||
is the new height of the canvas, both of them in pixels.
|
||||
|
||||
|
||||
- clear()
|
||||
|
||||
Clears the entire canvas area, not including any overlaid HTML text
|
||||
|
||||
|
||||
- render()
|
||||
|
||||
Finishes rendering the canvas, including managing the text overlay.
|
||||
|
||||
|
||||
- getSVGLayer(classes)
|
||||
|
||||
Creates (if necessary) and returns the SVG overlay container.
|
||||
The classes string represents the string of space-separated CSS classes
|
||||
used to uniquely identify the text layer. It return the svg-layer div.
|
||||
|
||||
|
||||
- getTextInfo(layer, text, font, angle, width)
|
||||
|
||||
Creates (if necessary) and returns a text info object.
|
||||
The object looks like this:
|
||||
```js
|
||||
{
|
||||
width //Width of the text's wrapper div.
|
||||
height //Height of the text's wrapper div.
|
||||
element //The HTML div containing the text.
|
||||
positions //Array of positions at which this text is drawn.
|
||||
}
|
||||
```
|
||||
The positions array contains objects that look like this:
|
||||
```js
|
||||
{
|
||||
active //Flag indicating whether the text should be visible.
|
||||
rendered //Flag indicating whether the text is currently visible.
|
||||
element //The HTML div containing the text.
|
||||
text //The actual text and is identical with element[0].textContent.
|
||||
x //X coordinate at which to draw the text.
|
||||
y //Y coordinate at which to draw the text.
|
||||
}
|
||||
```
|
||||
Each position after the first receives a clone of the original element.
|
||||
The idea is that that the width, height, and general 'identity' of the
|
||||
text is constant no matter where it is placed; the placements are a
|
||||
secondary property.
|
||||
|
||||
Canvas maintains a cache of recently-used text info objects; getTextInfo
|
||||
either returns the cached element or creates a new entry.
|
||||
|
||||
The layer parameter is string of space-separated CSS classes uniquely
|
||||
identifying the layer containing this text.
|
||||
Text is the text string to retrieve info for.
|
||||
Font is either a string of space-separated CSS classes or a font-spec object,
|
||||
defining the text's font and style.
|
||||
Angle is the angle at which to rotate the text, in degrees. Angle is currently unused,
|
||||
it will be implemented in the future.
|
||||
The last parameter is the Maximum width of the text before it wraps.
|
||||
The method returns a text info object.
|
||||
|
||||
|
||||
- addText (layer, x, y, text, font, angle, width, halign, valign, transforms)
|
||||
|
||||
Adds a text string to the canvas text overlay.
|
||||
The text isn't drawn immediately; it is marked as rendering, which will
|
||||
result in its addition to the canvas on the next render pass.
|
||||
|
||||
The layer is string of space-separated CSS classes uniquely
|
||||
identifying the layer containing this text.
|
||||
X and Y represents the X and Y coordinate at which to draw the text.
|
||||
and text is the string to draw
|
||||
|
||||
|
||||
- removeText (layer, x, y, text, font, angle)
|
||||
|
||||
The function removes one or more text strings from the canvas text overlay.
|
||||
If no parameters are given, all text within the layer is removed.
|
||||
|
||||
Note that the text is not immediately removed; it is simply marked as
|
||||
inactive, which will result in its removal on the next render pass.
|
||||
This avoids the performance penalty for 'clear and redraw' behavior,
|
||||
where we potentially get rid of all text on a layer, but will likely
|
||||
add back most or all of it later, as when redrawing axes, for example.
|
||||
|
||||
The layer is a string of space-separated CSS classes uniquely
|
||||
identifying the layer containing this text. The following parameter are
|
||||
X and Y coordinate of the text.
|
||||
Text is the string to remove, while the font is either a string of space-separated CSS
|
||||
classes or a font-spec object, defining the text's font and style.
|
||||
|
||||
|
||||
- clearCache()
|
||||
|
||||
Clears the cache used to speed up the text size measurements.
|
||||
As an (unfortunate) side effect all text within the text Layer is removed.
|
||||
Use this function before plot.setupGrid() and plot.draw() if the plot just
|
||||
became visible or the styles changed.
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
## jquery.flot.composeImages.js
|
||||
|
||||
This plugin is used to expose a function used to overlap several canvases and
|
||||
SVGs, for the purpose of creating a snaphot out of them.
|
||||
|
||||
### When composeImages is used:
|
||||
When multiple canvases and SVGs have to be overlapped into a single image
|
||||
and their offset on the page, must be preserved.
|
||||
|
||||
### Where can be used:
|
||||
In creating a downloadable snapshot of the plots, axes, cursors etc of a graph.
|
||||
|
||||
### How it works:
|
||||
The entry point is composeImages function. It expects an array of objects,
|
||||
which should be either canvases or SVGs (or a mix). It does a prevalidation
|
||||
of them, by verifying if they will be usable or not, later in the flow.
|
||||
After selecting only usable sources, it passes them to getGenerateTempImg
|
||||
function, which generates temporary images out of them. This function
|
||||
expects that some of the passed sources (canvas or SVG) may still have
|
||||
problems being converted to an image and makes sure the promises system,
|
||||
used by composeImages function, moves forward. As an example, SVGs with
|
||||
missing information from header or with unsupported content, may lead to
|
||||
failure in generating the temporary image. Temporary images are required
|
||||
mostly on extracting content from SVGs, but this is also where the x/y
|
||||
offsets are extracted for each image which will be added. For SVGs in
|
||||
particular, their CSS rules have to be applied.
|
||||
After all temporary images are generated, they are overlapped using
|
||||
getExecuteImgComposition function. This is where the destination canvas
|
||||
is set to the proper dimensions. It is then output by composeImages.
|
||||
This function returns a promise, which can be used to wait for the whole
|
||||
composition process. It requires to be asynchronous, because this is how
|
||||
temporary images load their data.
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
## jquery.flot.drawSeries.js
|
||||
|
||||
This plugin is used by flot for drawing lines, plots, bars or area.
|
||||
|
||||
### Public methods
|
||||
|
||||
|
||||
- drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
|
||||
|
||||
This function is used for drawing lines or area fill. In case the series has line decimation function
|
||||
attached, before starting to draw, as an optimization the points will first be decimated.
|
||||
|
||||
The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
|
||||
plotHeight are the corresponding parameters of flot used to determine the drawing surface.
|
||||
The function getColorOrGradient is used to compute the fill style of lines and area.
|
||||
|
||||
|
||||
- drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
|
||||
|
||||
This function is used for drawing points using a given symbol. In case the series has points decimation
|
||||
function attached, before starting to draw, as an optimization the points will first be decimated.
|
||||
|
||||
The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
|
||||
plotHeight are the corresponding parameters of flot used to determine the drawing surface.
|
||||
The function drawSymbol is used to compute and draw the symbol chosen for the points.
|
||||
|
||||
|
||||
- drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
|
||||
|
||||
This function is used for drawing series represented as bars. In case the series has decimation
|
||||
function attached, before starting to draw, as an optimization the points will first be decimated.
|
||||
|
||||
The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
|
||||
plotHeight are the corresponding parameters of flot used to determine the drawing surface.
|
||||
The function getColorOrGradient is used to compute the fill style of bars.
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
## jquery.flot.hover.js
|
||||
|
||||
This plugin is used for mouse hover and tap on a point of plot series.
|
||||
It supports the following options:
|
||||
```js
|
||||
grid: {
|
||||
hoverable: false, //to trigger plothover event on mouse hover or tap on a point
|
||||
clickable: false //to trigger plotclick event on mouse hover
|
||||
}
|
||||
```
|
||||
|
||||
It listens to native mouse move event or click, as well as artificial generated
|
||||
tap and touchevent.
|
||||
|
||||
When the mouse is over a point or a tap on a point is performed, that point or
|
||||
the correscponding bar will be highlighted and a "plothover" event will be generated.
|
||||
|
||||
Custom "touchevent" is triggered when any touch interaction is made. Hover plugin
|
||||
handles this events by unhighlighting all of the previously highlighted points and generates
|
||||
"plothovercleanup" event to notify any part that is handling plothover (for exemple to cleanup
|
||||
the tooltip from webcharts).
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
# Interaction
|
||||
|
||||
Flot offers support for both mouse and touch interactions by using [navigate](navigate.md), [touch](../jquery.flot.touch.js)
|
||||
and [touchNavigate](../jquery.flot.touchNavigate.js) plugins.
|
||||
|
||||
|
||||
## navigate plugin
|
||||
This plugin is adding ```zoom```, ```pan```, ```smartPan```, ```recenter``` and ```activate``` capabilities to flot.
|
||||
|
||||
It is listening for the following events:
|
||||
* ```click```
|
||||
* ```dblclick```
|
||||
* ```dragstart```
|
||||
* ```drag```
|
||||
* ```dragend```
|
||||
* ```mousewheel```
|
||||
|
||||
For pan, ```dragstart```, ```drag``` and ```dragend``` events are used which are triggered by the deprecated version 1.6 of ```jquery.event.drag.js```.
|
||||
To perform a zoom operation, the mouse wheel can be used which is done by using ```mousewheel``` event generated by ```jquery.mousewheel.js``` version 3.0.6. These files are included inside lib folder and should be replaced by the npm latest releases of those packages.
|
||||
|
||||
The touch interactions are using only a part of the functionalities:
|
||||
* ```zoom```
|
||||
* ```pan```
|
||||
* ```recenter```
|
||||
* ```activate```
|
||||
|
||||
Any of the functions can be used by the mouse, touch or any other event handler.
|
||||
|
||||
## touch plugin
|
||||
This plugin is responsible only for transforming the low level ```touchstart```, ```touchmove``` and ```touchend``` events into higher level events like:
|
||||
* ```panstart```
|
||||
* ```pandrag```
|
||||
* ```panend```
|
||||
* ```pinchstart```
|
||||
* ```pinchdrag```
|
||||
* ```pinchend```
|
||||
* ```doubletap```
|
||||
* ```longtap```
|
||||
* ```tap```
|
||||
|
||||
This plugin is using the ```bindEvents``` hook of flot to add the event listenters for the low level events and, after interpreting them, will dispach the higher level events to the same event holder.
|
||||
|
||||
It's up to the other plugins to listen for these events and take any actions if necessary. Also they have the possibility to stop the propagation to prevent other plugins for handling the same event.
|
||||
For example, the pan events are normally handled by the ```touchNavigate``` plugin, but in some cases the user might want to interact with other elements like cursors or markes which are on top of the plot.
|
||||
In this case panning is not appropriate so other event handler specific to those elements should intercept these events first and stop their propagation before they get to the ```touchNavigate``` plugin.
|
||||
|
||||
Having a single place where the low level events are interpreted removes the burden of implementing the same logic in multiple places.
|
||||
Some of the things this plugin is doing in order to extract the gestures or the user intentions:
|
||||
* doesn't emit some pan or pinch events unless the user moved its finger(s) a minimum distance
|
||||
* doesn't emit the double tap event unless both taps are near and fast enough
|
||||
* deals with accidental multiple touches when panning
|
||||
|
||||
## touchNavigate plugin
|
||||
Similar to the ```touch``` plugin, the ```touchNavigate``` is using the same ```bindEvents``` hook to add its own listeners to the event holder of the flot, but it will listen for the high level events only emitted by the ```touch``` plugin.
|
||||
|
||||
When a pan or pinch is started the plugin will determine what exactly is being "touched": the entire plot or just one of the axes.
|
||||
After determining the element that the user wants to interact with then this plugin will call one of the ```zoom```, ```pan``` or ```recenter``` of the ```navigate``` plugin.
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
## jquery.flot.logaxis
|
||||
This plugin is used to create logarithmic axis. This includes tick generation,
|
||||
formatters and transformers to and from logarithmic representation.
|
||||
|
||||
### Methods and hooks
|
||||
|
||||
|
||||
- logTickGenerator(plot, axis, noTicks)
|
||||
|
||||
Generates logarithmic ticks, depending on axis range.
|
||||
In case the number of ticks that can be generated is less than the expected noTicks/4,
|
||||
a linear tick generation is used.
|
||||
|
||||
|
||||
- logTickFormatter(value, axis, precision)
|
||||
|
||||
This is the corresponding tickFormatter of the logaxis.
|
||||
For a number greater that 10^6 or smaller than 10^(-3), this will be drawn
|
||||
with e representation
|
||||
|
||||
|
||||
- setDataminRange(plot, axis)
|
||||
|
||||
It is used for clamping the starting point of a logarithmic axis.
|
||||
This will set the axis datamin range to 0.1 or to the first datapoint greater then 0.
|
||||
The function is usefull since the logarithmic representation can not show
|
||||
values less than or equal to 0.
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
## jquery.flot.navigate.js
|
||||
|
||||
This flot plugin is used for adding the ability to pan and zoom the plot.
|
||||
A higher level overview is available at [interactions](interactions.md) documentation.
|
||||
|
||||
The default behaviour is scrollwheel up/down to zoom in, drag
|
||||
to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and
|
||||
plot.pan( offset ) so you easily can add custom controls. It also fires
|
||||
"plotpan" and "plotzoom" events, useful for synchronizing plots.
|
||||
|
||||
The plugin supports these options:
|
||||
```js
|
||||
zoom: {
|
||||
interactive: false,
|
||||
active: false,
|
||||
amount: 1.5, // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
||||
enableTouch: false
|
||||
}
|
||||
|
||||
pan: {
|
||||
interactive: false,
|
||||
active: false,
|
||||
cursor: "move", // CSS mouse cursor value used when dragging, e.g. "pointer"
|
||||
frameRate: 60,
|
||||
mode: "smart", // enable smart pan mode
|
||||
enableTouch: false,
|
||||
touchMode: ""
|
||||
}
|
||||
|
||||
recenter: {
|
||||
interactive: true,
|
||||
enableTouch: true
|
||||
}
|
||||
|
||||
propagateSupportedGesture: false,
|
||||
|
||||
xaxis: {
|
||||
axisZoom: true, //zoom axis when mouse over it is allowed
|
||||
plotZoom: true, //zoom axis is allowed for plot zoom
|
||||
axisPan: true, //pan axis when mouse over it is allowed
|
||||
plotPan: true //pan axis is allowed for plot pan
|
||||
}
|
||||
|
||||
yaxis: {
|
||||
axisZoom: true, //zoom axis when mouse over it is allowed
|
||||
plotZoom: true, //zoom axis is allowed for plot zoom
|
||||
axisPan: true, //pan axis when mouse over it is allowed
|
||||
plotPan: true //pan axis is allowed for plot pan
|
||||
}
|
||||
```
|
||||
**interactive** enables the built-in drag/click behaviour. If you enable
|
||||
interactive for pan, then you'll have a basic plot that supports moving
|
||||
around; the same for zoom and recenter.
|
||||
|
||||
**active** is true after a touch tap on plot. This enables plot navigation.
|
||||
Once activated, zoom and pan cannot be deactivated. When the plot becomes active,
|
||||
"plotactivated" event is triggered.
|
||||
|
||||
**amount** specifies the default amount to zoom in (so 1.5 = 150%) relative to
|
||||
the current viewport.
|
||||
|
||||
**cursor** is a standard CSS mouse cursor string used for visual feedback to the
|
||||
user when dragging.
|
||||
|
||||
**frameRate** specifies the maximum number of times per second the plot will
|
||||
update itself while the user is panning around on it (set to null to disable
|
||||
intermediate pans, the plot will then not update until the mouse button is
|
||||
released).
|
||||
|
||||
**mode** a string specifies the pan mode for mouse interaction. Accepted values:
|
||||
'manual': no pan hint or direction snapping;
|
||||
'smart': The graph shows pan hint bar and the pan movement will snap
|
||||
to one direction when the drag direction is close to it;
|
||||
'smartLock'. The graph shows pan hint bar and the pan movement will always
|
||||
snap to a direction that the drag diorection started with.
|
||||
Default: 'smart'.
|
||||
|
||||
**enableTouch** enables the touch support, for pan (to drag), pinch (to zoom and move),
|
||||
or double tap (to recenter).
|
||||
|
||||
**touchMode** a string specifies the pan mode of touch pan.
|
||||
The accepted values is the sams as **mode** option. Default: 'manual'
|
||||
|
||||
**propagateSupportedGesture** set true to allow the propagation of origin touch events
|
||||
(e.g. 'touchstart') that is already handled for pan or pinch. Default: false.
|
||||
|
||||
Example API usage:
|
||||
```js
|
||||
plot = $.plot(...);
|
||||
|
||||
// zoom default amount in on the pixel ( 10, 20 )
|
||||
plot.zoom({ center: { left: 10, top: 20 } });
|
||||
|
||||
// zoom out again
|
||||
plot.zoomOut({ center: { left: 10, top: 20 } });
|
||||
|
||||
// zoom 200% in on the pixel (10, 20)
|
||||
plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
|
||||
|
||||
// pan 100 pixels to the left and 20 down
|
||||
plot.pan({ left: -100, top: 20 })
|
||||
```
|
||||
|
||||
Here, "center" specifies where the center of the zooming should happen. Note
|
||||
that this is defined in pixel space, not the space of the data points (you can
|
||||
use the p2c helpers on the axes in Flot to help you convert between these).
|
||||
|
||||
**amount** is the amount to zoom the viewport relative to the current range, so
|
||||
1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You
|
||||
can set the default in the options.
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Flot Examples: Axes autoscaling options</title>
|
||||
<link href="../examples.css" rel="stylesheet" type="text/css">
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
var index = 0;
|
||||
function generate(start, end, fn) {
|
||||
var res = [];
|
||||
for (var i = 0; i <= 40; ++i) {
|
||||
var x = start + i / 40 * (end - start);
|
||||
res.push([x, fn(x)]);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
var data = [
|
||||
{ data: generate(index, 2, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:1, lines: { show: true}}
|
||||
];
|
||||
|
||||
var plot = $.plot("#placeholder", data, {
|
||||
xaxes: [
|
||||
{ position: 'bottom' }
|
||||
],
|
||||
yaxes: [
|
||||
{ position: 'left', autoScale: 'none', min: -2.0, max: 2.0 }
|
||||
],
|
||||
zoom: {
|
||||
interactive: true
|
||||
},
|
||||
pan: {
|
||||
interactive: true
|
||||
}
|
||||
});
|
||||
|
||||
function update () {
|
||||
index += 0.01;
|
||||
data = [
|
||||
{ data: generate(index, index + 2, function (x) { return Math.cos(x);}), xaxis: 1, yaxis:1, lines: { show: true}}
|
||||
];
|
||||
plot.setData(data);
|
||||
plot.setupGrid(true);
|
||||
plot.draw();
|
||||
window.requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(update);
|
||||
|
||||
$('#myForm input').on('change', function() {
|
||||
var val = $('input[name="myRadio"]:checked', '#myForm').val()
|
||||
var y = plot.getAxes().yaxis;
|
||||
y.options.min = -2.0;
|
||||
y.options.max = 2.0;
|
||||
y.options.autoScaleMargin = null;
|
||||
y.options.autoScale = "loose";
|
||||
y.options.growOnly = false;
|
||||
|
||||
switch (val) {
|
||||
case '1':
|
||||
y.options.autoScale = "none";
|
||||
break;
|
||||
case '2':
|
||||
y.options.autoScaleMargin = 0.1;
|
||||
y.options.autoScale = "loose";
|
||||
break;
|
||||
case '3':
|
||||
y.options.autoScale = "exact";
|
||||
break;
|
||||
case '4':
|
||||
y.options.autoScaleMargin = 0.1;
|
||||
y.options.autoScale = "loose";
|
||||
y.options.growOnly = true;
|
||||
break;
|
||||
case '5':
|
||||
y.options.autoScale = "exact";
|
||||
y.options.growOnly = true;
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<h2>Axes autoscaling options</h2>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div class="demo-container">
|
||||
<div id="placeholder" class="demo-placeholder"></div>
|
||||
</div>
|
||||
<fieldset id="myForm">
|
||||
<legend>Vertical axis autoscaling options</legend>
|
||||
<input type="radio" name="myRadio" value="1" checked="checked" /> None (min = -2.0, max = 2.0) <br />
|
||||
<input type="radio" name="myRadio" value="2" /> fit loosely <br />
|
||||
<input type="radio" name="myRadio" value="3" /> fit exactly <br />
|
||||
<input type="radio" name="myRadio" value="4" /> grow loosely <br />
|
||||
<input type="radio" name="myRadio" value="5" /> grow exactly <br />
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue