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.
Related
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?
I have multiple highcharts and I need to update all of the x-axes to a common new value from a numeric input.
In my real example, this operation is rather slow. I was wondering if I can somehow implement an async function here?
I tried to reproduce my issue here: https://jsfiddle.net/fmattioni/vcn9bxyo/2/
Thanks!
Disabling the update animation and using setExtremes method will be enough:
function updateAxes() {
var newX = document.getElementById("update_axes").value;
Highcharts.charts.forEach(chart => {
chart.xAxis[0].setExtremes(null, newX, true, false);
});
}
Live demo: https://jsfiddle.net/BlackLabel/62a3sLc7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
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 am drawing various charts on a page, and would like to avoid to have to declare in each chart, the properties that are common to every chart.
I tried an example found online, where the common part was in a {settings}, but when I try to load it, I had no luck.
I am using Highcharts. Any suggestion is more than welcome....with 16 charts on one page, I am just going crazy.
You can use merge function. See the example:
http://jsfiddle.net/nyQ2L/
var defaultOptions = {
chart:{
type:'line'
},
title: {
text:'common title'
}
};
var opt1 = Highcharts.merge(defaultOptions,{
series:[{
data:[1,2,3]
}]
});
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