I'm trying to make a real time graph that updates every X seconds and then graphs it as time goes on. The problem I'm having is that when it plots the points, the points aren't connected. Here's what I have so far:
var r = [];
function fetchData() {
var options = {
lines: { show: true },
points: { show: true },
xaxis: { show: false }
};
function doSomething(series)
{
r.push(series);
$.plot($("#xx"), r, options);
}
$.ajax({
url: 'playersonline.php',
method: 'GET',
dataType: 'json',
success: doSomething
});
setTimeout(fetchData, 3000);
}
fetchData();
This is what the output looks like currently.
some pic http://screensnapr.com/e/ra6q70.png
It looks like each of your points is a separate series. For them to be connected, you need to put all the points in a single array, and give that to Flot as one series.
If you look at Flot's examples, there's one that demonstrates real-time updates of a single series.
Related
I have 2 databases in my Laravel 5.7 app, and I would like to add a typeahead functionality with one of them.
It is the first time I use it, so I don't really know how to do it.
I'm following the instructions here: https://itsolutionstuff.com/post/laravel-57-autocomplete-search-from-database-using-typeahead-jsexample.html
I have used typeahead in my application. Hope this would help you.
$(document).ready(function(){
$.ajax(
{
type : 'GET',
url: base_url+"/getrelateduser",
success: function (data)
{
// Defining the local dataset
var relateduser = data;
// Constructing the suggestion engine
var relateduser = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: relateduser
});
$('.sendleads').typeahead({
hint: true,
highlight: true, /* Enable substring highlighting */
minLength: 3, /* Specify minimum characters required for showing result */
},
{
name: 'relateduser',
source: relateduser
});
}
});
});
Here the url "/getrelateduser" will return all the emails of users in the users table. Let me know if you have more queries.
I have a page in PHP that does a query in the database at the end of the processing I show the amount of updated records. This process takes a while, in my Jquery I just show the total of affected records, how could I change my Jquery to show from time to time, in case every 1 second it shows the user the amount of records.
var form_data = new FormData();
form_data.append('id', idSel);
$.ajax({
url: 'post.php',
type: 'POST',
data: form_data,
cache: false,
contentType: false,
processData: false,
beforeSend: function () {
$('.resp').html("<img src='images/spin.gif' alt='Notificação' height='70' width='70'/> ");
},
success: function(response) {
ATTENTION I can not keep calling the PHP page several times, I need to call once and listen to it or receive data from it!
Is it possible for teachers?
I'm currently displaying a table returning player rankings and highlighting the current player row. What I would like to achieve is let's say display on 5 rows and center the current player at the center.
If the current player ranking is 100th, I want to display player ranks 98 to 102. Currently it will display rank 1 to 5.
I can't find a want to "center my results" on the current player ranking.
My current table is displayed with this code:
$.ajax({
url: "myController/getDataTable",
method: 'post',
dataType: 'json',
success: function (values) {
var table = $('#myTableLeaderboard').DataTable({
paging: true,
pageLength: 5,
sort: true,
searching: true,
data: values['data'],
ordering: true,
aoColumns: [
{ "data": "ranking" },
{ "data": "cash" },
{ "data": "staff_count" }
// more columns...
],
"createdRow": function ( row, data, index ) {
$currentUserId = $('#currentUserId').attr('value');
if ( data.id_player == $currentUserId ) {
$('td', row).addClass('bold');
}
}
});
$('#myTableLeaderboard_filter').switchClass( 'dataTables_filter', 'dataTables_filter_show' );
}
});
My server side PHP function returns two arrays, one containing the data for the table and one variable containing the current player rank:
{"data":
[{"cash":"606, "id_player":"61","staff_count":null,"ranking":1},
{"cash":"30","id_player":"63","staff_count":null,"ranking":2},
...more players....],
"current_id_player":"67",
"current_player_ranking":3
}
I looked into the Custom filtering - range search page but I'm not sure that's what I should look into and how to approach it.
Finally, paging is enabled so if the player navigates to another page, the results won't be "centered" on him anymore.
I found the solution with adding:
displayStart: values.current_player_ranking-2,
And completed with jumpToData plugin
$('#myTableLeaderboard thead').on('click', 'th', function () {
table.page.jumpToData( $currentUserId, 9 );
} );
table.page.jumpToData( $currentUserId, 9 );
The response I'm getting back from PHP using an AJAX call:
$.ajax({
url: 'getit.php',
type: 'POST',
dataType: 'json',
data: {id_token: my_token},
success: function(data) {
//stuff
}
});
gives me something like this when I console.log it:
email: "me#example.co"
email_verified: true
first_name: "Bob"
permissions: Object
client_1001: Object
client_id: "121434"
role: "full"
table_name: "5tyyd"
client_1002: Object
client_id: "45638"
role: "full"
table_name: "df823"
If I do something like this:
$('.last_name').text(data.first_name);
and
<div class="last_name"></div>
This gives me back Bob just as expected.
What I need to get is a list of permissions (e.g., client_1001) and the pieces of data under each permission. I can't figure out how to do though.
This is where I'm stuck:
$('.last_name').text(data.permissions.WHATGOESHERE?);
I need to fill in the WHATGOESHERE? part. It's basically an object in an object, but I'm not sure how to parse it.
As you're using jQuery, give this a try :
$.each(data.permissions, function (index, value) {
console.log(index); // "client_0001"
console.log(value.table_name); // "5tyyd"
});
The idea is to iterate through the response, as if you were using foreach() in PHP.
I'm using JQuery UI Autocomplete to pull records from a caller database. This works fine for records that are in the database but I want to improve handling for new records.
For example, if a user chooses a name from a suggestion, I use the return id later in the form. This works fine. If the value is not found in suggestions I am struggling to trigger the script since it is currently triggered from a select event, and there doesn't appear to be a onblur event for this function which I think is what I'm after. I'm new to JQuery and have already spent a day trying to sort it.
Code so far is:
$("#contact_name").autocomplete({
source: "get-caller-names.php",
minLength: 2,
select: function(event, ui) {
$('#contact_id').val(ui.item.id);
$('#contact_name').val(ui.item.name);
$('#contact_email').val(ui.item.email);
$('#contact_phone').val(ui.item.phone);
$('#contact_addr').val(ui.item.address);
}
});
All suggestions welcome, thanks.
Code in case others have the same issue...
// auto-suggest jqueryui
$("#contact_name").autocomplete({
source: "GetCallerNames.php",
minLength: 2,
select: function(event, ui) {
$('#contact_id').val(ui.item.id);
$('#contact_name').val(ui.item.name);
$('#contact_email').val(ui.item.email);
$('#contact_phone').val(ui.item.phone);
$('#contact_addr').val(ui.item.address);
},
change: function(event, ui) {
$.ajax({
type: 'GET',
url: 'GetCallerNames.php',
dataType: 'json',
data: {term:$(this).val()},
success: function(data) {
if (data!=null&&data!='') {
$('#contact_id').val(data[0].id);
$('#contact_email').val(data[0].email);
$('#contact_phone').val(data[0].phone);
$('#contact_addr').val(data[0].address);
}
}
});
}
});
Could you not add a new handler for change eg:
$( ".selector" ).autocomplete({
select: function(event, ui) { ... },
change: function(event, ui) { ... }
});