<p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <ahref="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below.</p>
<p>The data is fetched over HTTP, in this case directly from text
files. Usually the URL would point to some web server handler
(e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that
extracts it from a database and serializes it to JSON.</p>
button.siblings("span").text("Fetched "+series.label+", first point: "+firstcoordinate);
// Push the new data onto our existing data array
// let's add it to our current data
if(!alreadyFetched[series.label]){
alreadyFetched[series.label]=true;
data.push(series);
}
// and plot all we got
$.plot(placeholder,data,options);
$.plot("#placeholder",data,options);
}
$.ajax({
url:dataurl,
type:'GET',
dataType:'json',
type:"GET",
dataType:"json",
success:onDataReceived
});
});
// Initiate a recurring data update
$("button.dataUpdate").click(function(){
// initiate a recurring data update
$("input.dataUpdate").click(function(){
// reset data
data=[];
alreadyFetched={};
$.plot(placeholder,data,options);
$.plot("#placeholder",data,options);
variteration=0;
functionfetchData(){
++iteration;
functiononDataReceived(series){
// we get all the data in one go, if we only got partial
// data, we could merge it with what we already got
data=[series];
$.plot($("#placeholder"),data,options);
// Load all the data in one pass; if we only got partial
// data we could merge it with what we already have.
data=[series];
$.plot("#placeholder",data,options);
}
// Normally we call the same URL - a script connected to a
// database - but in this case we only have static example
// files, so we need to modify the URL.
$.ajax({
// usually, we'll just call the same URL, a script
// connected to a database, but in this case we only
// have static example files so we need to modify the
// URL
url:"data-eu-gdp-growth-"+iteration+".json",
type:'GET',
dataType:'json',
type:"GET",
dataType:"json",
success:onDataReceived
});
if(iteration<5)
if(iteration<5){
setTimeout(fetchData,1000);
else{
}else{
data=[];
alreadyFetched={};
}
...
...
@@ -136,8 +111,55 @@ $(function () {
setTimeout(fetchData,1000);
});
});
</script>
});
</script>
</head>
<body>
<divid="header">
<h2>AJAX</h2>
</div>
<divid="content">
<divclass="demo-container">
<divid="placeholder"></div>
</div>
<p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <ahref="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below:</p>
<p>The data is fetched over HTTP, in this case directly from text files. Usually the URL would point to some web server handler (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that extracts it from a database and serializes it to JSON.</p>
// 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
varctx=plot.getCanvas().getContext("2d");
ctx.beginPath();
o.left+=4;
...
...
@@ -68,8 +55,29 @@ $(function () {
ctx.lineTo(o.left,o.top);
ctx.fillStyle="#000";
ctx.fill();
});
</script>
});
</script>
</head>
<body>
<divid="header">
<h2>Adding Annotations</h2>
</div>
<divid="content">
<divclass="demo-container">
<divid="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>
$("#click").text("You clicked the "+axis.direction+axis.n+"axis!")
});
});
});
</script>
</body>
});
</script>
</head>
<body>
<divid="header">
<h2>Interacting with axes</h2>
</div>
<divid="content">
<divclass="demo-container">
<divid="placeholder"></div>
</div>
<p>With multiple axes, you sometimes need to interact with them. A simple way to do this is to draw the plot, deduce the axis placements and insert a couple of divs on top to catch events.</p>
<p>Multiple axis support showing the raw oil price in US $/barrel of crude oil vs. the exchange rate from US $ to €.</p>
<p>As illustrated, you can put in multiple axes if you need to. For each data series, simply specify the axis number. In the options, you can then configure where you want the extra axes to appear.</p>
<p>Position axis <button>left</button> or <button>right</button>.</p>
<p>The timestamps must be specified as Javascript timestamps, as milliseconds since January 1, 1970 00:00. This is like Unix timestamps, but in milliseconds instead of seconds (remember to multiply with 1000!).</p>
<p>As an extra caveat, the timestamps are interpreted according to UTC and, by default, displayed as such. You can set the axis "timezone" option to "browser" to display the timestamps in the user's timezone, or, if you use timezoneJS, you can specify a time zone.</p>
<p>There are plenty of options you can set to control the precise looks of your plot. You can control the ticks on the axes, the legend, the graph type, etc.</p>
<p>Flot goes to great lengths to provide sensible defaults so that you don't have to customize much for a good-looking result.</p>
<p>You don't have to do much to get an attractive plot. Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.</p>
<p>The Cat's Eye Nebula (<ahref="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>
<p>With the image plugin, you can plot static images against a set of axes. This is for useful for adding ticks to complex prerendered visualizations. Instead of inputting data points, you specify the images and where their two opposite corners are supposed to be in plot space.</p>
<p>Images represent a little further complication because you need to make sure they are loaded before you can use them (Flot skips incomplete images). The plugin comes with a couple of helpers for doing that.</p>
<p>With the navigate plugin it is easy to add panning and zooming. Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>
<p>The plugin fires events (useful for synchronizing several plots) and adds a couple of public methods so you can easily build a little user interface around it, like the little buttons at the top right in the plot.</p>
<p>Height in centimeters of individuals from the US (2003-2006) as function of age in years (source: <ahref="http://www.cdc.gov/nchs/data/nhsr/nhsr010.pdf">CDC</a>). The 15%-85%, 25%-75% and 50% percentiles are indicated.</p>
<p>For each point of a filled curve, you can specify an arbitrary bottom. As this example illustrates, this can be useful for plotting percentiles. If you have the data sets available without appropriate fill bottoms, you can use the fillbetween plugin to compute the data point bottoms automatically.</p>
// the plugin includes a jQuery plugin for adding resize events to
// any element, let's just add a callback so we can display the
// placeholder size
// The plugin includes a jQuery plugin for adding resize events to any
// element. Add a callback so we can display the placeholder size.
placeholder.resize(function(){
$(".message").text("Placeholder is now "
+$(this).width()+"x"+$(this).height()
+" pixels");
});
});
</script>
});
</script>
</head>
<body>
<divid="header">
<h2>Resizing</h2>
</div>
<divid="content"style="width:100%;">
<divclass="demo-container"style="width:100%;">
<divid="placeholder"></div>
</div>
<pclass="message"></p>
<p>Sometimes it makes more sense to just let the plot take up the available space. In that case, we need to redraw the plot each time the placeholder changes its size. If you include the resize plugin, this is handled automatically.</p>
<!--<p>Drag the handles at the bottom and right of the plot to resize it.</p>-->
<p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <ahref="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>
<p>Flot supports selections through the selection plugin.
You can enable rectangular selection
or one-dimensional selection if the user should only be able to
select on one axis. Try left-click and drag on the plot above
where selection on the x axis is enabled.</p>
<p>You selected: <spanid="selection"></span></p>
<p>The plot command returns a plot object you can use to control
<p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <ahref="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>
<p>Flot supports selections through the selection plugin. You can enable rectangular selection or one-dimensional selection if the user should only be able to select on one axis. Try left-click and drag on the plot above where selection on the x axis is enabled.</p>
<p>You selected: <spanid="selection"></span></p>
<p>The plot command returns a plot object you can use to control the selection. Click the buttons below.</p>
<buttonid="setSelection">Select year 1994</button>
</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 "plotselected" event triggered. Enable the checkbox below and select a region again.</p>
<p><label><inputid="zoom"type="checkbox"></input>Zoom to selection.</label></p>
$("#description").text("The default pie chart with no options set.");
$.plot("#placeholder",data,{
series:{
pie:{
show:true
...
...
@@ -51,9 +122,23 @@ $(function () {
}
});
// GRAPH 1
$.plot($("#graph1"),data,
{
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true",
" }",
" }",
"});"
]);
});
$("#example-2").click(function(){
$("#title").text("Default without legend");
$("#description").text("The default pie chart when the legend is disabled. Since the labels would normally be outside the container, the chart is resized to fit.");
$.plot("#placeholder",data,{
series:{
pie:{
show:true
...
...
@@ -64,9 +149,26 @@ $(function () {
}
});
// GRAPH 2
$.plot($("#graph2"),data,
{
setCode([
"$.plot('#placeholder', data, {",
" series: {",
" pie: {",
" show: true",
" }",
" },",
" legend: {",
" show: false",
" }",
"});"
]);
});
$("#example-3").click(function(){
$("#title").text("Custom Label Formatter");
$("#description").text("Added a semi-transparent background to the labels and a custom labelFormatter function.");
<li>Tested in Firefox (3.0.10, 3.5b4), Internet Explorer (6.0.2900, 7.0.5730, 8.0.6001), Chrome (1.0.154), Opera (9.64), and Safari (3.1.1, 4 beta 5528.16).
<p>This example shows military budgets for various countries in constant (2005) million US dollars (source: <ahref="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 and off with the checkboxes next to the plot.</p>
<p>With the stack plugin, you can have Flot stack the series. This is useful if you wish to display both a total and the constituents it is made of. The only requirement is that you provide the input sorted on x.</p>
<p>Points can be marked in several ways, with circles being the built-in default. For other point types, you can define a callback function to draw the symbol. Some common symbols are available in the symbol plugin.</p>
vart=parseFloat($(this).val().replace('Threshold at ',''));
vart=parseFloat($(this).text().replace("Threshold at ",""));
plotWithOptions(t);
});
});
</script>
});
</script>
</head>
<body>
<divid="header">
<h2>Thresholds</h2>
</div>
<divid="content">
<divclass="demo-container">
<divid="placeholder"></div>
</div>
<p>With the threshold plugin, you can apply a specific color to the part of a data series below a threshold. This is can be useful for highlighting negative values, e.g. when displaying net results or what's in stock.</p>
<p>You can add crosshairs that'll track the mouse position, either on both axes or as here on only one.</p>
<p>If you combine it with listening on hover events, you can use it to track the intersection on the curves by interpolating the data points (look at the legend).</p>
<p>This plot shows visitors per day to the Flot homepage, with weekends colored.</p>
<p>The smaller plot is linked to the main plot, so it acts as an overview. Try dragging a selection on either plot, and watch the behavior of the other.</p>
<p>Selection support makes it easy to construct flexible zooming schemes. With a few lines of code, the small overview plot to the right has been connected to the large plot. Try selecting a rectangle on either of them.</p>
