I would like to change/customize highcharts' animation when adding new point.
series.addPoint([x, y], true, false);
Here is an example of hightcharts' default animation :
http://jsfiddle.net/pe4csrr7/
On click on a button (next or prev) you can see that the new bars appears behind the last one.
Instead of this default animation, I would like to see the bars coming from outside the graph. Here is an example of what I want : http://jsfiddle.net/smsducrg/ (Warning : the animations of this example is not always the same, after a while the default animation will come back, I don't know why...)
Thanks.
Maybe instead of using chart.redraw() you can use xAxis.setExtremes() for redrawing your chart.
http://api.highcharts.com/highcharts/Axis.setExtremes
I think that with small trick you will be able to achieve what you would like to.
$(function() {
var chart = $('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['0', '1', '2', '3', '4', '5', '6']
},
series: [{
data: [1, 1, 1, 1, 1, 1, 1],
cropThreshold:0
}]
});
$('#prev').attr('start', 0);
$('#next').attr('end', 6);
$('#prev').off('click').on('click', function() {
var next = parseInt($('#next').attr('end'), 10) - 1;
var prev = parseInt($('#prev').attr('start'), 10) - 1;
var chart = $('#container').highcharts();
chart.series[0].addPoint({
x: prev,
y: 1
}, false, false);
chart.xAxis[0].setExtremes(prev + 1, next)
chart.xAxis[0].setExtremes(prev, next)
$('#next').attr('end', next);
$('#prev').attr('start', prev);
});
$('#next').off('click').on('click', function() {
var next = parseInt($('#next').attr('end'), 10) + 1;
var prev = parseInt($('#prev').attr('start'), 10) + 1;
var chart = $('#container').highcharts();
chart.series[0].addPoint({
x: next,
y: 1
}, false, true);
chart.xAxis[0].setExtremes(prev, next - 1)
chart.xAxis[0].setExtremes(prev, next)
$('#next').attr('end', next);
$('#prev').attr('start', prev);
});
});
You need to add bigger cropThreshold than default if you want to have this animation also after many button clicks (so for example when you will add 50 points).
Here you can see an example how it can work: http://jsfiddle.net/pe4csrr7/5/
Related
In my chart I have these time stamp that are displayed on the x-axis
How do I make them display in the tooltip when I hover over to certain point in the chart?
Highcharts.chart('container', {
...
xAxis: {
labels: {
formatter: function() {
let seconds = this.value * 5;
let t = new Date(1900, 1, 1, 9, 30, 0);
t.setSeconds(t.getSeconds() + this.value * 5);
return `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`
}
},
tickInterval: 2
},
});
Can someone please help as I am not able to figure this out?
You can use the same approach in pointFormatter as in the labels formatter function.
tooltip: {
pointFormatter: function(){
let t = new Date(1900, 1, 1, 9, 30, 0);
t.setSeconds(t.getSeconds() + this.x * 5);
return `
Time: ${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}
Y: ${this.y}
Value: ${this.value}
`
}
}
Live demo: https://jsfiddle.net/BlackLabel/jf9x8y3q/
API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormatter
The Highcharts API has a pointFormat property for tooltips, where you can specify the HTML (e.g. <p>Tooltip data: {variable}</p>). You can find the API reference here: https://api.highcharts.com/highcharts/tooltip.pointFormat
Or you could use pointFormatter to specify a callback function instead (https://api.highcharts.com/highcharts/tooltip.pointFormatter).
I have a area chart which is having a dynamic point that will be added to chart.I got this http://jsfiddle.net/rjpjwve0/
but it looks like the point gets displayed first and then after a delay the chart draws back. Now i want to display the last point which will be a animated point and it should travel with chart without delay in rendering.
Could any one help me to achieve this.
I put together a test, and it seems to work well.
I updated the load event to add a second series, using the same series.data[len -1] values; then in the setInterval portion, we update that new point at each iteration.
That way, by updating the existing marker rather than destroying one marker and creating another, the animation works as desired.
Code:
events: {
load: function () {
var series = this.series[0],
len = series.data.length;
//-------------------------------------
//added this part ->
this.addSeries({
id: 'end point',
type: 'scatter',
marker: {
enabled:true,
symbol:'circle',
radius:5,
fillColor:'white',
lineColor: 'black',
lineWidth:2
},
data: [[
series.data[len - 1].x,
series.data[len - 1].y
]]
});
var series2 = this.get('end point');
//-------------------------------------
setInterval(function () {
var x = (new Date()).getTime(),
y = Math.random();
len = series.data.length;
series.addPoint([x,y], true, true);
//and added this line -->
series2.data[0].update([x,y]);
}, 1000);
}
}
Fiddle:
http://jsfiddle.net/jlbriggs/a6pshutt/
You can try this :
series: [{
name: 'Random data',
marker : {
enabled : false,
lineWidth: 0,
radius: 0
},
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
Its works.
Greg.
I'm wondering if there is a way to apply dynamic settings to individual marker of an highstock chart? I've searched for half a day and I have the feeling that there is a problem with the API. It seems that there is no ways to adjust marker setting on a specific datum. ex:
$('#container').highcharts('StockChart', {
chart : {
events : {
load : function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
series : [{
data : (function () {
var data = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i += 1) {
data.push([
{ x: time + i * 1000,
y: Math.round(Math.random() * 100),
marker:{
fillColor:'red'
}
}
]);
}
return data;
}())
}]
}
I've fork a basic Highstock demo to illustrate my point. See the jsfiddle that demonstrate the problem: http://jsfiddle.net/9xj0nz72/1/
Maybe I have an error in my fiddle... or may I have to create an issue on Github?
Thanks a lot!!
I had to assign the style in the addPoint method, you can't just push to the data array. And you have to use it on the chart = new Highcharts.StockChart() variable.
I'm pretty sure I got what you were hoping for using the following. And to demonstrate I assigned a random color and radius to each new point.
$(function () {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Random data',
data: [],
time: (new Date()).getTime()
}]
});
/* add new random point every 1 second */
var i = 0;
setInterval(function () {
i++;
chart.series[0].addPoint({
marker: {
/* assign a random hex color and radius */
fillColor: '#' + (Math.random() * 0xFFFFFF << 0).toString(16),
radius: Math.floor(Math.random() * 10) + 1
},
y: Math.random() * 100,
x: i * 1000,
}, true, false);
}, 1000);
});
Your updated JSFiddle
The problem I am encountering is that the black line is doing some funky stuff compared to the blue line. If you scroll in the middle or somewhere else (use bottom scroll tool), you can clearly see that the black line is changing its shape, while the blue line holds its shape, strange. This only happens when you use the scroll tool.
How can I prevent the black line changing its shape? Copy this code and replace it with the JSfiddle to see the problem:
$(function () {
Highcharts.setOptions({
global : {
useUTC : false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart : {
events : {
load : function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series1.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title : {
text : 'Live random data'
},
exporting: {
enabled: false
},
series : [{
name : 'diagram1',
data : (function () {
// generate an array of random data
var data1 = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i += 1) {
data1.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data1;
}())
},
{
name : 'diagram2',
data : (function () {
// generate an array of random data
var data2 = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i += 1) {
data2.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data2;
}())
}]
});
});
The only thing I have done is to add an extra dynamic line (black one) to the diagram. Here is the original code without the black line. Review original code
The reason of the movement in the black line is the redraw and the animation function of the chart. For some reason the first series(blue line) doesn't show animation after calling addPoint so you don't see the movement. The second parameter in the addPoint function is redraw. Setting it to false for the second series(black line) will stop the movement when updating the points:
series1.addPoint([x, y], false, true);
Here's the DEMO.
First time ever working with JS and HighCharts... But I'll try to formulate a question so it'll make sense!
At the moment I'm working with only 4 sources of data, which is incredibly easy to throw right in to highcharts.
The problem is, the 4 aggregated numbers is... well, not very consistent.
The numbers I have atm is: 349531093, 156777100, 572480, 7 and 0.
The first number and the second covers the whole funnel, which makes the plot very unattractive and hard to visually see the values.
(Yeah, yeah - the labels are brilliant, but I want to be able to visually see each section).
I've been reading through the documentation of the funnel plot, but I cannot find a way to limit the section size in any way.
So I tried to play around a bit with the different kind of limits, like:
minSize - The minimum size for a pie in response to auto margins. The pie will try to shrink to make room for data labels in side the
plot area, but only to this size. (which does exactly what it says,
so I'm not sure why I even tried it...)
size - that ofc just changed the size of the whole chart....
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
minSize: '10%',
color: 'black',
softConnector: true
},
neckWidth: '50%',
neckHeight: '50%',
minSize: '20%',
//-- Other available options
height: '200'
// width: pixels or percent
}
You can see my horrible attempt here at it here: JSFiddle thingy
So to the actual question: Is it possible to set an minimum limit for the section in the funnel?
Any suggestions or just a simple: "dude, not possible" is appreciated!
Cheers!
Unfortunately this is not supported (good idea to post this on userVoice!)
However I have created simple example that you can preprocess data and still display proper values: https://jsfiddle.net/69eey/2/
$(function () {
var dataEx = [
['Raw Events', 349531093],
['Filtered/Aggregated Events', 156777100],
['Correlated Events', 2792294],
['Use Case Events', 572480],
['Finalized', 0]
],
len = dataEx.length,
sum = 0,
minHeight = 0.05,
data = [],
i;
for(i = 0; i < len; i++){
sum += dataEx[i][1];
}
for(i = 0; i < len; i++){
var t = dataEx[i],
r = t[1] / sum;
data[i] = {
name: t[0],
y: ( r > minHeight ? t[1] : sum * minHeight ),
label: t[1]
}
}
It is only workaround of course. You also need to use formatter for a tooltip to make sure you will display proper values (like for dataLabels).
I took Paweł Fus's great example and extended it to include the tooltip correction. Just add the snippet below:
tooltip: {
formatter: function() {
return '<b>'+ this.key +
'</b> = <b>'+ Highcharts.numberFormat(this.point.label, 0) +'</b>';
}
},
JSFiddle with a working example:
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/funnel.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var dataEx = [
['Raw Events', 349531093],
['Filtered/Aggregated Events', 156777100],
['Correlated Events', 2792294],
['Use Case Events', 572480],
['Finalized', 0]
],
len = dataEx.length,
sum = 0,
minHeight = 0.05,
data = [];
for(var i = 0; i < len; i++){
sum += dataEx[i][1];
}
for(var i = 0; i < len; i++){
var t = dataEx[i],
r = t[1] / sum;
data[i] = {
name: t[0],
y: ( r > minHeight ? t[1] : sum * minHeight ),
label: t[1]
}
}
$('#container').highcharts({
chart: {
type: 'funnel',
marginRight: 100
},
title: {
text: 'SEIM Metrics',
x: -50
},
tooltip: {
//enabled: false
formatter: function() {
return '<b>'+ this.key +
'</b> = <b>'+ Highcharts.numberFormat(this.point.label, 0) +'</b>';
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function(){
var point = this.point;
console.log(point);
return '<b>' + point.name + '</b> (' + Highcharts.numberFormat(point.label, 0) + ')';
},
minSize: '10%',
color: 'black',
softConnector: true
},
neckWidth: '50%',
neckHeight: '50%',
//-- Other available options
height: '200'
// width: pixels or percent
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: data
}]
});
});
You can try normalizing the values first by taking log.
log(349531093)=8.5
log(572480)=5.75