My application regularly queries the database for new data and updates a graph using Ajax. However, I am facing an issue where each time the graph is updated with new values, the current zoom level is reset. Is there a way to preserve the zoom position before updating the graph and then reapply it afterwards? This would help prevent the annoyance of having to re-zoom every minute.
I attempted to implement Ozan's solution, but I encountered an issue with copying the zoom block. Instead, I utilized plot.getOptions() to draw the graph as shown below:
var previousSettings = plot.getOptions();
plot = $.plot($("#graph"), data, previousSettings);
By adopting this approach, you have the flexibility to modify your view dynamically while ensuring that the auto-update feature functions seamlessly without altering your view.
One helpful tip is to retrieve the current zoom settings before updating your data and replotting. This can be achieved by adding the current zoom values to the update options.
// Retrieve current zoom
var zoom = plot.getAxes();
// Incorporate zoom into standard options
var zoomed = {};
$.extend(zoomed, options);
zoomed.xaxis.min = zoom.xaxis.min;
zoomed.xaxis.max = zoom.xaxis.max;
zoomed.yaxis.min = zoom.yaxis.min;
zoomed.yaxis.max = zoom.yaxis.max;
// Draw or save the updated plot
plot = $.plot($("#graph"), d, zoomed);
Before creating a new plot, it is important to gather information about the current axes state. Merge this data with your initial options to ensure a seamless transition.
// Make a deep copy of the options object to preserve its original state
// when not preserving the zoom.
var copiedOptions = $.extend(true, {}, options);
if (plot != null && preserveZoom) {
// There could be multiple Y axes
var zoomYAxes = plot.getYAxes();
for (var j = 0; j < zoomYAxes.length; j++) {
copiedOptions.yaxes[j].min = zoomYAxes[j].min;
copiedOptions.yaxes[j].max = zoomYAxes[j].max;
}
// Focus on one X axis if there are multiple ones
// Use similar method as for Y axis in that case.
copiedOptions.xaxis.min = plot.getXAxes()[0].min;
copiedOptions.xaxis.max = plot.getXAxes()[0].max;
}
plot = $.plot("#placeholder", data, copiedOptions);
I've been attempting to implement a reveal Modal using Foundation 6 and Ajax, but unfortunately it's not functioning as expected. I have followed the official documentation HTML Page: <!DOCTYPE html> <html lang="it"> <head> ...
Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...
Is there a way to effectively utilize the variable in the appended message of the AJAX success call? http://codepen.io/anon/pen/fdBvn data['name'] = $('#goofy').val(); $.ajax({ url: '/api/1/email/test/', data: data, type ...
import React,{useState} from 'react'; const app = () => { const [inputValue, setInputValue] = useState(); const handleChange = (e) => { setInputValue(e.target.value); console.log(inputValue); } const d ...
My scenario involves the existence of an object named productCounts [{provisioned=2.0, product=str1, totalID=1.0}, {product=str2, provisioned=4.0, totalID=3.0}, {provisioned=6.0, product=str3, totalID=5.0}] In addition, there is an array labeled uniqu ...
Is there a way to highlight web elements that need to be interacted with or asserted in webdriverIO? Or is there a JavaScript code similar to the javascript executor in Selenium that can be used for this purpose? ...
I have encountered a problem in my code snippet. The issue arises when I attempt to open the Select component by clicking on IconComponent(dropdown-arrow). <Select IconComponent={() => ( <ExpandMore className="dropdown-arrow" /> )} ...
Recently, I encountered an interesting scenario. While evaluating a new project and reviewing the codebase, I noticed that all HTTP requests within the service files were enclosed in a JavaScript try / catch block instead of utilizing the .catch observable ...
My attempt to showcase the search results of my webpage below the search area was unsuccessful. I utilized AJAX to present the outcome in a div, but encountered issues. I have three key components: the div, the search result page, and the AJAX function. ...
I'm encountering some issues with conflicting Javascripts. One script is responsible for creating a dropdown menu, while another set of scripts enable fancybox functionality. However, having both sets of scripts in the header code results in conflicts ...
I'm working on a subscription form using jQuery/ajax and I want to only show the div#alertmsg and the second "p" tag in the success function. The content I need to display will vary based on whether the email already exists in the database. Is there ...
I am in the process of creating a website that is designed to run everything within the same file, but I am unsure about how to locate study materials for this project. For example: In a typical website scenario -> If I am on index.php and I click on ...
I am trying to generate a table dynamically using CSS and a JSON array. For example: In the code snippet provided, I have assigned a class of 'spannedrow' to span certain cells in the table, although the class is not defined yet. This is just ...
I am facing an issue with fetching data within an array in the code below var str = "Service1|USER_ID, Service1|PASSWORD" var str_array = str.split(','); console.log(str_array) for(var i = 0; i < str_array.length; i++) { str_array[i] = st ...
My goal is to retrieve a file using an input element of type "file". This element is located within a partial view, and I need to send it to the controller or request it there using "Request.Form["inputFile"];". However, this method only provides me with t ...
I am a beginner in ASP.NET and I recently set up a form that allows input from a C# enum: <form method="get"> <div class="form-group"> <label>Select Type:</label> @Html.EnumDropDownListFor(x = ...
I'm encountering an issue where including another directive related to the current one results in the following error message Error: [$compile:ctreq] http://errors.angularjs.org/1.2.10/$compile/ctreq?p0=myApp.pagereel&p1=ngTransclude Script.js ...
UPDATE: I resolved the issue by relocating my form submitter script from the Header to the bottom of the jamesmsg.php page (the included one). By doing this, the functions are always re-loaded and attached to the "new" form each time the div is refreshed. ...
Here is a straightforward code snippet for you to consider: function colorPromise() { return $q.when({data:['blue', 'green']}) } function getColors() { return colorPromise().then(function(res) { console.log('getColors&ap ...
I need help with a script that I have created to validate inputs and display error messages. The issue is that the email message always shows on my website, even if the Email field is filled out correctly. Here is the JavaScript code snippet: $(document). ...