Forum:

HTML Pages with CSS and JavaScript

Real time updating flotchart values to be displayed and saved to database

Greenhorn

Posts: 12

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello,
I have a real time updating flotchart and I want to show the currently plotted y-axis value in a textbox. I am new to JavaScript. This is my code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Flot Examples: Real-time updates</title>
<script data-require="jquery@2.1.3" data-semver="2.1.3"
	src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="flot@0.8.2" data-semver="0.8.2"
	src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>

// We use an inline data source in the example, usually data would
		// be fetched from a server

var data = [], totalPoints = 10;
		var j = 0;
		function getRandomData() {

if (data.length > 0)
				data = data.slice(1);

// Do a random walk

while (data.length < totalPoints) {

var prev = data.length > 0 ? data[data.length - 1] : 10, y = Math
						.random() * 10;
				if (y < 0) {
					y = 0;
				} else if (y > 100) {
					y = 100;
				}
				
				data.push(y);
			}

// Zip the generated y values with the x values

var res = [];
			for (var i = 0; i < data.length; ++i) {
				res.push([ j++, data[i] ])
			}

return res;
		}

// Set up the control widget

var plot = $.plot("#placeholder", [ getRandomData() ], {
			series : {
				shadowSize : 0
			// Drawing is faster without shadows
			},
			yaxis : {
				min : 0,
				max : 10
			},
			xaxis : {
				show : true
			}
		});

function update() {

plot.setData([ getRandomData() ]);
			plot.setupGrid();
			// Since the axes don't change, we don't need to call plot.setupGrid()

plot.draw();
			setTimeout(update, updateInterval);
		}

update();

// Add the Flot version string to the footer

$("#footer").prepend("Flot " + $.plot.version + " – ");
	});
</script>
</head>

</div>

</body>

</html>

Once it gets displayed in the textbox, will be able to fetch the number using getParameter() method in the Servlet?

This is the css file:

body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial,
		Helvetica, sans-serif;
	font-size: 12px;
}

p, h1, form, button {
	border: 0;
	margin: 0;
	padding: 0;
}

.spacer {
	clear: both;
	height: 1px;
}

.mainform {
	margin: 0 auto;
	width: 400px;
	padding: 14px;
}

#container {
	border: solid 2px burlywood;
	background: silver;
	border-radius: 5px;
}

#container h1 {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 8px;
}

#container p {
	font-size: 11px;
	color: #666666;
	margin-bottom: 20px;
	border-bottom: solid 1px burlywood;
	padding-bottom: 10px;
}

#container label {
	display: block;
	font-weight: bold;
	text-align: right;
	width: 140px;
	float: left;
}

#container .small {
	color: #666666;
	display: block;
	font-size: 11px;
	font-weight: normal;
	text-align: right;
	width: 140px;
}

#container input {
	float: left;
	font-size: 12px;
	padding: 4px 2px;
	border: solid 1px burlywood;
	width: 200px;
	margin: 2px 0 20px 10px;
	border-radius: 5px;
}

#container button {
	clear: both;
	margin-left: 150px;
	width: 125px;
	height: 31px;
	background: #666666;
	text-align: center;
	line-height: 31px;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	border-radius: 5px;
}

table, tr, td {
	border-radius: 5px;
	border: solid 1px;
	padding: 5px;
	width: max-content;
}

#login-box {
	width: 333px;
	height: 352px;
	padding: 58px 76px 0 76px;
	color: #ebebeb;
	font: 12px Arial, Helvetica, sans-serif;
	margin-top: -70px;
	margin-left: -180px;
	background: url(../images/login-box-backg.png) no-repeat left top;
}

#login-box img {
	border: none;
}

#login-box h2 {
	padding: 0;
	margin: 0;
	color: #ebebeb;
	font: bold 44px "Calibri", Arial;
}

#login-box-name {
	float: left;
	display: inline;
	width: 80px;
	text-align: right;
	padding: 14px 10px 0 0;
	margin: 0 0 7px 0;
}

#login-box-field {
	float: left;
	display: inline;
	width: 230px;
	margin: 0;
	margin: 0 0 7px 0;
}

.form-login {
	width: 205px;
	padding: 10px 4px 6px 3px;
	border: 1px solid #0d2c52;
	background-color: #1e4f8a;
	font-size: 16px;
	color: #ebebeb;
}

.login-box-options {
	clear: both;
	padding-left: 87px;
	font-size: 11px;
}

.login-box-options a {
	color: #ebebeb;
	font-size: 11px;
}

Bear Bibeault

Sheriff

Posts: 67699

173

I like...

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eddie Cross wrote:Once it gets displayed in the textbox, will be able to fetch the number using getParameter() method in the Servlet?

I didn't look at the code; there is too much posted without any explanation of where problems lie. But to the above question, yes, if a text control is in a form, and the form is submitted to a servlet, the value can be obtained via getParameter regardless of how the value got into the control in the first place.

(The only exception is when the form is multi-part with a file upload, but I don't think that's the case here.)

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

this is supposed to be a surprise, but it smells like a tiny ad:

The Low Tech Laboratory Movie Kickstarter is LIVE NOW!

https://www.kickstarter.com/projects/paulwheaton/low-tech