Javascript Highcharts High buttons and calender with jquery - javascript

I am using Highchart / Javascript and I am looking for a way to hide the buttons and calender (see image below) with css or jquery.
How can I do this?

Highcharts do not have date range selector, Highstocks do.
See documentation for rangeSelector, in particular rangeSelector.enabled.

Related

fullcalendar Make more emphasis in BusinessHours

It is possible to emphasize business hours in fullcalendar by changing the background of these cells so as to make them more visible?
It's not possible to set via js of fullcalendar, just via css.
there are two examples:
Is it possible to do alternating row background colours in FullCalendar?
FullCalendar highlight row
cheers
Edit
There is a solution; Background Events an example:
How to grey out non working day in agendaDay view with arshaw fullcalendar v2.3.0

Choosing dates that are selectable in js for a datepicker

I want a datepicker that makes dates previous from current date unselectable. I am new to js and would like a to know how to do it. I did not know what to google exactly and didn't find the right answer. Pls help!
There are several JS datepicker solutions out there and most of them have pretty straightforward solutions to do what you want. E.g. JQuery UI Datepicker and Bootstrap Datepicker.
Here you can see an example of doing this with JQuery UI Datepicker.

Draggable Highcharts SVG Element

The demo here:
http://www.highcharts.com/demo/renderer
Is it possible to drag those labels around with the library? Or do we need jQuery UI?
Edit: I've tried to manipulate the SVG elements with jQuery UI draggable but it didn't not work
I'm interested to know, for those who have used this library, can I drag labels in this demo using the library?
It is stated in the download section that you can use the library with or without jQuery. Your answer was one click away...

Change dropdrown length select to buttons - jQuery DataTables

Is it possible to change the Datatables drop down length select to buttons representing [10][25][50][100]. So that if we click on the number we can change the length of the table with pagination.
I tried many manipulations which are given in
http://www.datatables.net/plug-ins/api/ but of no use please suggest me how to change the drop down to buttons
There is a feature plug-in for DataTables that provides that ability here:
https://github.com/DataTables/Plugins/tree/master/features/lengthLinks.
If we plug the dataTables.lengthLinks.js its working fine. and the implementation is clearly given in js.

How to adapt a highstocks chart to a very narrow container?

They want a 260px-wide highstocks chart! Understandably, this causes the range selector with its input controls to get written on top of itself. I see that I can disable the input controls but then I can't really see what range has been selected using the navigator.
Would I use an event to capture the range selected (in the rangeSelector or the navigator) and display it in a nearby control?
I'm using v1.3.9. Thanks for any suggestions.
yes you can absolutely do that.
Highcharts provide events for these
you can find them
xAxis -> events -> afterSetExtremes/setExtremes
These 2 events will help you to capture the new limits when the range is changed. You can have your javascript code and work on it.
api ref : http://api.highcharts.com/highstock#xAxis.events
you can find a worked out example along with some explanation in that link.
I hope this will help you.

Categories

Resources