We are using Highchart version of Highcharts JS v8.0.4 and facing issue Reset button not showing when using scrollablePlotArea,
Is is resolved in latest version so how we can sort out it in previous version ?
The bug is related with the fact that the button is shown, but not in the right place. As a solution, you can reposition the button in afterShowResetZoom event.
(function(H) {
H.addEvent(H.Chart, 'afterShowResetZoom', function(e) {
this.resetZoomButton.attr({
x: this.plotSizeX,
y: this.plotTop + 10
});
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/hnv5q2wm/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Related
I have an iOS app that compiles and works fine with Titanium SDK 5.1.1GA but it would not work correctly with either of 5.1.2 GA or 5.2.0 GA.
The issue is with a scrollView in which events are not being fired with the newer SDKs. It is a lot of code to post all of it. The scrollView is the last of four in a ScrollableView and it is being created like this:
function SettingsView() {
var self = Ti.UI.createScrollView({
width: Ti.UI.FILL,
});
var helpButton = Ti.UI.createButton({
title: "HELP",
width: Ti.UI.FILL,
height: Ti.UI.FILL,
color: "black",
});
self.add(helpButton);
helpButton.addEventListener("click", function(){
Ti.API.info("helpButton> Clicked!!");
});
helpButton.addEventListener("touchstart", function(){
Ti.API.info("helpButton> touchstart!");
});
helpButton.addEventListener("touchend", function(){
Ti.UI.info("helpButton> touchend!");
});
return self;
}
The default animation on the button is working - I can see the color changing as I tap on it - but none of the events are fired.
Elsewhere in the code events on views and buttons are working with the newer SDKs.
I have tried all sorts of things but have not been able to make the events on objects inside that scroll view fire. The only thing that has worked so far is changing the SDK to 5.1.1 or earlier.
I would appreciate any help.
Thank you!
This is a bug, tracked at the Appcelerator JIRA:
https://jira.appcelerator.org/browse/TIMOB-20493
I am working on a rotator using jquery ui and can get it to pause on hover with this:
$(document).ready(function(){
$("#rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#rotator").hover(
function() {
$("#rotator").tabs("rotate",0,true);
},
function() {
$("#rotator").tabs("rotate",5000,true);
}
);
});
This only problem is that it stops on the last item in the list and won't rotate through the first item unless I make it:
$(document).ready(function(){
$("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#rotator").hover(
function() {
$("#rotator").tabs("rotate",0,true);
},
function() {
$("#rotator").tabs("rotate",5000,true);
}
);
});
but then the hover doesn't work.
Any ideas how to get it to cycle through the list and pause on hover?
For some reason I had a really old version of jquery and jquery ui. I updated to the version we are running on our site (1.7.2 and jquery ui 1.82). Could run the newest versions, but we have too many issues with legacy code.
guys!
I just commited an extension to make Pause on Hover for jQuery UI Tabs
jQuery UI Tabs Rotate: Pause on Hover
Enjoy it!
I searched through the docs but could not find a post discussing this.
I'm currently working on a project which's both available for mobile and pc browsers. Since the screen on iPhone is very small, I'd like to disable highcharts interaction on it (the interaction would fail me even scroll down the page).
I would like to ask whether there's any parameter like "hasInteraction:false".
Thanks for any kind of tips!
update:
I tried this code from Ricardo Lohmann and it's working to disable the mouse tracking:
plotOptions: {
series: {
enableMouseTracking: false
}
}
But on mobile device it's still blocking my finger scrolling down. I searched on Google and found a post: http://blog.rafael.jp/post/2958719820/div-mouseenabled-false but still not working (to allow the chart not blocking my finger scroll)
I'm looking for a solution to this as well.
More precisely, I'd like to enable page scrolling even when finger starts dragging on the chart. I'd still like that a touch on a data point opens up a tooltip.
You might be interested in this commit from v3.0.4 "Added new option, tooltip.followTouchMove ...". I still have to try that. I tried that on iPhone simulator and it works:
Somewhere in your HTML page:
<script type="text/javascript" src="//code.highcharts.com/3.0.1/highcharts.js"></script>
Later on, when you create the chart in your JavaScript code:
$('#chartdiv').highcharts({
chart : {
type : 'line', // e.g. for a line chart
zoomType: null, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
},
tooltip: {
followPointer: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
followTouchMove: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
},
// other options...
});
plotOptions: {
series: {
enableMouseTracking: false
}
}
demo
plotOptions: {
<your type of chart, for example "spline">: {
enableMouseTracking: false
}
},
May fix your problem
I'm attempting to create a web page using the jQuery ui lib. My design uses a jQuery ui autocomplete on an input field at the top of a form. Immediately below this autocomplete input form are some jQuery sliders. The issue is that when the auto complete box populates the results are displayed behind the handle of the slider control. This comes from the way that jQuery builds the sliders which makes pieces of them have a z-index of 3. The z-index of the drop down portion of the jquery autocomplete control appears to always be set to 1. I tried increasing the z-index of the input element that is being auto completed but that doesn't seem effect the z-index of the element jquery creates for the autocomplete drop down. I also tried writing my own javascript to get the drop down menu element by class(it is a ul) and manually set it's z-index. This doesn't seem to work either. I'm assuming this means, somehow the jQuery code is overwriting the z-index change that I'm making. This isn't a browser bug as it is a problem on Firefox, Chrome, Safari and IE. It is a problem with the actual z-index jQuery gives the drop down box (UL element).
Does anyone have a solution to this problem? How does one generally go about fiddling with elements that jQuery automatically generates to build it's controls.
Using the open and close events to modify the z-index worked for me:
$( "#tags" ).autocomplete({
source: availableTags,
open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); },
close: function(event, ui) { $(".ui-slider-handle").css("z-index", 2); }
});
See a demo here.
According to http://bugs.jqueryui.com/ticket/5238, there seem to be 2 solutions for this.
"Changing the z-index to 3 seems to fix this completely."
You can do this on your css, you just need to add "!important" to override the value the library sets:
ul.ui-autocomplete {
z-index: 3 !important;
}
Or, "set position:relative on autocomplete input, so that .zIndex() can actually compute the z-index."
This is what I did to set the z-index for autocomplete:
$("#myInputId").autocomplete({
open: function () { $('.ui-autocomplete').css('z-index', 50); },
source: function (request, response) {
$.ajax({
url: "some url",
type: "POST",
dataType: "json",
data: { /* some code... */ },
success: function (data) { /* some code... */ }
})
}
});
I'm using the jquery ui dialog for a modal popup dialog. It's working great in Firefox/Chrome but terrible in ie6.
Problem:
When I show the dialog in ie6, the browser window grows and automatically scrolls down to the bottom. The height increase and automatic scroll-down is equal to the height of the jquery dialog.
I can scroll up and then use the dialog as normal, but the behavior where it grows the window and drops is maddeningly unacceptable.
Here is how I'm launching the window:
<div id="dialogWindow"></div>
...
$(document).ready(function() {
var $dialog = $("#dialogWindow").dialog({
autoOpen: false,
modal: true,
minWidth: 560,
width: 560,
resizable: "true",
position: "top"
});
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
$dialog.dialog('open');
});
});
I am already using the bgiframe plugin for jquery which is key for ie6 overlay issues. But this seems unrelated to that. Has anyone seen this before and found a work around?
I've seen this behavior before and it is usually caused by the overlay. When you use the {modal: true} option an overlay is created and rendered with bgiframe support if the plug-in is loaded.
First off, try turning {modal: false} and see if you aren't getting page blow-out then we know it's the overlay.
there are a few things to check if that is the culprit;
check that the styles for the overlay are loading correctly, you'll need to include the jquery-ui dialog.css
try experimenting with position: and float: styles
try moving your dialog markup just above the < / body> tag, allowing the modal overlay to escape correctly.
I had a similar problem at one point.
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
var y = window.pageYOffset;
var x = window.pageXOffset
$dialog.dialog('open');
window.scrollTo(x, y); // horizontal and vertical scroll targets
});
What the above should do is grab your current scroll coordinates and saves them. Once the dialog opens you then scroll back to the prior position in memory. Should be near instant and unseen by the user.