I'm using react-highcharts and I'm trying to find a way to trigger an event when one of the Y-axis categories is being clicked. I'm using xrange graph.I want to get the offset of the value that was clicked. For example, if i have:
CatA
Catb
CatC
If I will click on CatB I will get 1.
I found a jquery solution, which give me the value itself. Its not a problem to get all the elements and iterate over them and found the offset myself. The solution of jquery:
$("#container .highcharts-yaxis-labels text").click(function() {
alert($(this).text());
});
I'm looking for react/react-highcarts solution for that.
Update
Thanks Kamil Kulig! Im getting trouble with the library. I import the library as
import HighchartsCustomEvents from 'highcharts-custom-events';
And nothing happned, also i added this code at componentWillMount function:
template.yAxis.events.click = function () {
alert(1);
};
I saw the docs and I didnt find any offset function, which means that sould I use jquery anyway? or do u have any idea?
Highcharts offers the custom events module that is able to handle the actions that you require.
Module reference on npm: https://www.npmjs.com/package/highcharts-custom-events
Module reference on Highcharts website: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events
Sample code:
yAxis: {
labels: {
events: {
click: function () {
// do something
}
}
}
}
Related
I have an issue discussed here: Page after canceling print doesn't resize chart.
https://github.com/highslide-software/highcharts.com/issues/1093
I am hoping to reproduce a solution mentioned there. Basically, the solution is to set global options in Highcharts as follows:
Highcharts.setOptions({
chart: {
events: {
afterPrint: function () {
alert('called');
Highcharts.charts.forEach(function (chart) {
if (chart !== undefined) {
chart.reflow();
}
});
}
}
}
});
In my case, the page works as below:
Load the page
Start an Ajax call to retrieve data and draw four charts.
I tried to use the above solution either at page load or after the ajax call. However, afterPrint was never called. Note that I put "alert('called')" there to prove it.
What is the right way to add global afterPrint?
Regards.
I got it working now. I was using version 4.0.4, with which afterPrint did not work as expected. Now I am using the latest version 4.1.9 and afterPrint works as expected without any code change on my side.
I call the global setup at the page load.
Hope this helps.
I did it in easier way by adding following in my script
Highcharts.setOptions({
chart: {
events: {
afterPrint: function () {
jQuery(window).resize()
}
}
}
});
I have been trying to implement the autocomplete and have come across a problem that has stumped me. The first time I call .autocomplete it all works fine and I have no problems. If, however, I call it after I have removed some (unrelated) elements from the DOM and added a new section to the DOM then autocomplete does nothing and reports no errors.
Code:-
$.ajax({
type : 'get',
dataType : 'json',
url : '/finance/occupations',
cache:true,
success:function(data){
occupationList = data;
$('.js-occupation').autocomplete({
source: occupationList,
messages: {
noResults: '',
results: function(){}
},
minLength : 2,
select:function(event, ui){
$('.js-occupationId').val(ui.item.id);
}
});
}
});
The background to this page is that it contains multiple sections that are manipulated as the user moves through them. Hide and show works fine and does not impact on the autocomplete. However, if I do the following:-
var section = $('.js-addressForm:last').clone();
clearForm(section);
$('div.addressDetails').append(section);
$('.js-addressForm:first').remove();
Which gives the user the bility to add multiple addresses on the previous section then the autocomplete stops working.
Any suggestions or pointers on something obvious I am missing?
I have tried to put the initialisation of the autocomplete on an event when the element gets focus and it still does not work.
You have to create the autocomplete after all other underlying objects. If you F12, you will see that the list is "visible", however it is below and hidden by all instances created after it.
If you created a div with inputs (one input being the autocomplete), then you create the automplete then the dialog instances, the autocomplete will never show. If you create the dialog then the autocomplete, no problem. The problem is the z-order
I have faced the same issue. For now to fix this, i'm creating widget on the input once input is in focus. It will help you solve the issue.
You can look for the help on
making sure some event bing only when needed
Sample code will look like this
$( "#target" ).focus(function() {
//I don't care if you manipulated the DOM or not. I'll be cautious. ;)
(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
})();
// use a flag variable if you want
});
This solved my problem. Hope its the solution you were looking f
I have a very simple question, which I can't find a solution.
when I use the click event; I log this.id, which return undefined when I am on a rendered HighCharts.
Why is that? How can I actually get the elementID where the chart is, so I can use functions that call that element? The chart is rendered on a div class, which is used for all the charts on my page (each with different ID obviously).
Event.target returns me a rect, which I can use to a certain extent, with document.mouseup, but I would like to learn how you actually identify the chart, fi I want to access it
For example, I would like to use fancybox, but it require an ID to work
$("#ID").fancybox();
EDIT:
I am able to open the chart using the href parameter, where I render the chart; but still; I have no clue how to identify programmatically a chart, once is rendered, in the click event.
Assuming you are using the chart click event and you want the original div container:
chart: {
events: {
click: function (event) {
var myDiv = this.container.parentElement;
}
}
},
This will return the element.
I want to get minortickmark value when i click on minortickmark in axis of barchart. I am getting all tickmark positions using getMinorTickPositions() in barchart. I have searched all js code in highcharts i am unable to find it.can anyone please help me. here is my code.
$('.highcharts-axis').hover(function(event) {
alert(this.x);
getAxisValue();
return false;
});
function getAxisValue(){
var chart = $('#container').highcharts();
var data= chart.xAxis[0].getMinorTickPositions();
//alert(chart.value());
alert(data);
};
In general to add click event to minor ticks will require some JS and Highcharts skills. I will try to guide you a little:
chart.xAxis[0].minorTicks - this is where all minor ticks are stored
to add click event to minorTick, use: chart.xAxis[0].minorTicks['value'].mark.on('click', callback)
now in callback you can do your stuff for specific minor tick
I have a wordpress site where you can view posts in two ways. You can view them on their single page or you can click on thumbs from the homepage and view them in an ajax popup that shows the full post. My problem obviously is that Analytics isn't counting the popup views. I use a template to popup the post and I'm looking for a way to make analytics recoginze it as a page view and tell me what post it was. I tried adding the analytics code to the top of the template page but that didn't do anything. Any ideas? I use the SimpleModal jquery plugin to popup posts and call them like this.
jQuery(document).ready(function() {
jQuery('a.postpopup').live('click', function(){
var id = jQuery(this).attr('rel');
jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load('http://mysite.com/ajax-handler/?id='+id).modal({
opacity:90,
position: ["0%"],
containerCss:{width:"100%"},
overlayClose:true,
onOpen: function (dialog) {
dialog.overlay.fadeIn('200', function () {
dialog.data.hide();
dialog.container.fadeIn('500', function () {
dialog.data.fadeIn('slow');
});
});
},
onClose: function (dialog) {
dialog.data.fadeOut('slow', function () {
dialog.container.hide('500', function () {
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
});
});
}
});
return false;
});
});
you can simulate a page view by using _trackPageView
Google Analytics has several options to track non-pageview related user activity that I think you could use here:
Virtual pageviews - as mentioned by user273895, you can add the call to your code when the dialog pops-up to see a "fake" pageview in your reports with a title like '/popup/post-name'
Events - you can instrument the above call with an event, for example: _trackEvent("popup", "click", "post-name"). The interaction is then trackable in the event reports and can be used to specify additional segments and filters for more advanced analysis.
Custom variables - you can set up a page or session level custom variable to record the interaction.
I'd suggest the first 2 options. Personally I tend to use events for this sort of thing but in your case it may make more sense to use a virtual pageview.