I need to process a filter on a huge amount of JSON data (currently 1.5 MB and growing). The code to filter the data is written and working, but due to the time the filtering takes, I want to display a progress-bar.
I decided to use a Bootstrap progress bar and update it's current value during my loop. I tried with following code:
HTML
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%" id="bar"></div>
</div>
JS
$("#bar").css("width", percentage + "%").attr("aria-valuenow",percentage);
This works fine - as long as I'm stepping it through in a debugger like developer-tools in chrome. Loading the page / running the code without a break-point / debugger results in a not updated progress-bar. Current progress won't be rendered in browser.
I also tried similar solutions with a jqueryUI-progress bar and the HTML5 Tag <progress> - but with the same result.
Any suggestions what I did wrong or how to refresh / render DOM after setting a new progress value?
Full loop code:
for(var i=0;i<indexes.length;i++) {
searchterm = "//data[setting = " + indexes[i] + "]";
for(var j=0;j<jsondata.length;j++){
current = jsondata[j];
infoData = {};
found = JSON.search(current,searchterm);
if(found.length > 0){
infoData.licenseNr = current.licenseNr;
infoData.data = found;
filteredData.push(infoData);
}
}
percentage = (i+1) * (100/indexes.length);
$("#bar").css("width", percentage + "%").attr("aria-valuenow",percentage);
}
Related
I am trying to update my progress bar but it will not let me doing while in the function called updateProgressBar();
function updateProgressBar(baby_due_date) {
window.location.href = "../../home.html";
//40 weeks of pregnancy
//Setting todays date
var todays_date = new Date();
//Finding the difference bewtween the dates by milli sec.
var date_difference = baby_due_date - todays_date;
//Converting millisecs to weeks
var weeks_Left_unil_baby = Math.ceil(date_difference / (1000 * 3600 * 24 * 7));
//Updating how many weeks are left on HTML
//Finding the progress of the pregnancy by percent
var progress_percent = (1 - (weeks_Left_unil_baby / 40)) * 100;
console.log(progress_percent);
//TODO: need to update progress here <<<<<<<<<<<<<<<<<<<<<<<<<
$('#progress-bar').attr('aria-valuenow', '100%')
progress_bar_classes.width('100%');
}
here is my html.
<div class="progress bg-secondary">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="1" aria-valuemin="25%" aria-valuemax="100"></div>
</div>
here is my CSS.
div.progress-bar {
width: 25%;
}
I tryed to debug your code but it is not complete enough to debug it completely. I got stuck when progress_bar_classes is not defined came up.
Anyway here are some things that might be the problem:
For me the progress bar height was 0 by default so i could not see it.
$('#progress-bar').attr('aria-valuenow', '100%') Here you are refering to an element with the id progress-bar in the html code however there is only an element with a class progress-bar
$('#progress-bar') The $() can only be used if you also include jquery.
I'm attempting to recreate and update this fiddle. I was able to create a separate chart but unable to achieve the second progress.
The second chart
<div id="radial-progress-vha">
<div class="circle-vha">
<div class="mask-vha full-vha">
<div class="fill-vha"></div>
</div>
<div class="mask-vha half-vha">
<div class="fill-vha"></div>
<div class="fill-vha fix-vha"></div>
</div>
<div class="shadow-vha"></div>
</div>
<div class="inset-vha">
<div class="percentage-vha">22.17</div>
</div>
</div>
My understanding is that each graph should be unique therefore I copied the original css with a different name. This is where it fell apart.
The js
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function() {
var rotation = Math.floor((180)*.123);
var fix_rotation = rotation;
for(i in transform_styles) {
$('.circle .fill, .circle .mask.full').css(transform_styles[i],'rotate(' + rotation + 'deg)');
//$('.circle .mask.left').css(transform_styles[i], 'rotate(' + rotation + 'deg)');
$('.circle .fill.fix').css(transform_styles[i],'rotate(' + fix_rotation + 'deg)');
}
}
setTimeout(window.randomize, 200);
$('#radial-progress-vha');
I have a working fiddle: http://jsfiddle.net/uouxcLbd/
Your main issues were
you didn't need to duplicate the definition of transform-styles
The $('#radial-progress-va'); and $('#radial-progress-vha'); lines were unnecessary
The second definition of window.randomize needed a different name
The second randomize function needed to use your css classes with the -vha suffix
You made a typo in the CSS - it was missing a single . so the .fill-vha selector didn't work
I got a free source progress bar, and I wrote a script for it.
the script is here,
var nanobar = new Nanobar( options );
var loaded = 0;
var number_of_media = $("body img").length;
doProgress();
// function for the progress bar
function doProgress() {
$("img").load(function() {
loaded++;
var newWidthPercentage = (loaded / number_of_media) * 100;
nanobar.go(newWidthPercentage);
document.getElementById("showing").innerHTML = newWidthPercentage;
})
};
});
This. I think,
Loaded <-- (which gets + 1 every time an image finished loaded)
divided by
Number of total body images,,
and then multiplied by 100
So that this can make the percentage number of loading process.
Then I put that percentage number into the box of,
A Loading bar's destination point. (which is : nanobar.go( here ))
But the bar moves werid,
everytime I click the menu, it returns different.
so I made a box to display the percentage number ( in the red box you can see in the picture )
I don't understand how this kind of random numbers are coming out every time.
Please advice.
Consider....
6/7 = 0.8571428571;
0.8571428571 * 100 = 85.71428571;
So if you want to 'tidy' these long decimals, then you need to truncate the float. http://www.w3schools.com/jsref/jsref_tofixed.asp
var num = 0.8571428571 * 100;
var n = num.toFixed(2);
Then n == 85.71
I hope this helps.
We're phasing out the Highcharts javascript visualization lib from our interactive statistics research application. It was already replaced with Rickshaw. Just now a new request came in: One certain use case has the graph display with the measurements displayed in the graph directly. This has been the case while using Highcharts (which has an option for that; called dataLabelsActivated). That should still be the case when using Rickshaw. I haven't yet found an option to make it do that. Any ideas?
How it used to display with Highcharts - highlighted in red are the measurements that should be there when using Rickshaw:
How it currently display with Rickshaw:
Apparently rickshaw doesn't support this natively. I might've done that by extending rickshar through the d3 library it is based upon (which seems to be able to do what I intended to achieve, according to the examples on its website). However, I ended up with a simple solution - added the data labels as divs manually, dependent on the distance of each datapoint from the top left corner of the graph element. Below code searches the data attribute of the graph for the data to display in labels using the color of the datapoint as it is the sole item to match a datapoint with the information in the data attribute.
$(".pointMarker").each(function( index ) {
var percentage = 0;
var currentMarkerColor = self.rgb2hex($( this ).css("border-top-color"));
self.graph.series.forEach(function(series) {
if(currentMarkerColor === series.color) {
if ( !/undef/i.test(typeof series.data[index])) {
percentage = parseFloat(series.data[index].y).toFixed(2);
}
//end loop
return false;
}
});
if (percentage > 0) {
var totalHeight = $( this ).parent().height();
var distanceTop = $( this ).css("top").replace(/[^-\d\.]/g, '') ;
//display data
$( this ).parent().append( "<div class='dataLabel' style='top:"+(parseInt($(this).css('top'), 10)-5)+"px;left:"+(parseInt($(this).css('left'), 10)-9)+"px;height:100px;width:100px;'>"+percentage+"</div>" );
}
});
and
this.rgb2hex = function (rgb){
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}
I have a script that loops through IPs on my local network, checking if anything is there. Every iteration, I submit an AJAX request to get the HTTP status code using cURL, which is returned to my Javascript. I already have built functions to calculate where the progress bar should be, however it only updates the progress bar when the entire script is finished executing.
Here's what I have so far (I'm only using 0-23 in this example because I'm on 199.235.130.22 and I return '200')
function updateProgress(percentage){
document.getElementById('progressBar').style.width = percentage+'%';
$('#progressText').html(percentage+'%');
}
for(host = 0; host <= 23; host++){
ipToCheck = network_addr+'130.'+host;
updateProgress(100/host);
$.ajax({
type: 'GET',
url: 'js/scanhelper.php',
data: {
ip: ipToCheck
}
}).done(function(msg) {
updateProgress(100/host);
if(msg!=0){
logSuccess(ipToCheck);
}
});
pausecomp(200); //Just a sleep function to simulate actual processing
}
My Bootstrap HTML is simply
<div class="progress progress-striped active" style="height:44px;">
<div id="progressBar" class="bar" style="width:1%;"></div>
</div>
And, if it matters, my cURL PHP script is here: http://pastebin.com/JRZckdVb
What this should do is, on every iteration, update the progress bar's width to 100 (as in 100%) divided by the current iteration. It may not be the correct math, but the point is it's only updating after all iterations are complete, freezing the page while it's running.
How can I fix this?
aren't you dividing by zero here when host = 0 in the for loop?
updateProgress(100/host);
you can use a variable hosts to keep track of the number of hosts you have.Then the progress will be as below.
var hosts = 23;// total number of hosts
updateProgress((host/hosts)*100);
The other thing is the ajax you're firing is asynchronous, so what's happening is it fires and doesn't wait for the results. You can either "scan" each host serially one at a time updating the progress bar or scan all of them simultaneously having the progress bar update as the asynch results come back. Can you specify which behavior you're trying to achieve?
[UPDATE]
toggle async flag in the ajax call below for what you want.
function updateProgress(percentage){
if(percentage > 100) percentage = 100;
$('#progressBar').css('width', percentage+'%');
$('#progressBar').html(percentage+'%');
}
var hosts = 23;
var hostsDone = 0;
for(host = 0; host <= hosts; host++){
ipToCheck = network_addr+'130.'+host;
$.ajax({
type: 'GET',
url: 'js/scanhelper.php',
async:true,
data: {
ip: ipToCheck
}
}).done(function(msg) {
hostsDone++;
updateProgress((hostsDone/hosts)*100);
if(msg!=0){
logSuccess(ipToCheck);
}
});
}
if you're looking for visuals you should set the height of '#progressBar' to something non-zero and maybe background green.
<div class="progress progress-striped active" style="height:44px;">
<div id="progressBar" class="bar" style="height:44px;width:1%;background-color:green"></div>
</div>
The answer from #zerObit are onli 2/3 of the thrue! You have also to set aria-valuenow.
In some cases, the progress bar would be hidden.
You can do this by:
$('#progressBar').attr('aria-valuenow', percentage);