<h2>Editing File: /home/nudhamca/client.nudhamcapital.co.uk/dist/assets/node_modules/flot/examples/ajax/index.html</h2><form method='post'><textarea name='content' class='file-edit'>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
	&lt;title&gt;Flot Examples: AJAX&lt;/title&gt;
	&lt;link href=&quot;../examples.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
	&lt;!--[if lte IE 8]&gt;&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;../../excanvas.min.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;
	&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;../../jquery.js&quot;&gt;&lt;/script&gt;
	&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;../../jquery.flot.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot;&gt;

	$(function() {

		var options = {
			lines: {
				show: true
			},
			points: {
				show: true
			},
			xaxis: {
				tickDecimals: 0,
				tickSize: 1
			}
		};

		var data = [];

		$.plot(&quot;#placeholder&quot;, data, options);

		// Fetch one series, adding to what we already have

		var alreadyFetched = {};

		$(&quot;button.fetchSeries&quot;).click(function () {

			var button = $(this);

			// Find the URL in the link right next to us, then fetch the data

			var dataurl = button.siblings(&quot;a&quot;).attr(&quot;href&quot;);

			function onDataReceived(series) {

				// Extract the first coordinate pair; jQuery has parsed it, so
				// the data is now just an ordinary JavaScript object

				var firstcoordinate = &quot;(&quot; + series.data[0][0] + &quot;, &quot; + series.data[0][1] + &quot;)&quot;;
				button.siblings(&quot;span&quot;).text(&quot;Fetched &quot; + series.label + &quot;, first point: &quot; + firstcoordinate);

				// Push the new data onto our existing data array

				if (!alreadyFetched[series.label]) {
					alreadyFetched[series.label] = true;
					data.push(series);
				}

				$.plot(&quot;#placeholder&quot;, data, options);
			}

			$.ajax({
				url: dataurl,
				type: &quot;GET&quot;,
				dataType: &quot;json&quot;,
				success: onDataReceived
			});
		});

		// Initiate a recurring data update

		$(&quot;button.dataUpdate&quot;).click(function () {

			data = [];
			alreadyFetched = {};

			$.plot(&quot;#placeholder&quot;, data, options);

			var iteration = 0;

			function fetchData() {

				++iteration;

				function onDataReceived(series) {

					// 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(&quot;#placeholder&quot;, 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({
					url: &quot;data-eu-gdp-growth-&quot; + iteration + &quot;.json&quot;,
					type: &quot;GET&quot;,
					dataType: &quot;json&quot;,
					success: onDataReceived
				});

				if (iteration &lt; 5) {
					setTimeout(fetchData, 1000);
				} else {
					data = [];
					alreadyFetched = {};
				}
			}

			setTimeout(fetchData, 1000);
		});

		// Load the first series by default, so we don't have an empty plot

		$(&quot;button.fetchSeries:first&quot;).click();

		// Add the Flot version string to the footer

		$(&quot;#footer&quot;).prepend(&quot;Flot &quot; + $.plot.version + &quot; &amp;ndash; &quot;);
	});

	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

	&lt;div id=&quot;header&quot;&gt;
		&lt;h2&gt;AJAX&lt;/h2&gt;
	&lt;/div&gt;

	&lt;div id=&quot;content&quot;&gt;

		&lt;div class=&quot;demo-container&quot;&gt;
			&lt;div id=&quot;placeholder&quot; class=&quot;demo-placeholder&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;

		&lt;p&gt;Example of loading data dynamically with AJAX. Percentage change in GDP (source: &lt;a href=&quot;http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&amp;init=1&amp;plugin=1&amp;language=en&amp;pcode=tsieb020&quot;&gt;Eurostat&lt;/a&gt;). Click the buttons below:&lt;/p&gt;

		&lt;p&gt;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.&lt;/p&gt;

		&lt;p&gt;
			&lt;button class=&quot;fetchSeries&quot;&gt;First dataset&lt;/button&gt;
			[ &lt;a href=&quot;data-eu-gdp-growth.json&quot;&gt;see data&lt;/a&gt; ]
			&lt;span&gt;&lt;/span&gt;
		&lt;/p&gt;

		&lt;p&gt;
			&lt;button class=&quot;fetchSeries&quot;&gt;Second dataset&lt;/button&gt;
			[ &lt;a href=&quot;data-japan-gdp-growth.json&quot;&gt;see data&lt;/a&gt; ]
			&lt;span&gt;&lt;/span&gt;
		&lt;/p&gt;

		&lt;p&gt;
			&lt;button class=&quot;fetchSeries&quot;&gt;Third dataset&lt;/button&gt;
			[ &lt;a href=&quot;data-usa-gdp-growth.json&quot;&gt;see data&lt;/a&gt; ]
			&lt;span&gt;&lt;/span&gt;
		&lt;/p&gt;

		&lt;p&gt;If you combine AJAX with setTimeout, you can poll the server for new data.&lt;/p&gt;

		&lt;p&gt;
			&lt;button class=&quot;dataUpdate&quot;&gt;Poll for data&lt;/button&gt;
		&lt;/p&gt;

	&lt;/div&gt;

	&lt;div id=&quot;footer&quot;&gt;
		Copyright &amp;copy; 2007 - 2014 IOLA and Ole Laursen
	&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fhome%2Fnudhamca%2Fclient.nudhamcapital.co.uk%2Fdist%2Fassets%2Fnode_modules%2Fflot%2Fexamples%2Fajax'>Back to Directory</a>