Highstock date input jquery ui datepicker position changes - javascript
In Highstock, you can use the jquery ui datepicker instead of inputting text into the date fields, as in this demo... http://jsfiddle.net/hcharge/aNde9/
datepicker
Clicking the input once, opens the datepicker where it should be below the input field, however if you close it and open it again it then sticks to the top of the container. Implemented in a webpage this would be the top of the browser window.
Is this a known issue?
The datepicker controls its vertical position through the 'top' attribute of the widget's style - for some reason the 'top' is always set to 0 in subsequent datepicker activations.
It is relatively easy to workaround though if we have the widget's data 'remember' the correct position and explicitly set that position in the subsequent calls.
See the 'onClose' and 'beforeShow' functions defined within the datePicker options below:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1,
inputDateFormat: '%Y-%m-%d',
inputEditDateFormat: '%Y-%m-%d'
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
}, function(chart){
// apply the date pickers
setTimeout(function(){
$('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
.datepicker({
beforeShow: function(i,obj) {
$widget = obj.dpDiv;
window.$uiDatepickerDiv = $widget;
if ($widget.data("top")) {
setTimeout(function() {
$uiDatepickerDiv.css( "top", $uiDatepickerDiv.data("top") );
},50);
}
}
,onClose: function(i,obj) {
$widget = obj.dpDiv;
$widget.data("top", $widget.position().top);
}
})
},0)
});
});
Here's a link to jsFiddle
You need to set the same input formats, so or change in datepicker dateFormat to the same as in Highstock , or change inputRangeFormat in Highstock.
Related
Threshold value change on click of rangeSelector in HighStock graph
I need to change the threshold value on click of rangeSelector in HighStock graph. Also, I need to change the line value inside PlotLines of y-axis. I tried following code xAxis: { events:{ setExtremes: function(e) { if (e.trigger == "rangeSelectorButton" && e.rangeSelectorButton.text == "1m"){ // this.threshold = 20; alert("on click of 1m range selector"); // for threshold value this.threshold=20; this.series[0].plotOptions.threshold=20; this.plotOptions[0].series[0].threshold=20; this.rangeSelector.clickButton(0, true); // for changing the line value of plotLines this.yAxis[0].plotLines[0].value=20; } }, } }, Click here for jsfiddle link I have put some alert to test that click on rangeSelector is working fine. I tried to change the values but the chart is not getting updated. Any help would be really appreciated.
Inside setExtremes, this references the xAxis object. The threshold is on the series object, so you need to get a reference to the right series. var series = this.chart.series[0]; Then, you need to update it with the new value. series.update({threshold: threshold}, false); I'm passing false for the redraw parameter, since we're also going to update the plotLine, and we'll only want to redraw once. For the plotLine, you'll need a reference to the yAxis. var yAxis = this.chart.yAxis[0]; And, then you'll need to pass the new plotLine settings to the update method. yAxis.update({ plotLines: [{ value: threshold, color: 'green', dashStyle: 'shortdash', width: 2, label: { text: 'Last quarter minimum' } }] }); https://jsfiddle.net/w6bzohgd/3/
Morris donut chart - extract label into items
I'm currently running into a problem using the morris donut chart. In general, my project is required to be available on both touch devices as well as standard devices. We have set the donut chart up so that clicking on one section links you to another page which filters content based on which section you clicked. This one is working like a charm - but not on mobile devices. As hovering brings up the description of the section (in our case a priority plus how many items with that specific priority exist) and hovering is not possible on touch devices, we can't display what's behind the section. Thus: Is there any possibility to get the description that appears when hovering over an item into the specific item? Thank you and kind regards To clarify my issue I've created a professional illustration: I have my HTML code: <div id="morris-donut-chart"></div> <div id="morris-label"></div> And my Javascript code to initialize the donut chart: $(function() { // Donut Chart Morris.Donut({ element : 'morris-donut-chart', data : [{ label : "Niedrig", value : 5 }, { label : "Normal", value : 1 }, { label : "Hoch", value : 5 }, { label : "Kritisch", value : 11 }], resize : true, colors : ['#fff', '#fff', '#fff', '#fff'] }).on('click', function(i, row){ window.location = "/"; }); }); and my functions to "outsource" the text: function outsourceMorrisDonutChartLabel() { //$("#morris-donut-chart tspan:first").css("display","none"); //$("#morris-donut-chart tspan:nth-child(1)").css("font-size","40px"); var lab = $("#morris-donut-chart tspan:first").html(); var val = $("#morris-donut-chart tspan:last").html(); $('#morris-label').text(lab + ": " + val); } $(document).ready(function() { outsourceMorrisDonutChartLabel(); }); $("#morris-donut-chart").mouseover(function() { outsourceMorrisDonutChartLabel(); }); The main problem now is to get the outsourced text which currently is inserted into the div with the id "morris-label" into the morris sections as shown in the image
Updating fontsize with highcharts using zoomtype
I have a column chart in Highcharts with a big number of columns so the columns are very small. That's fine but I want to do zoom. So I used zoomtype: 'x' and it work well. The problem is that I want to make the font bigger on the xAxis when they are selected. I tried by doing this: chart: { type: 'column', zoomType: 'x', events: { redraw: function(event) { if(this.xAxis[0].tickPositions.length>80){ this.xAxis[0].options.labels.style.fontSize = 1; }else{ this.xAxis[0].options.labels.style.fontSize = 20; console.log(this.xAxis[0].options.labels.style.fontSize); } } } } When I check the console the value of this.xAxis[0].options.labels.style.fontSize is updated to 20. This code works only when I press the Reset zoom button. So my question is how can I update the chart when the event is triggered so it takes the same effects as if I use the Reset zoom button? Or how can I make changes in the font when I make zoom and when reseting the zoom?
You can catch afterSetExtremes event and then axis.update() with new styles for bales. events:{ afterSetExtremes:function(){ this.update({ labels:{ style:{ fontSize:20 } } }); } } Example: http://jsfiddle.net/m180dxsu/
Code works on fiddle but not when I do /show
Everything works on jsfiddle, but when I add /show after the whole address, the code doesn't fully function. For instance, I can adjust the range in jsfiddle, but on /show, I can't select a specific range. I know there are some similar questions like mine, but none of them asked about why /show wouldn't work if my code with jsfiddle works. Here are the links to my code: code: $(document).ready(function() { // $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { // Create the chart $('#container').highcharts('StockChart', { // rangeSelector : { // inputEnabled: $('#container').width() > 2000, // selected :1 // }, title : { text : 'AAPL Stock Price' }, series : [{ name : 'AAPL Stock Price', data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], lineWidth : 0, marker : { enabled : true, radius : 2 }, tooltip: { valueDecimals: 2 } }, { name : 'AAPL Stock', data : [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], lineWidth : 0, marker : { enabled : true, radius : 2 }, tooltip: { valueDecimals: 2 } }] }); }); I know this is a very simple, dumb code, I was just testing how much data highStock can handle. jsfiddle: http://jsfiddle.net/57LJG/3/ /show: http://jsfiddle.net/57LJG/3/show
Set a maximum width for the container to fix this buggy chart like here, apparently something goes wrong with large widths resulting in an error Cannot read property 'r' of undefined, this seems to fix the problem: <div id="container" style="height: 400px; min-width: 310px; max-width:1024px"></div>
Indeed, it looks like a bug in 1.3.10 version (1.3.9 works fine: http://jsfiddle.net/57LJG/14/show/). Workaround is indeed to set max-width, but that will work only for a certain datasets (different number of points == different max width). I have already reported this here: https://github.com/highslide-software/highcharts.com/issues/2834 Thanks!
How to remove vertical plotlines on highcharts
Suppose I add some vertical lines labeling with different names. Now I want to delete any line by clicking on the line. How do I do that...someone please help. Thanks in advance.
Here is what you can do to click a plotLine and have it instantly removed: In the xAxis config, add a plotLine with a click event: xAxis: { plotLines: [{ // mark the weekend id: 'plotLine1', color: 'red', width: 2, value: Date.UTC(2010, 0, 4), events: { click: function(e) { this.axis.removePlotLine(this.id) } } }], tickInterval: 24 * 3600 * 1000, // one day type: 'datetime' }, Here is a fiddle to show it work: Click Here To get rid of the grid lines, you can just color them transparent inside the yAxis config: yAxis: { ... gridLineColor: 'transparent', } Edit for new Question: To remove the lines in this example, you can just add the event config to the new plotLines - like this: // Inside chart event click function: chart.addPlotLine({ value: event.xAxis[0].value, color: '#'+(Math.random()*0xEEEEEE<<0).toString(16), width: 2, // added label to id so the id is unique: id: 'vertLine_'+label, zIndex: 9999, // added plotLine event click - same as before. events: { click: function(e) { this.axis.removePlotLine(this.id); } }, label : { text : label } }); Also, it looks like you're trying to make the chart NOT add a label if there is no text entered by the prompt. To do this, I would recommend adding a condition && label != '' to your if-statement so in total it looks like if(label!=null && label != ''). I got this tip from This site. Here is the updated fiddle: Click Here. Note: to successfully click on the line every time, aim for the left side. Idk why, but this worked better for me. Hope this helps!
You can also catch click event by custom-events plugin and destroy SVG element (line+label)