I need some help in integrating a loading progress bar of JqueryUI to loading of data from a Observable array of KO. I have created some JsFiddles
fiddle for KnockOut : http://jsfiddle.net/neodescorpio/HksCA/
fiddle for JqueryUI Progress bar : http://jsfiddle.net/neodescorpio/NAs3V/
I need to combine both of these so that on loading of knock out a progress bar with percentage is shown and disappears after data is loaded 100%. If any other progressbar is used im okay with it. i just want a progress to be shown.
You should make a custom binding to manipulate the jQuery progress bar from knockout bindings. For example something like that (very contrived example):
ko.bindingHandlers.progress = {
init: function(element, valueAccessor) {
$(element).progressbar({
value: 0
});
},
update: function(element, valueAccessor) {
var val = ko.utils.unwrapObservable(valueAccessor());
$(element).progressbar("value", parseFloat(val));
}
};
Now you can create a progress bar from a div and command it through an observable value (which should return a number, or a string representing a number, ranging from 1 to 100), by using the progress binding - e.g.:
<div data-bind="progress: percentComplete"></div>
I update your fiddle to show an example: http://jsfiddle.net/HksCA/2/
Related
I am loading chart using json but it takes while so meanwhile i want to show progress bar to show the process happening behind.
$.getJSON('frontend/js/tmp/data40.json', function(data) {
options.series=data;
var chart = new Highcharts.Chart(options);
});
How can i show progress bar?
you can use showLoading function of highcharts to show progressbar.
yourChart.showLoading('Loading...');
yourChart.hideLoading();
will share a working demo
see the Alternate way of doing this , as you want to wait till response comes back and data fills in highchart see Working demo on your code
You can style and position this "Loading data" text or use a loading icon/spinner icon as you want.
$("#container").text("Loading Data");
$.getJSON('data10.json', function(data) {
options.series=data;
chart = new Highcharts.Chart(options);
});
How can i implement lazy loading in mobile jquery lisview widget?
can anybody give a example using static data in json format binding to jquery mobile listview widget?
Thank you.
There are a few ways, The following two ways work great
JQM way, a great tutorial. It detects when you scrolled to the bottom of the listview and loads more items to list
http://jqmtricks.wordpress.com/2014/07/15/infinite-scrolling/
Demo
http://jsfiddle.net/Palestinian/pAgbT/light/
Another way is to use Iscroll 5 plugging. Similarly you can setup a function to detect when you scrolled to the bottom of the list and load new items
http://iscrolljs.com/
Demo I placed the whole Iscroll 5 plugging in the demo so scroll down to //// JQM STUFF to see the actual code
Some of the JQM code e.g trigger create is depreciated in JQM 1.4 so some modifications are needed above > 1.4 for it work.
http://jsfiddle.net/t0t3Lz5x/
var myScroll;
$(document).ready(function(){
myScroll = new IScroll('#wrapper',
{
scrollX: false,
scrollY: true
,click:true // open click event
,scrollbars: false
,useTransform: true
,useTransition: false
,probeType:3,
mouseWheel:true,
bindToWrapper: true
});
});
function initscroll() {
setTimeout(function () {
myScroll.refresh();
}, 1000);
}
output = '<li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li>';
$('#listview').html(output).listview().listview('refresh');
initscroll()
myScroll.on('scrollEnd', function() {
if (this.y == this.maxScrollY)
load_new_items();
});
function load_new_items() {
mysearchlist = $('<li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li>');
mysearchlist.appendTo("#listview").trigger('create');
$('#listview').listview().listview('refresh');
initscroll()
}
There is one more way using the Jquery's on scroll function to monitor the height of the list and then as you scroll measure the pixels you scrolled from the top of the list. When both match you can run a function to append more items in the list
I want to add a reference series to my charts (i.e. a reference price). Axis.addPlotLine() does it, but I want to be able to toggle this series from the legend; a plain plotLine does not show up in the graph's legend.
Another reason why plotLine does not seem like a good solution is that it does not get accounted for by the viewport calculations. Which means that toggling other series might lead to the plotLine appearing outside the viewport due to zooming.
The simplest way to accomplish what I want would be, to add a dynamic series via chart.addSeries. But it's impossible to call this method from within a triggered addSeries event because chart.addSeries is set to null while in the event handler.
Tying in to the redraw event creates a whole lot of difficulties as well, because render() can't be called anymore.
How would you go about it?
Update:
As per the comment of Pawel Fus, I unsuccessfully tried the following:
[…]
events: {
load: function (event) {
foo = this;
},
addSeries: function(event) {
console.log(foo) // returns chart object as expected
console.log(foo.addSeries) // undefined
}
}
Solution is to store addSeries on load event, and use stored function when adding series. Live example: http://jsfiddle.net/3bQne/808/
events: {
load: function (event) {
foo = this.addSeries;
},
addSeries: function (event) {
if (iterator) {
iterator--;
foo.call(this, {
data: [100, 200, 100, 100, 200, 300]
});
}
}
},
Still you can stick with plotLine only.
If the position of the line is static that is the best way.
If the position is dynamic then you can still go with plotLine.
There are events for adding and removing plotLine on the fly.
API link
removePLotLine() : http://api.highcharts.com/highcharts#Axis.removePlotLine
addPlotLine() : http://api.highcharts.com/highcharts#Axis.addPlotLine
I hope this will help you.
I am using HighCharts with JQuery (ASP.Net, C#, MVC) to show chart on my web page. I have used below code to display the tooltip initially when page loads. Also to keep the tooltip and crosshair when mouse moves out of chart area. Thanks to answer by #jugal-thakkar
chart = new Highcharts.Chart({
... <my chart options go here>
...
});
...
chart.tooltip.refresh([chart.series[0].points[1]]);
chart.tooltip.hide = function () { };
chart.tooltip.hideCrosshairs = function () { };
Referring to my earlier post Here, I am facing problem with IE8 browser. The tooltip object is not found when I load the page first time. Then after refreshing the page, it starts working fine.
Am I missing any IE8 fix here? Wondering why it does not find the tooltip object only at first time!
Here is the Console Log in F12 on IE8:
'tooltip' is null or not an object
The tooltip object is not instantiated until the document.onreadystatechange is fired with a state of complete.
If you add the following to your code then it should defer attempting to raise the tooltip until it has been created
document.attachEvent('onreadystatechange', function () {
if (document.readyState === 'complete') {
chart.tooltip.refresh([chart.series[0].points[1]]);
chart.tooltip.hide = function () { };
chart.tooltip.hideCrosshairs = function () { };
}
});
I couldn't find what I'm doing wrong here...
I'm trying to apply some effect on the selected <li> of the navigation, I'm getting the index of it but I can't apply anything on it :
$("#tabs").bind('tabsselect', function(event, ui) {
var choosen = ui.index;
console.log(choosen);
$('#tabs ul').find('li:eq(choosen)').toggleClass('selectedone');
});
at a guess it looks like you are sending the string choosen to the find function rather than the value of choosen - so I would say you need to try instead
$('#tabs ul').find('li:eq(' + choosen + ')').toggleClass('selectedone');