I am new to Highcharts.
I have the following for a column chart:
xAxis: {
....
events: {
afterSetExtremes: function(event) {
//do some work here.
//event has a property called target
//event has another property called currentTarget
}
}
...
}
I notice that event has two properties that seem to be identical (I am not sure). Are they the same? Any differnce? I need to know the final x values shown on a chart after zooming.
Thanks and regards.
Assuming you are using jQuery, it would be the same as those in jQuery events
event.currentTarget Returns: Element
Description: The current DOM element within the event bubbling phase.
Read More # http://api.jquery.com/event.currenttarget/
event.target Returns: Element
Description: The DOM element that initiated the event.
Read More # http://api.jquery.com/event.target/
Related
When using jQuery-UI's droppable widget, the drop function returns an "ui" object in which you can access to a "draggable" object which is the DOM element of the dragged object. But with the fullCalendar's drop function, i get the "ui" object without the "draggable" one. Here's a JSFiddle in which you can test what i'm talking about : http://jsfiddle.net/vfaethbd/
$('#calendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'today prev,next'
},
droppable: true,
drop: function (date, jsEvent, ui) {
alert(JSON.stringify(ui, null, 4));
}
});
$("#droppable-area").droppable({
drop: function (event, ui) {
alert(JSON.stringify(ui, null, 4));
}
});
/* returns "draggable": {
"0": {
"jQuery111104109880250544967": 6
},
"context": {
"jQuery111104109880250544967": 6
},
"length": 1
}
*/
If you drop an event in the calendar, you won't have the draggable object, but if you drop it in the other droppable area you'll get it, since this one uses jQuery-UI.
Thanks
Implement what the external dragging example has in the drop callback:
drop: function(date) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
Full code example here and documentation about external events here.
Also, make sure your events and calendar are editable, for events this include:
allDay
durationEditable
startEditable
if not it may seem like your events lost the drag option
I want to add a reference series to my charts (i.e. a reference price). Axis.addPlotLine() does it, but I want to be able to toggle this series from the legend; a plain plotLine does not show up in the graph's legend.
Another reason why plotLine does not seem like a good solution is that it does not get accounted for by the viewport calculations. Which means that toggling other series might lead to the plotLine appearing outside the viewport due to zooming.
The simplest way to accomplish what I want would be, to add a dynamic series via chart.addSeries. But it's impossible to call this method from within a triggered addSeries event because chart.addSeries is set to null while in the event handler.
Tying in to the redraw event creates a whole lot of difficulties as well, because render() can't be called anymore.
How would you go about it?
Update:
As per the comment of Pawel Fus, I unsuccessfully tried the following:
[…]
events: {
load: function (event) {
foo = this;
},
addSeries: function(event) {
console.log(foo) // returns chart object as expected
console.log(foo.addSeries) // undefined
}
}
Solution is to store addSeries on load event, and use stored function when adding series. Live example: http://jsfiddle.net/3bQne/808/
events: {
load: function (event) {
foo = this.addSeries;
},
addSeries: function (event) {
if (iterator) {
iterator--;
foo.call(this, {
data: [100, 200, 100, 100, 200, 300]
});
}
}
},
Still you can stick with plotLine only.
If the position of the line is static that is the best way.
If the position is dynamic then you can still go with plotLine.
There are events for adding and removing plotLine on the fly.
API link
removePLotLine() : http://api.highcharts.com/highcharts#Axis.removePlotLine
addPlotLine() : http://api.highcharts.com/highcharts#Axis.addPlotLine
I hope this will help you.
I have implemented a wicked-chart which shows 4 series in the legend. Now I want to handle the series click event in legend and update some values outside the wicked highchart.
To be specific, I want to implement exactly like this jsfiddle but in java wicked-chart.
plotOptions:
{
series: {
events: {
legendItemClick: function(event) {
//Do something here
return false;
}
}
I did search all the methods of PlotOptions class but could get something similar to highcharts legendItemClick event.
My solution was not to find alternative for legendItemClick in wicket-charts as they do not have one. Instead I did this:
In your page html, give id="chart". Doing this highcharts shall fix your id to "chartVar" instead of changing it at each run.
<div wicket:id="chart" id="chart"></div>
In your javascript, define your series click using .highcharts-legend-item as below.
var onSeriesClick = function() {
var that = this;
for (var i=0;i<chartVar.series.length;i++)
{
$(".highcharts-legend-item:contains(" + chartVar.series[i].name + ")").click(function(){
// your legend click logic goes here
});
}
}
This is the problem I am having:
I have created several draggable elements but when I drop one on the droppable element, it does not stay there.
Below are more details.
My JavaScript function receives JSON array from PHP and then uses a loop to create the draggable elements:
<script type="text/javascript">
function init() {
var items = <?php echo $result_j;?>; //items is an one dimensional array
for ( var i=0; i<<?php echo $total_rows_j;?>; i++ ) {
$('<div>' + items[i] + '</div>').data( 'item_name', items[i] ).attr( 'class', 'snk_button' ).appendTo( '#drag' );
}
With the 'items' array I have created several div elements (above code) which I then turn into draggable elements (code below).
$(".snk_button").draggable( {
containment: '#drag_section',//Div #drag_section contains the Div #drag
stack: '#drag div',
cursor: 'move',
revert: true
} )
So, far everything seems to be as expected and I am able to drag my elements (created from 'items' array).
Next, I have created the droppable element as shown below:
$( "#dropp" ).droppable({
drop: function() {
alert('ok');
}
});
}// End function init()
</script>
But when I drag one of my draggable elements on this droppable element, I even get the alert, but the draggable element does not stay on the droppable element.
Can anyone please help me identify why my draggable element is not staying on the droppable element?
Thanks in advance for any help!
You have used revert :true.. It means
Revert means If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.
Probably you need invalid in case your draggable element is not dropped on proper element
Thanks very much for pointing me in the right direction.
I have solved this particular problem in the following way:
I have edited my droppable code as below:
$( "#filtered" ).droppable(
drop: handleDrop
});
function handleDrop( event, ui ) {
ui.draggable.draggable( 'option', 'revert', false );
} // End function handleDrop
This has solved the problem of the draggable not staying on the droppable (that was previously described).
I am using the UI jquery sortable plugin and have found some code that I am going to use but there is one part I don't understand. It is "onChange: "function(serialized) { widgets_positions(); }"
onChange doesn't appear in the documentation. Widgets_positions is a function that I understand about which tracks the positions of the objects being moved around. But I need to understand the 'onChange: function(serialized)' part.
$('#col').Sortable(
{
accept: 'widget',
opacity: 0.5,
helperclass: 'helper',
onChange: function(serialized) { widgets_positions(); },
handle: '.widget_title_bar'
}
);
I would imagine that is supposed to be change:
$( ".selector" ).sortable({
change: function(event, ui) { ... }
});
I have used the change event before when the order of the list is changed. ui gives you access to the dom element changed.
You could put your function call in the change event.