Jump to content
Sign in to follow this  
conradin

flot + jquery

Recommended Posts

Hi all Im trying to load a URL into a textbox that when a user clicks submit or something like that, the url typed then loads the corresponding data into flot. The problem is I have no idea how to get it to work. Can someone walk me through this?<!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="flot/excanvas.min.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="flot/jquery.js"></script> <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script> </head> <body> <div id="placeholder" style="width:600px;height:300px;"></div><p><form>File name: <input id="cat" type="text" name="FileName" value="http://141.114.193.254/DataFiles/loveje/inc3.json" /><br /> <input class="fetchSeries" type="button" value="Submit dataset"> - <a href="">data</a> -</form> <script id="source" language="javascript" type="text/javascript">$(function () { var options = {}; var data = []; var placeholder = $("#placeholder"); $.plot(placeholder, data, options); // fetch one series, adding to what we got var alreadyFetched = {}; $("input.fetchSeries").click(function () { var button = $(this); // find the URL in the link right next to us var dataurl = button.siblings('a').attr('href'); // then fetch the data with jQuery function onDataReceived(series) { // extract the first coordinate pair so you can see that // data is now an ordinary Javascript object var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')'; button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate); // 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); } $.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: "cat.value", method: 'POST', dataType: 'json', success: onDataReceived }); }); });</script> </body></html>

Share this post


Link to post
Share on other sites

Doing this:url: "cat.value",is going to set the URL to the string "cat.value". You need to get the value of the element with the ID "cat", you can either use document.getElementById or use the selector with jquery. If you're having other problems, check for Javascript errors.

Share this post


Link to post
Share on other sites
Doing this:url: "cat.value",is going to set the URL to the string "cat.value". You need to get the value of the element with the ID "cat", you can either use document.getElementById or use the selector with jquery. If you're having other problems, check for Javascript errors.
Ok, I get that the url value needs to be a string. What I dont get is how to have flot load a variable without reloading the entire page. all i want to do in click on an item in the select box and have it display in the place holder in flot.

Share this post


Link to post
Share on other sites

I've never used or heard of flot, so I don't know either. I'm sure they build a way to do it though, and I'm sure it's listed in the documentation or examples for it.

Share this post


Link to post
Share on other sites

what about using document.getElementById() like justsomeguy suggested? It sounds like you just need to use an event handler in conjunction with a function that gets the desired text of a page element and then uses a javascript page redirect. (or the jquery function). Either way, getting the text value of an element is as simple as JSG's suggestion.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...