Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

finally get rid of remaining tabs, almost done cleaning up the exampl…

…es and also made the opacity of bars and fills configurable
  • Loading branch information...
commit 9d55735e50051fb9cd75f8cbd45bce37e1741cbe 1 parent e9c516f
@rfunduk authored
View
37 examples/graph-types.html
@@ -1,4 +1,5 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
@@ -20,10 +21,10 @@
var d4 = [];
for( var i = 0; i < 14; i += 0.5 ) { d4.push( [ i, Math.sqrt( i * 10 ) ] ); }
-
+
var d5 = [];
for( var i = 0; i < 14; i += 0.5 ) { d5.push( [ i, Math.sqrt( i ) ] ); }
-
+
var d6 = [];
for( var i = 0; i < 14; i += 0.5 ) {
d6.push( { x: i,
@@ -31,25 +32,19 @@
delta: ( i % 2 + 6 ) } );
}
d6.push( { x: 14, y: 6, delta: 2 } );
-
+
$.plot( $("#placeholder" ),
- [ { data: d1,
- lines: { show: true, fill: true } },
- { data: d2,
- bars: { show: true } },
- { data: d3,
- points: { show: true } },
- { data: d4,
- lines: { show: true } },
- { data: d5,
- lines: { show: false },
- points: { show: true, radius: 7 } },
- { data: d6,
- deltas: { show: true,
- markerWidth: 4,
- color: { above: "black",
- below: "transparent",
- equal: "blue" } } } ]
+ [ { data: d1, lines: { show: true, fill: true } },
+ { data: d2, bars: { show: true, fillOpacity: 0.8 } },
+ { data: d3, points: { show: true } },
+ { data: d4, lines: { show: true } },
+ { data: d5, lines: { show: false }, points: { show: true, radius: 7 } },
+ { data: d6, deltas:
+ { show: true,
+ markerWidth: 4,
+ color: { above: "black",
+ below: "transparent",
+ equal: "blue" } } } ]
);
} );
</script>
View
4 examples/index.html
@@ -1,4 +1,6 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
View
51 examples/mini-graph.html
@@ -1,14 +1,27 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
- <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
- </head>
- <body>
+ <!--[if IE]><script type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
+ <script type="text/javascript" src="../jquery.flot.js"></script>
+ <script type="text/javascript">
+ $(document).ready( function() {
+ $.plot( $('#placeholder'),
+ [ { data: [[1,5],[2,6],[3,3],[4,3],[5,9],[6,1],[7,6]], color: "#34E" } ],
+ { points: { show: true },
+ lines: { show: true },
+ xaxis: { showLabels: false },
+ yaxis: { showLabels: false },
+ grid: { showLines: false, showBorder: false } } );
+ } );
+ </script>
+ </head>
+ <body>
<h1>Flot Examples</h1>
<div id="placeholder" style="padding-right: 10px;float:left;width:100px;height:25px;"></div>
@@ -18,28 +31,8 @@
easily by disabling the axes and grid drawing. This can be handy
in tables or just as a visual cue when you don't need the graph
to be precisely readable. This is also similar in a way to
- '<a title="Seems that Edward Tufte popularized the idea." href="https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1">sparklines</a>'
- but not as <a href="http://ejohn.org/projects/jspark/" title="John Resig's JavaScript Sparklines">lightweight</a>.
+ '<a title="Seems that Edward Tufte popularized the idea." href="https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&amp;topic_id=1">sparklines</a>'
+ but not as <a title="John Resig's JavaScript Sparklines" href="http://ejohn.org/projects/jspark/">lightweight</a>.
</p>
-
-<script id="source" language="javascript" type="text/javascript">
-$(function () {
- var data = [ {
- data: [[1,5], [2,6], [3,3], [4,3], [5,9], [6,1], [7,6]],
- color: "#34E"
- } ];
-
- var options = {
- points: { show: true },
- lines: { show: true },
- xaxis: { showLabels: false },
- yaxis: { showLabels: false },
- grid: { showLines: false, showBorder: false }
- };
-
- $.plot($("#placeholder"), data, options);
-});
-</script>
-
- </body>
+ </body>
</html>
View
156 examples/real-data.html
@@ -1,96 +1,96 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
<html>
- <head>
+ <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
- <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
- <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
- </head>
- <body>
- <h1>Flot Examples</h1>
-
- <div id="placeholder" style="width:600px;height:300px;"></div>
-
- <p>Here is an example with real data: military budgets for
- various countries in constant (2005) million US dollars (source: <a href="http://www.sipri.org/">SIPRI</a>).</p>
-
- <p>Since all data is available client-side, it's pretty easy to
- make the plot interactive. Try turning countries on/off with the
- checkboxes below.</p>
-
- <p id="choices">Show:</p>
-
-<script id="source" language="javascript" type="text/javascript">
-$(function () {
- var datasets = {
- "usa": {
- label: "USA",
+ <!--[if IE]><script type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
+ <script type="text/javascript" src="../jquery.flot.js"></script>
+ <script type="text/javascript">
+ $(document).ready( function() {
+ var datasets = {
+ '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",
+ },
+ '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]]
- },
- "uk": {
- label: "UK",
+ },
+ 'uk': {
+ label: 'UK',
data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]]
- },
- "germany": {
- label: "Germany",
+ },
+ 'germany': {
+ label: 'Germany',
data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]]
- },
- "denmark": {
- label: "Denmark",
+ },
+ 'denmark': {
+ label: 'Denmark',
data: [[1988, 3813], [1989, 3719], [1990, 3722], [1991, 3789], [1992, 3720], [1993, 3730], [1994, 3636], [1995, 3598], [1996, 3610], [1997, 3655], [1998, 3695], [1999, 3673], [2000, 3553], [2001, 3774], [2002, 3728], [2003, 3618], [2004, 3638], [2005, 3467], [2006, 3770]]
- },
- "sweden": {
- label: "Sweden",
+ },
+ 'sweden': {
+ label: 'Sweden',
data: [[1988, 6402], [1989, 6474], [1990, 6605], [1991, 6209], [1992, 6035], [1993, 6020], [1994, 6000], [1995, 6018], [1996, 3958], [1997, 5780], [1998, 5954], [1999, 6178], [2000, 6411], [2001, 5993], [2002, 5833], [2003, 5791], [2004, 5450], [2005, 5521], [2006, 5271]]
- },
- "norway": {
- label: "Norway",
+ },
+ 'norway': {
+ label: 'Norway',
data: [[1988, 4382], [1989, 4498], [1990, 4535], [1991, 4398], [1992, 4766], [1993, 4441], [1994, 4670], [1995, 4217], [1996, 4275], [1997, 4203], [1998, 4482], [1999, 4506], [2000, 4358], [2001, 4385], [2002, 5269], [2003, 5066], [2004, 5194], [2005, 4887], [2006, 4891]]
- }
- };
+ }
+ };
+
+ // hard-code color indices to prevent them from shifting as
+ // countries are turned on/off
+ var i = 0;
+ $.each( datasets, function( key, val ) { val.color = i++; } );
- // hard-code color indices to prevent them from shifting as
- // countries are turned on/off
- var i = 0;
- $.each(datasets, function(key, val) {
- val.color = i;
- ++i;
- });
-
- // insert checkboxes
- var choiceContainer = $("#choices");
- $.each(datasets, function(key, val) {
- choiceContainer.append('<br/><input type="checkbox" name="' + key +
- '" checked="checked" >' + val.label + '</input>');
- });
- choiceContainer.find("input").click(plotAccordingToChoices);
+ // insert checkboxes
+ var choiceContainer = $(document).append( '<p id="choices">Show:</p>' );
+ $.each( datasets, function( key, val ) {
+ choiceContainer.append( '<br/><input type="checkbox" name="' + key +
+ '" checked="checked" >' + val.label + '</input>' );
+ } );
+ choiceContainer.find('input').click( plotAccordingToChoices );
-
- function plotAccordingToChoices() {
- var data = [];
+ function plotAccordingToChoices() {
+ var data = [];
- choiceContainer.find("input:checked").each(function () {
- var key = $(this).attr("name");
- if (key && datasets[key])
- data.push(datasets[key]);
- });
+ choiceContainer.find('input:checked').each( function() {
+ var key = $(this).attr( 'name' );
+ if( key && datasets[key] ) data.push( datasets[key] );
+ } );
+
+ if( data.length > 0 ) {
+ $.plot( $('#placeholder'), data, {
+ yaxis: { min: 0, label: 'Budget' },
+ xaxis: { tickDecimals: 0, label: 'Year' }
+ } );
+ }
+ }
- if (data.length > 0)
- $.plot($("#placeholder"), data, {
- yaxis: { min: 0, label: "Budget" },
- xaxis: { tickDecimals: 0, label: "Year" }
- });
- }
+ // do initial drawing (all choices selected)
+ plotAccordingToChoices();
+ } );
+ </script>
+ </head>
+ <body>
+ <h1>Flot Examples</h1>
+
+ <div id="placeholder" style="width:600px;height:300px;"></div>
- plotAccordingToChoices();
-});
-</script>
+ <p>
+ Here is an example with real data: military budgets for
+ various countries in constant (2005) million US dollars
+ (source: <a href="http://www.sipri.org/">SIPRI</a>).
+ </p>
- </body>
+ <p>
+ Since all data is available client-side, it's pretty easy to
+ make the plot interactive. Try turning countries on/off with the
+ checkboxes below.
+ </p>
+ </body>
</html>
View
170 examples/selection.html
@@ -1,107 +1,99 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
<html>
- <head>
+ <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
- <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
- </head>
- <body>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
+ <script type="text/javascript" src="../jquery.flot.js"></script>
+ <script type="text/javascript">
+ $(document).ready( function() {
+ var data = [
+ { 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",
+ 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",
+ data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]] },
+ { label: "Germany",
+ data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]] },
+ { label: "Denmark",
+ data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]] },
+ { label: "Sweden",
+ data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]] },
+ { label: "Norway",
+ data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]] }
+ ];
+
+ var options = {
+ lines: { show: true },
+ points: { show: true },
+ legend: { noColumns: 2 },
+ xaxis: { tickDecimals: 0 },
+ yaxis: { min: 0 },
+ selection: { mode: 'x', snapToTicks: true }
+ };
+
+ var placeholder = $('#placeholder');
+
+ placeholder.bind( 'plotselected', function( event, area ) {
+ var zoom = $('#zoom').attr( 'checked' );
+
+ $('#selection').text( area.x1.toFixed( 1 ) + ' to ' + area.x2.toFixed( 1 ) );
+
+ if( zoom ) {
+ plot = $.plot( placeholder, data,
+ $.extend( true, {}, options, {
+ xaxis: { min: area.x1, max: area.x2 }
+ } ) );
+ }
+ } );
+
+ var plot = $.plot( placeholder, data, options );
+
+ $('#clearSelection').click( function() { plot.clearSelection(); } );
+ $('#setSelection').click( function() { plot.setSelection( { x1: 1994, x2: 1995 } ); } );
+ });
+ </script>
+ </head>
+ <body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px"></div>
- <p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>
+ <p>
+ 1000 kg. CO<sub>2</sub> emissions per year per capita for various countries
+ (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).
+ </p>
- <p>Flot supports selections. You can enable
- rectangular selection
- or one-dimensional selection if the user should only be able to
- select on one axis. Try left-clicking and drag on the plot above
- where selection on the x axis is enabled.</p>
+ <p>
+ Flot supports selections. You can enable rectangular selection or one-dimensional
+ selection if the user should only be able to select on one axis. Try left-clicking
+ and drag on the plot above where selection on the x axis is enabled.
+ </p>
<p>You selected: <span id="selection"></span></p>
- <p>The plot command returns a Plot object you can use to control
- the selection. Try clicking the buttons below.</p>
+ <p>
+ The plot command returns a Plot object you can use to control
+ the selection. Try clicking the buttons below.
+ </p>
- <p><input id="clearSelection" type="button" value="Clear selection" />
- <input id="setSelection" type="button" value="Select year 1994" /></p>
+ <p>
+ <input id="clearSelection" type="button" value="Clear selection" />
+ <input id="setSelection" type="button" value="Select year 1994" />
+ </p>
- <p>Selections are really useful for zooming. Just replot the
- chart with min and max values for the axes set to the values
- in the "selected" event triggered. Try enabling the checkbox
- below and select a region again.</p>
+ <p>
+ Selections are really useful for zooming. Just re-plot the
+ chart with min and max values for the axes set to the values
+ in the "selected" event triggered. Try enabling the checkbox
+ below and select a region again.
+ </p>
<p><input id="zoom" type="checkbox">Zoom to selection.</input></p>
-
-<script id="source" language="javascript" type="text/javascript">
-$(function () {
- var data = [
- {
- 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",
- 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",
- data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]
- },
- {
- label: "Germany",
- data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]]
- },
- {
- label: "Denmark",
- data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]]
- },
- {
- label: "Sweden",
- data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]
- },
- {
- label: "Norway",
- data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]
- }
- ];
-
- var options = {
- lines: { show: true },
- points: { show: true },
- legend: { noColumns: 2 },
- xaxis: { tickDecimals: 0 },
- yaxis: { min: 0 },
- selection: { mode: "x", snapToTicks: true }
- };
-
- var placeholder = $("#placeholder");
-
- placeholder.bind("selected", function (event, area) {
- $("#selection").text(area.x1.toFixed(1) + " to " + area.x2.toFixed(1));
-
- var zoom = $("#zoom").attr("checked");
- if (zoom)
- plot = $.plot(placeholder, data,
- $.extend(true, {}, options, {
- xaxis: { min: area.x1, max: area.x2 }
- }));
- });
-
- var plot = $.plot(placeholder, data, options);
-
- $("#clearSelection").click(function () {
- plot.clearSelection();
- });
-
- $("#setSelection").click(function () {
- plot.setSelection({ x1: 1994, x2: 1995 });
- });
-});
-</script>
-
- </body>
+ </body>
</html>
View
106 examples/setting-options.html
@@ -1,70 +1,68 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
<html>
- <head>
+ <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
- <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
- </head>
- <body>
- <h1>Flot Examples</h1>
-
- <div id="placeholder" style="width:600px;height:300px"></div>
-
- <p>There are plenty of options you can set to control the precise
- looks of your plot. You can control the axes, the legend, the
- default graph type, the look of grid, etc.</p>
-
- <p>The idea is that Flot goes to great lengths to provide <b>sensible
- defaults</b> which you can then customize as needed for your
- particular application. If you've found a use case where the
- defaults can be improved, please don't hesitate to give your
- feedback.</p>
-
-<script id="source" language="javascript" type="text/javascript">
-$(function () {
- var d1 = [];
- for (var i = 0; i < Math.PI * 2; i += 0.25)
- d1.push([i, Math.sin(i)]);
-
- var d2 = [];
- for (var i = 0; i < Math.PI * 2; i += 0.25)
- d2.push([i, Math.cos(i)]);
-
- var d3 = [];
- for (var i = 0; i < Math.PI * 2; i += 0.1)
- d3.push([i, Math.tan(i)]);
-
- $.plot($("#placeholder"), [
- { label: "sin(x)", data: d1},
- { label: "cos(x)", data: d2},
- { label: "tan(x)", data: d3}
- ], {
- lines: { show: true },
- points: { show: true },
- xaxis: {
- ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
- },
- yaxis: {
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
+ <script type="text/javascript" src="../jquery.flot.js"></script>
+ <script type="text/javascript">
+ $(document).ready( function() {
+ var d1 = [],
+ d2 = [],
+ d3 = [];
+ for( var i = 0; i < Math.PI * 2; i += 0.25 ) d1.push( [ i, Math.sin( i ) ] );
+ for( var i = 0; i < Math.PI * 2; i += 0.25 ) d2.push( [ i, Math.cos( i ) ] );
+ for( var i = 0; i < Math.PI * 2; i += 0.1 ) d3.push( [ i, Math.tan( i ) ] );
+
+ $.plot( $('#placeholder'), [
+ { label: 'sin(x)', data: d1 },
+ { label: 'cos(x)', data: d2 },
+ { label: 'tan(x)', data: d3 }
+ ], {
+ lines: { show: true },
+ points: { show: true },
+ xaxis: {
+ ticks: [ 0, [ Math.PI/2, "\u03c0/2" ], [ Math.PI, "\u03c0" ],
+ [ Math.PI * 3/2, "3\u03c0/2" ], [ Math.PI * 2, "2\u03c0" ] ]
+ },
+ yaxis: {
ticks: 10,
min: -2,
max: 2
- },
- grid: {
+ },
+ grid: {
showLines: false,
markers: [ { value: 0,
width: 3,
color: "#BBB",
axis: 'x' } ],
backgroundColor: "#CCC"
- },
- title: "Graph Settings Demo",
- titleColor: "purple"
- });
-});
-</script>
+ }
+ } );
+ } );
+ </script>
+ </head>
+ <body>
+ <h1>Flot Examples</h1>
+
+ <div id="placeholder" style="width:600px;height:300px"></div>
+
+ <p>
+ There are plenty of options you can set to control the precise
+ looks of your plot. You can control the axes, the legend, the
+ default graph type, the look of grid, etc.
+ </p>
- </body>
+ <p>
+ The idea is that Flot goes to great lengths to provide
+ <b>sensible defaults</b> which you can then customize as needed for your
+ particular application. If you've found a use case where the
+ defaults can be improved, please don't hesitate to give your
+ feedback.
+ </p>
+ </body>
</html>
View
13 jquery.flot.js
@@ -63,6 +63,7 @@
lineWidth: 2, // in pixels
barWidth: 1, // in units of the x axis
fill: true,
+ fillOpacity: 0.4,
fillColor: null
},
deltas: {
@@ -247,7 +248,7 @@
}
else if( typeof s.color == "number" ) {
s.color = colors[s.color].toString();
- }
+ }
// copy the rest
s.lines = $.extend(true, {}, options.lines, s.lines);
@@ -275,7 +276,7 @@
// convert to number
if( x == null || y == null ||
- isNaN( x = +x ) || isNaN( y = +y ) ) {
+ isNaN( x = +x ) || isNaN( y = +y ) ) {
data[j] = null; // mark this point as invalid
continue;
}
@@ -321,7 +322,7 @@
eventHolder.mousedown( onMouseDown ).mousemove( onMouseMove );
}
- if( options.grid.hoverable ) {
+ if( options.grid.hoverable ) {
eventHolder.mousemove( onMouseMove );
}
@@ -1502,18 +1503,18 @@
}
function setFillStyle(obj, seriesColor) {
- var fill = obj.fill;
+ var fill = obj.fill,
+ opacity = obj.fillOpacity;
if (fill) {
if (obj.fillColor)
ctx.fillStyle = obj.fillColor;
else {
var c = parseColor(seriesColor);
- c.a = typeof fill == "number" ? fill : 0.4;
+ c.a = typeof fill == "number" ? fill : ( opacity ? opacity : 0.4 );
c.normalize();
ctx.fillStyle = c.toString();
}
}
-
}
function drawMarkers() {
Please sign in to comment.
Something went wrong with that request. Please try again.