I have a nice chart in highcharts that the user can zoom into. I really don't like the built-in ZOOM RESET button, and would like to add my own custom zoom reset button into a nav bar already present.
So my questions are:
1. Is there a way to hide the default highcharts ZOOM RESET button?
2. Is there a method/function I can call to perform the ZOOM RESET? (I can call that from my own button click)
You can pass resetZoomButton as display: none and call zoomOut.
chart: {
resetZoomButton: {
theme: {
display: 'none'
}
}
}
$('#resetZoom').click(function() {
chart.zoomOut();
});
<input type="button" value="reset zoom" id="resetZoom"/>
Demo
Just get the chart and call zoomout:
chart = $("#your-chart").highcharts();
chart.zoomOut();
Related
My canvasjs chart floats right then on inspection gets back to its original position. What might be the issue?
I have 2 dynamic canvasjs charts in my site inside to tab-body. The 1st chart is displaying fine but when I click on the 2nd tab the chart inside it floats left and then after inspection gets to its original position. All of the data is fine just want to know the js or css issue.
i did the php like this data are all fine and are working good.
<div class="charcon_n" id="chartContainer_n<?php echo $i; ?>" style="height: 350px; width: 100%;" data-point='<?php echo json_encode($data_n, JSON_NUMERIC_CHECK); ?>'></div>
Whenever a tab is switched, the render method of each of the chart in the activated tab should be called so that chart can take the actual dimensions of its container.
$("#tabs").tabs({
create: function (event, ui) {
//Render Charts after tabs have been created.
$("#chartContainer1").CanvasJSChart(options1);
$("#chartContainer2").CanvasJSChart(options2);
},
activate: function (event, ui) {
//Updates the chart to its container size if it has changed.
ui.newPanel.children().first().CanvasJSChart().render();
}
});
Please take a look at jQuery gallery example.
I added button to by Crossrider extension (see snippet) but I can't see how to add a tootip when hovering over the button. Are tooltips supported?
Exmaple code in background.js:
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('icon.jpg');
appAPI.browserAction.onClick(function() {console.log('hello world!');});
});
Like most HTML tags, the title attribute is used to add a tooltip to an element; hence, to add a tooltip to a Crossrider toolbar button you simply set its title attribute using appAPI.browserAction.setTitle.
Using your snippet as a base, you can use the following example to set the tooltip to "My tooltip":
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('icon.jpg');
appAPI.browserAction.setTitle('My tooltip');
appAPI.browserAction.onClick(function() {console.log('hello world!');});
});
[Disclosure: I am a Crossrider employee]
I want to relocate my bootstrap popover in the left side, i.e. I want to move the whole popover in the left side, while the white arrow would stay in one place.
I would like to have the effect which is on google.com website, when you click blue icon you see popover but its content is relocated while the white arrow is located under the user.
I know that I can use something like this:
.popover {
top:0 !important;
margin-top:10px;
}
Unfortunately, it relocates the whole popover altogether with white arrow.
What I have now (popover is on the right side and there's no place between screen edge and my popover)
What I want to have (small distance between popover and monitor's edge):
“I want to change the position of content of this popover so that this
arrow will be placed further on the left„
When the popover is shown the arrow position is calculated in Tooltip.prototype.replaceArrow based on width/height and placement. You can force a specific position with this CSS :
.popover .arrow {
left: 90px !important; /* or 45% etc */
}
But that will affect all popovers. Popovers is injected and removed to and from the DOM, and there is by default no way to target visible popovers individually. If you want to style the arrow on a specific popover, a workaround is to hook into the shown.bs.popover event, detect which popover that is being shown, and style the arrow for that popover if needed. Example :
.on('shown.bs.popover', function() {
var $popover = $('.popover')[0];
switch ($(this).attr('id')) {
case 'a' : $popover.find('.arrow').css('left', '10px');break;
case 'b' : $popover.find('.arrow').css('left', '40%');break;
case 'c' : $popover.find('.arrow').css('left', '180px');break;
default : break;
}
})
To get this to work, there must be only one popover shown at a time (see fiddle). It can be worked out with multiple visible popovers also, but then we need to add some HTML to the popover content.
see demo -> http://jsfiddle.net/uteatyyz/
As what I have understood so far, you want to achieve the popover to the left of the button.
Please check this Plunker Link
HTML Code:
<div class="pull-right">
<button type="button" mypopover data-placement="left" title="title">Click here</button>
</div>
Angular Code:
var options = {
content: popOverContent,
placement: "bottom",
html: true,
date: scope.date,
trigger: 'focus'
};
I have edited the answer as per the images that you have shown.
If this is not is answer, then please comment below.
Regards D.
I am using the button toggle feature of Twitter Bootstrap. Everything works perfectly. The problem is the color difference between the toggle's on/off state is too similar. It is hard to see the difference between on and off states.
Ideally I'd like to make the color contrast more pronounced between on/off states, or change the color entirely between states (e.g. blue = off, red = on).
<button type='button' class='btn' data-toggle='button' value='ABC'><i class='icon-star-empty'></i></button>
Thanks.
Recently also met this problem.
found a quick solution
bootstrap-3.1.1
in line 209 from bootstrap.js
Change
if (changed) this.$element.toggleClass('active')
to
if (changed) this.$element.toggleClass('btn-success')
I realized I could change the class using JQuery. Now off-state is white, on-state is green.
$(document).ready(function() {
$('.keyContactToggle').click(function (e) {
var UserID = $(this).attr('value');
if ( ($(this).is('.btn')) && ($(this).is('.keyContactToggle')) && !($(this).is('.btn-success')) ) {
$(this).addClass('btn-success');
} else {
$(this).removeClass('btn-success');
}
});
});
I am using HighCharts in my ASP.Net MVC application using JQuery.
I have managed to show a tooltip with crosshair vertical bar on mouse move. However, I do not want to hide this toolop + bar even if user moves the mouse out of chart. Is there any option available in Highcharts to achieve this?
I searched forums but could not find any working example. One of those solutions is related to cloning tooltip on click event.
You can wrap the Highcharts.Tooltip.prototype.hide by an empty (no-op) function as follows
(function (H) {
H.wrap(H.Tooltip.prototype, 'hide', function (defaultCallback) {
/*
░░░░░▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄▄▄░░░░░░░
░░░░░█░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░▀▀▄░░░░
░░░░█░░░▒▒▒▒▒▒░░░░░░░░▒▒▒░░█░░░
░░░█░░░░░░▄██▀▄▄░░░░░▄▄▄░░░░█░░
░▄▀▒▄▄▄▒░█▀▀▀▀▄▄█░░░██▄▄█░░░░█░
█░▒█▒▄░▀▄▄▄▀░░░░░░░░█░░░▒▒▒▒▒░█
█░▒█░█▀▄▄░░░░░█▀░░░░▀▄░░▄▀▀▀▄▒█
░█░▀▄░█▄░█▀▄▄░▀░▀▀░▄▄▀░░░░█░░█░
░░█░░░▀▄▀█▄▄░█▀▀▀▄▄▄▄▀▀█▀██░█░░
░░░█░░░░██░░▀█▄▄▄█▄▄█▄████░█░░░
░░░░█░░░░▀▀▄░█░░░█░█▀██████░█░░
░░░░░▀▄░░░░░▀▀▄▄▄█▄█▄█▄█▄▀░░█░░
░░░░░░░▀▄▄░▒▒▒▒░░░░░░░░░░▒░░░█░
░░░░░░░░░░▀▀▄▄░▒▒▒▒▒▒▒▒▒▒░░░░█░
░░░░░░░░░░░░░░▀▄▄▄▄▄░░░░░░░░█░░
*/
});
}(Highcharts));
Highcharts/Highstock tooltip always visible # JsFiddle
For the minimalists,
(function (H) {
H.wrap(H.Tooltip.prototype, 'hide', function () {});
}(Highcharts));
does the job too ;)
Read More # Customizing Highcharts - Tooltip Visibility