I am using scrollbar: {enabled: true}, but it doesn't work for advanced accessible charts in highcharts . Please share your thoughts
The scrollbar feature is available only in Highstock. You can load Highstock source code instead of Highcharts, or add stock as a module:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/stock.js"></script>
Live demo: https://jsfiddle.net/BlackLabel/q9zhfbk4/
API Reference: https://api.highcharts.com/highstock/xAxis.scrollbar
Related
Running MacOS 10.13.5 and Windows 10 in Parallels. Load Highcharts samples from https://www.highcharts.com/maps/demo/color-axis ... the map background is gray and the states only fill in as I mouse over them.
This happens in both MacOS and in Windows. Screenshot is from Highcharts site.
EDIT Per comment I edited to look like this (since I display both charts and maps from same module):
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<!-- USE MASTER BRANCH OF HIGHCHARTS MAPPING AND NOT RELEASE VERSION **** TEMP *** https://stackoverflow.com/questions/51051239/highcharts-maps-even-samples-dont-work
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
-->
<!--
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
-->
<script src="https://github.highcharts.com/master/maps/highmaps.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/data.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/exporting.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
But I get error 16. I assume I should pull all the libs from github but it looks like as well some of the names have changed?
It seems that this bug is already fixed on master branch of Highcharts:
<script src="https://github.highcharts.com/master/maps/highmaps.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/data.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/exporting.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/offline-exporting.js">
Live demo: https://jsfiddle.net/BlackLabel/teazgj5r/
Fix will be included in the next release of Highmaps.
I have read the other questions on this topic, which seem to all be based around not implementing the JS.
I have all the required scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Implemented the JS
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
My Html
<a class='hasTooltip' data-toggle="tooltip" title="Hooray!" href="index.php">Home</a>
And yet my tooltips are the standard tooltips and not the bootstrap ones. I'm using Chrome, but I can see the examples on w3schools. Any ideas?
In Bower, how do I get and continue to update a custom build of jQuery UI? Let's say I only need components for Core, Widget, Mouse, Position, Sortable, and Accordion in jQuery UI? I rather not download the entire jQuery UI library.
To give a practical example of a possible approach and to answer to Egg's comment here's a way to do it.
Just bower install the whole thing as suggested by Sindre and include only the scripts that you need in the html.
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
<script>
(function() {
$( "#some-div" ).sortable(); // it works!
})();
</script>
</body>
</html>
This will already work and reduce significantly the file size of the libraries downloaded by the user when using your app or website. Here is a post about this straight from the horse's mouth.
To further increase download speed you can then create your own bundle in your preferred way, maybe using Grunt usemin or whatever else method you fancy to get to this kind of html:
<script src="scripts/bundle.min.js"></script>
<script>
(function() {
$( "#some-div" ).sortable(); // it works!
})();
</script>
</body>
</html>
You could have your own fork, but then you would need to keep that up to date too. Just let it download the whole thing and only use the pieces you need, I don't see the problem with that.
I have followed the simple step of adding exporting in my Highstock object:
exporting: {
enabled: true
}
and it is not displaying any button.
I have also included this at the beginning of the page:
<script src="http://code.highcharts.com/2.2.4/modules/exporting.js" rel="text/javascript"></script>
Is there anything else I need to do ?
Thank you
Update:
<script src="http://code.highcharts.com/stock/1.2.5/modules/exporting.js" rel="text/javascript"></script>
<script src="http://code.highcharts.com/stock/1.2.5/highstock.js" type="text/javascript"></script>
Attempting to get an answer to this question. How can I turn off the draggable option in javascript? The api documentation is saying
.draggable({disable: true});
or
.draggable("option", "disable", true);
Neither does it for me. Here are the libraries I have.
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://jqueryui.com/jquery-1.5.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script>
I javascript I attempt to turn off the draggable option in code like this.
editable.parent().draggable({disable: true});
editable.parent().draggable("option", "disable", true);
editable.parent() does find the right element, but the draggable option isn't turned off.
Thanks for your help.
Try:
editable.parent().draggable({disabled: true});
Or:
editable.parent().draggable("option", "disabled", true);
Either should work. You forgot the 'd' on the end of disabled
1) make sure the selector is ok
2)
.draggable("disable")