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);
});
Related
I have created a Master-Detail app, with three columns. First view is to select a Project. Second view, to select WBS Elements. Third view, it has a Smart Chart based on the selected WBS from second view.
So far, the first time the chart is triggered it works fine. Problem is when I deselect a few WBS, and select new ones. I can't find a way to either rebind the chart nor to refresh the third view (so either the onInit or onBeforeRendering gets triggered again)
Chart currently is getting created once user hits the emphasized chart button at the top of the second view. Please do not pay attention to the layout of the second view, it is still under development.
Hope you can help me finding a way to refresh the chart after changes on the selected WBS.
Regards,
Tincho
You could use the EventBus. After loading the Chart View first time, the EventBus is "listening". Every time you're de/selecting a checkbox the event is triggered.
{ // Chart view controller
onInit: function() {
this.oEventBus = this.getOwnerComponent().getEventBus();
this.oEventBus.subscribe("Checkbox", "Selected", this.updateChart); // "Listener"
},
updateChart: function(channelId, eventId, data) {
// ...
},
}
{ // WBS view controller
onSelectWBSElement: function(oEvent) {
const oEventBus = this.getOwnerComponent().getEventBus();
oEventBus.publish("Checkbox", "Selected", {/*data*/});
},
}
I built a line chart with more than 50 series: fiddle
Now I want to highlight one series by button click (opacity: 1). When I highlight another series, the first one should get its original opacity of 0.1 again.
With only two series I can achieve this by doing this:
$('#func1').click(function () {
var chart = $('#Weltweit').highcharts();
chart.series[3].update({opacity: 0.1});
chart.series[4].update({opacity: 1});
});
$('#func2').click(function () {
var chart = $('#Weltweit').highcharts();
chart.series[3].update({opacity: 1});
chart.series[4].update({opacity: 0.1});
});
But I cannot do this with 50 series because it takes too long to calculate. Is there a way to cancel the previous update before doing a new one?
Use the update method with redraw parameter set to false and redraw chart after loop:
chart.series.forEach(function(s) {
s.update({
...
}, false);
});
chart.redraw();
Live demo: http://jsfiddle.net/BlackLabel/3a9bfjgd/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#update
https://api.highcharts.com/class-reference/Highcharts.Chart#redraw
You can read here, similar with your problem: https://api.highcharts.com/highcharts/series.line.point.events.select
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 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/
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 () { };
}
});