We are investigating multiple new web development stacks in an effort to get away from VB.NET. I have created a page using Svelte 3 architecture to replicate what we have on one existing .NET-based page. We use Highcharts for our charting library. I am able to get the charts to show up. However, other logic we use to get list of all charts on the page always returns an empty array:
export const DestroyChartReferenceByClassName = (className) => {
var cssClassName = className;
jquery(Highcharts.charts).each(function (i, chart) {
if (typeof chart !== 'undefined') {
if (chart.container.classList.contains(cssClassName)) {
chart.destroy();
}
}
});
};
When I call this method it runs without errors. However, Highcharts.charts is an empty array. What is the preferred method to iterate over the Highchart charts on a Svelte page?
Related
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
}
}
}
}
I want to use highcharts to display an initial set of data and then every two seconds add a new data point.
I am subscribing to an external WebSocket services that initially provides me with the data and then sends me a new value every two seconds.
I am using the events option in Highcharts to try and get the data out of the vuex store. Here is my code.
chart:{
type: 'spline',
animation: '',
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
series.addPoint([this.$store.getters.getTickEpoch, this.$store.getters.getTickQuote], true, true);
}.bind(this), 1000);
}.bind(this)
}
}
The problem is that if I don't add .bind(this) to my functions, I can't see the vuex store, but when I do add .bind(this) then var series = this.series[0]; no longer works.
How do I use vuex data to update my chart in real time?
The answer was to use the vue-highcharts plugin. This resolved all my problems and allowed me to very quickly setup a real time chart by following the simple examples.
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 am currently working on a interface which requires an autocomplete of locations.
The list of locations is currently obtained via an AJAX call to a JSON object which is generated dymanically from a URL which has a search parameter of at least three characters.
Is there a way (im guessing most likely using an on key up), to populate the autocomplete by making an ajax call using the input current value and then returning these values in the autocomplete selection, rather than relying on jquery to create the autocomplete list from its source.
What I have currently appears to be inefficient and doesn't work as you might expect (for some reason the autocomplete only appears after four characters).
function buildAutoComplete(fieldId) {
var inputValue = $("#" + fieldId).val()
var resultsList = []
if(inputValue.length > 2) {
get("/location?prefix=" + inputValue,inputHit,inputMiss);
}
function inputHit(result) {
for(var i=0; i<result.length; i++) {
resultsList[i] = result[i].display_text
}
$("#" + fieldId).autocomplete({
source: resultsList
});
}
function inputMiss() {
}
}
$("#originField").keyup(function() {
buildAutoComplete("originField");
});
It turns out I was going about this completely the wrong way.
The autocomplete API which I knew allowed a remote source automatically includes a URL parameter of term, of the input value.
So the resulting code looks like
$("#originField").autocomplete({
minLength: 3,
source: "/location"
});
All it needed was the code at the back of the source to look for the parameter 'term' rather than 'prefix'.
Considerably more stable with a less complex and smaller code base.
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.