How to implement motion video highchart on Reactjs

How to implement motion video highchart on Reactjs - javascript

I am able to make bubble chart using highchart library. But is there any way we can implement motion to it.
Example link is below
http://jsfiddle.net/gh/get/library/pure/larsac07/Motion-Highcharts-Plugin/tree/master/demos/map-australia-bubbles-demo/
My problem is motions.js and bubble.js are external files. Here in react we are using render method to render highchart.
Below state options will be having motion object and series like below
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels: [20181031, 20181101, 20181102, 20181103, 20181104, 20181105, 20181106, 20181107, 20181108, 20181109, 20181110, 20181111, 20181112, 20181113]
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data: [{ "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 38.42, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 38.17, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 38.75, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 37.92, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 37.08, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 37.75, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 37.83, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 37.5, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 38.08, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 36.92, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 13, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 36, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 13, "y": 0, "z": 6, "name": "California" }, { "color": "rgba(67, 67, 72, 0.5)", "fillColor": "rgba(67, 67, 72, 0.5)", "x": 13, "y": 0, "z": 6, "name": "California" }]
}]
return (
<div>
<Highcharts
config={this.state.options}
/>
</div>
);

I recommend you to use highcharts-react-official wrapper: https://www.npmjs.com/package/highcharts-react-official
By using this wrapper, you can in easy way add additional plugins or modules. Below I created a live example with Motion-Highcharts-Plugin.
Live demo: https://codesandbox.io/s/6j359qpr6r

Related

ApexChart column resize on zoom

I would like to resize the columns width when the user zoom on my chart. Could you suggest any method or option? I searched through the documentation but I didn't find any solution. Until now I tried by changing the bar width percentage, the responsive option and the stroke width. The stroke has the side effect of overlapping the bars but I need them separate
Before Zoom
After Zoom actual behaviour
After Zoom desired behaviour
Code used until now
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Bar with Custom DataLabels</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
<script>
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"><\/script>'
);
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill#1.2.20171210/classList.min.js"><\/script>'
);
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
);
</script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
var _seed = 42;
Math.random = function () {
_seed = (_seed * 16807) % 2147483647;
return (_seed - 1) / 2147483646;
};
</script>
</head>
<body>
<div id="chart"></div>
<script>
var options = {
series: [
{
name: 'Net Profit',
data: [
95, 4, 48, 95, 71, 16, 44, 98, 75, 94, 28, 61, 76, 1, 54, 90, 19,
5, 37, 57, 88, 31, 41, 59, 27, 96, 20, 65, 84, 49, 67, 73, 78, 22,
75, 82, 67, 16, 4, 95, 84, 100, 76, 88, 66, 65, 14, 15, 46, 23,
48, 91, 23, 18, 32, 15, 71, 73, 28, 2, 61, 21, 63, 30, 35, 62, 29,
11, 71, 95, 43, 9, 59, 20, 85, 46, 59, 82, 4, 54, 60, 11, 15, 51,
34, 12, 19, 45, 2, 89, 3, 6, 60, 17, 57, 16, 90, 13, 46, 8,
],
},
{
name: 'Revenue',
data: [
97, 46, 49, 16, 11, 41, 36, 38, 16, 89, 71, 42, 68, 79, 52, 64,
40, 38, 29, 32, 50, 74, 88, 76, 65, 50, 66, 56, 42, 45, 46, 39,
29, 57, 68, 75, 34, 5, 100, 47, 79, 76, 53, 78, 39, 46, 13, 80,
22, 61, 67, 61, 17, 86, 65, 76, 82, 63, 27, 58, 64, 6, 100, 39,
25, 39, 14, 79, 12, 44, 9, 72, 63, 96, 27, 77, 70, 36, 100, 96, 5,
36, 89, 25, 67, 53, 61, 86, 64, 46, 52, 41, 56, 1, 93, 45, 49, 23,
35, 11,
],
},
{
name: 'Free Cash Flow',
data: [
20, 32, 92, 20, 36, 25, 4, 61, 77, 49, 11, 74, 15, 21, 49, 52, 11,
12, 12, 21, 78, 47, 95, 6, 68, 51, 66, 29, 67, 22, 100, 66, 42,
48, 8, 94, 87, 74, 43, 72, 90, 34, 66, 23, 82, 79, 64, 79, 89, 53,
25, 70, 25, 48, 43, 11, 17, 63, 30, 100, 79, 29, 41, 3, 99, 78,
93, 53, 12, 99, 30, 76, 30, 18, 5, 11, 16, 38, 49, 87, 21, 67, 41,
28, 13, 82, 1, 88, 79, 53, 3, 63, 61, 4, 5, 75, 83, 62, 17, 43,
],
},
],
annotations: {
points: [
{
x: 'Bananas',
seriesIndex: 0,
label: {
borderColor: '#775DD0',
offsetY: 0,
style: {
color: '#fff',
background: '#775DD0',
},
text: 'Bananas are good',
},
},
],
},
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
columnWidth: '100%',
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 2,
},
grid: {
row: {
colors: ['#fff', '#f2f2f2'],
},
},
xaxis: {
labels: {
rotate: -45,
},
categories: [
31, 48, 33, 88, 5, 91, 76,
],
tickPlacement: 'on',
},
yaxis: {
title: {
text: 'Servings',
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: 'horizontal',
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [50, 0, 100],
},
}
};
var chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
</script>
</body>

this is not a complete answer but wanted to share my findings.
IMO the functionality the OP requests should be the default behavior.
regardless, I found that by using the zoomed event, we can find the x-axis range of the zoom.
then remove the data points from the series that are outside of that range and re-draw the chart.
which results in exactly the desired behavior.
however, this kills the ability to zoom out to original series.
to make this work, I think you would need to implement custom zoom buttons,
to allow keeping track of which action occurred, zoom in or out.
this would allow you to know which data points to include when the chart is re-drawn.
you can use the zoomX method to manually set the zoom level.
see following working snippet for zoom-in only functionality.
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Bar with Custom DataLabels</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
<script>
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"><\/script>'
);
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill#1.2.20171210/classList.min.js"><\/script>'
);
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
);
</script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
var _seed = 42;
Math.random = function () {
_seed = (_seed * 16807) % 2147483647;
return (_seed - 1) / 2147483646;
};
</script>
</head>
<body>
<div id="chart"></div>
<script>
var data = [
{
name: 'Net Profit',
data: [
95, 4, 48, 95, 71, 16, 44, 98, 75, 94, 28, 61, 76, 1, 54, 90, 19,
5, 37, 57, 88, 31, 41, 59, 27, 96, 20, 65, 84, 49, 67, 73, 78, 22,
75, 82, 67, 16, 4, 95, 84, 100, 76, 88, 66, 65, 14, 15, 46, 23,
48, 91, 23, 18, 32, 15, 71, 73, 28, 2, 61, 21, 63, 30, 35, 62, 29,
11, 71, 95, 43, 9, 59, 20, 85, 46, 59, 82, 4, 54, 60, 11, 15, 51,
34, 12, 19, 45, 2, 89, 3, 6, 60, 17, 57, 16, 90, 13, 46, 8,
],
},
{
name: 'Revenue',
data: [
97, 46, 49, 16, 11, 41, 36, 38, 16, 89, 71, 42, 68, 79, 52, 64,
40, 38, 29, 32, 50, 74, 88, 76, 65, 50, 66, 56, 42, 45, 46, 39,
29, 57, 68, 75, 34, 5, 100, 47, 79, 76, 53, 78, 39, 46, 13, 80,
22, 61, 67, 61, 17, 86, 65, 76, 82, 63, 27, 58, 64, 6, 100, 39,
25, 39, 14, 79, 12, 44, 9, 72, 63, 96, 27, 77, 70, 36, 100, 96, 5,
36, 89, 25, 67, 53, 61, 86, 64, 46, 52, 41, 56, 1, 93, 45, 49, 23,
35, 11,
],
},
{
name: 'Free Cash Flow',
data: [
20, 32, 92, 20, 36, 25, 4, 61, 77, 49, 11, 74, 15, 21, 49, 52, 11,
12, 12, 21, 78, 47, 95, 6, 68, 51, 66, 29, 67, 22, 100, 66, 42,
48, 8, 94, 87, 74, 43, 72, 90, 34, 66, 23, 82, 79, 64, 79, 89, 53,
25, 70, 25, 48, 43, 11, 17, 63, 30, 100, 79, 29, 41, 3, 99, 78,
93, 53, 12, 99, 30, 76, 30, 18, 5, 11, 16, 38, 49, 87, 21, 67, 41,
28, 13, 82, 1, 88, 79, 53, 3, 63, 61, 4, 5, 75, 83, 62, 17, 43,
],
},
];
var options = {
series: data,
annotations: {
points: [
{
x: 'Bananas',
seriesIndex: 0,
label: {
borderColor: '#775DD0',
offsetY: 0,
style: {
color: '#fff',
background: '#775DD0',
},
text: 'Bananas are good',
},
},
],
},
chart: {
height: 350,
id: 'thisChart',
type: 'bar',
events: {
zoomed: function(chartContext, {xaxis, yaxis}) {
console.log('zoom', xaxis);
var newSeries = data.map(function (series) {
var newData = [];
series.data.forEach(function (row, index) {
if ((index >= xaxis.min) && (index <= xaxis.max)) {
newData.push(row);
}
});
return {
name: series.name,
data: newData
};
});
ApexCharts.exec('thisChart', 'updateSeries', newSeries, true);
}
}
},
plotOptions: {
bar: {
columnWidth: '100%',
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 2,
},
grid: {
row: {
colors: ['#fff', '#f2f2f2'],
},
},
xaxis: {
labels: {
rotate: -45,
},
categories: [
31, 48, 33, 88, 5, 91, 76,
],
tickPlacement: 'on',
},
yaxis: {
title: {
text: 'Servings',
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: 'horizontal',
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [50, 0, 100],
},
}
};
var chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
</script>
</body>

How to plot one circle after another with some delay?

This is probably a really simple question but I can't seem to figure out how to plot one circle after another (sequentially, with some delay) using d3.js. The circles would then stay on the screen. I'm reading in data from a JSON file and it looks like this:
[{"r":1.2672526041666667,"cx":0,"cy":672.9303022519051,"fill":"rgb(252, 243, 228)"},{"r":1.2672526041666667,"cx":1,"cy":672.9303022519051,"fill":"rgb(252, 243, 228)"},{"r":1.2672526041666667,"cx":2,"cy":672.9303022519051,"fill":"rgb(252, 243, 228)"},{"r":1.2672526041666667,"cx":3,"cy":672.9303022519051,"fill":"rgb(252, 243, 228)"}.....]
and so forth. Json file located here: https://berkeley.box.com/s/4egj1ugr3jm2yp1htoyk8qmtv8avvosb
I've tried so many things!
I've tried using transition/duration but that doesn't seem to be working... I've tried a forEach loop to no avail... I've tried an .each loop as well. I've also tried both methods shown here: How do I loop through or enumerate a JavaScript object?
but I can't get either working. I've also tried looking at this solution:
How to draw circles at different times with D3js?
But I can't seem to plot anything after about 7 hours of trying different things. Here's my code...
<head>
<meta charset="utf-8" />
<title>Laughter Visualizer</title>
<style>
html, body, #svg {
background-color: #FFFFFF;
}
</style>
</head>
<body>
<audio id="audioElement" src="laugh_8.mp3" type="audio/mp3"></audio>
<div>
<button onclick="plotPoints(0, 0)">Draw Points ►</button>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
function plotPoints(p1, counter) {
d3.json("test2.json").then(function(data){
var svgHeight = window.innerHeight - 100;
var svgWidth = window.innerWidth - 10;
var svg = d3.select('body').append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight);
svg.selectAll("circle")
.data(data)
.enter()
.append('circle')
.attr('r', function(d) { return d.r; })
.attr('cx', function(d) { return d.cx; })
.attr('cy', function(d) { return d.cy; })
.attr('fill', function(d) { return d.fill; });
})
}
</script>
</body>
</html>

Given your comment...
I'm looking for the circles to stay...
...the idiomatic D3 solution is using a simple transition, using the indices to set the delay. For instance, plotting one circle every 100 milliseconds:
.delay(function(_, i) {
return i * 100;
})
Regarding the transition itself, you could do it in several different ways, for instance increasing the radiuses. My solution here is just plotting everything and transition the opacity from 0 to 1.
I also created some scales, so your data values don't need to correspond to SVG coordinates:
const xDomain = d3.extent(data, function(d) {
return d.cx
});
const yDomain = d3.extent(data, function(d) {
return d.cy
});
const xScale = d3.scaleLinear()
.range([0, width])
.domain(xDomain);
const yScale = d3.scaleLinear()
.range([0, height])
.domain(yDomain);
Here is a demo using your data:
const data = [{
"r": 1.2672526041666667,
"cx": 0,
"cy": 672.9303022519051,
"fill": "rgb(252, 243, 228)"
}, {
"r": 1.2672526041666667,
"cx": 1,
"cy": 672.9303022519051,
"fill": "rgb(252, 243, 228)"
}, {
"r": 1.2672526041666667,
"cx": 2,
"cy": 672.9303022519051,
"fill": "rgb(252, 243, 228)"
}, {
"r": 1.2672526041666667,
"cx": 3,
"cy": 672.9303022519051,
"fill": "rgb(252, 243, 228)"
}, {
"r": 3.9895833333333335,
"cx": 4,
"cy": 661.4035574412531,
"fill": "rgb(247, 231, 205)"
}, {
"r": 3.9895833333333335,
"cx": 5,
"cy": 661.4035574412531,
"fill": "rgb(247, 231, 205)"
}, {
"r": 3.9895833333333335,
"cx": 6,
"cy": 661.4035574412531,
"fill": "rgb(247, 231, 205)"
}, {
"r": 5.073893229166667,
"cx": 7,
"cy": 660.5638673253352,
"fill": "rgb(244, 226, 195)"
}, {
"r": 5.073893229166667,
"cx": 8,
"cy": 660.5638673253352,
"fill": "rgb(244, 226, 195)"
}, {
"r": 5.6962890625,
"cx": 9,
"cy": 661.1542183362859,
"fill": "rgb(243, 223, 190)"
}, {
"r": 5.6962890625,
"cx": 10,
"cy": 661.1542183362859,
"fill": "rgb(243, 223, 190)"
}, {
"r": 5.6962890625,
"cx": 11,
"cy": 661.1542183362859,
"fill": "rgb(243, 223, 190)"
}, {
"r": 5.6962890625,
"cx": 12,
"cy": 661.1542183362859,
"fill": "rgb(243, 223, 190)"
}, {
"r": 6.125651041666667,
"cx": 13,
"cy": 661.8292769334325,
"fill": "rgb(242, 221, 186)"
}, {
"r": 6.125651041666667,
"cx": 14,
"cy": 661.8292769334325,
"fill": "rgb(242, 221, 186)"
}, {
"r": 6.422526041666667,
"cx": 15,
"cy": 661.5401588106098,
"fill": "rgb(241, 219, 184)"
}, {
"r": 6.422526041666667,
"cx": 16,
"cy": 661.5401588106098,
"fill": "rgb(241, 219, 184)"
}, {
"r": 6.422526041666667,
"cx": 17,
"cy": 661.5401588106098,
"fill": "rgb(241, 219, 184)"
}, {
"r": 6.422526041666667,
"cx": 18,
"cy": 661.5401588106098,
"fill": "rgb(241, 219, 184)"
}, {
"r": 6.770182291666667,
"cx": 19,
"cy": 658.8530307401353,
"fill": "rgb(241, 218, 181)"
}, {
"r": 6.770182291666667,
"cx": 20,
"cy": 658.8530307401353,
"fill": "rgb(241, 218, 181)"
}, {
"r": 6.770182291666667,
"cx": 21,
"cy": 658.8530307401353,
"fill": "rgb(241, 218, 181)"
}, {
"r": 7.0205078125,
"cx": 22,
"cy": 656.2237523376763,
"fill": "rgb(240, 217, 179)"
}, {
"r": 7.0205078125,
"cx": 23,
"cy": 656.2237523376763,
"fill": "rgb(240, 217, 179)"
}, {
"r": 7.0205078125,
"cx": 24,
"cy": 656.2237523376763,
"fill": "rgb(240, 217, 179)"
}, {
"r": 7.144205729166667,
"cx": 25,
"cy": 654.865008125636,
"fill": "rgb(240, 216, 178)"
}, {
"r": 7.144205729166667,
"cx": 26,
"cy": 654.865008125636,
"fill": "rgb(240, 216, 178)"
}, {
"r": 7.144205729166667,
"cx": 27,
"cy": 654.865008125636,
"fill": "rgb(240, 216, 178)"
}, {
"r": 7.349934895833333,
"cx": 28,
"cy": 653.0513751716197,
"fill": "rgb(239, 215, 176)"
}, {
"r": 7.349934895833333,
"cx": 29,
"cy": 653.0513751716197,
"fill": "rgb(239, 215, 176)"
}, {
"r": 7.7802734375,
"cx": 30,
"cy": 648.4655453746704,
"fill": "rgb(238, 213, 172)"
}, {
"r": 7.7802734375,
"cx": 31,
"cy": 648.4655453746704,
"fill": "rgb(238, 213, 172)"
}, {
"r": 7.7802734375,
"cx": 32,
"cy": 648.4655453746704,
"fill": "rgb(238, 213, 172)"
}, {
"r": 7.7802734375,
"cx": 33,
"cy": 648.4655453746704,
"fill": "rgb(238, 213, 172)"
}, {
"r": 8.924153645833334,
"cx": 34,
"cy": 646.4654507872818,
"fill": "rgb(236, 208, 162)"
}, {
"r": 8.924153645833334,
"cx": 35,
"cy": 646.4654507872818,
"fill": "rgb(236, 208, 162)"
}, {
"r": 8.924153645833334,
"cx": 36,
"cy": 646.4654507872818,
"fill": "rgb(236, 208, 162)"
}, {
"r": 8.924153645833334,
"cx": 37,
"cy": 646.4654507872818,
"fill": "rgb(236, 208, 162)"
}, {
"r": 10.550130208333334,
"cx": 38,
"cy": 642.0891082999074,
"fill": "rgb(233, 200, 148)"
}, {
"r": 10.550130208333334,
"cx": 39,
"cy": 642.0891082999074,
"fill": "rgb(233, 200, 148)"
}, {
"r": 10.550130208333334,
"cx": 40,
"cy": 642.0891082999074,
"fill": "rgb(233, 200, 148)"
}, {
"r": 11.846028645833334,
"cx": 41,
"cy": 638.9493098110339,
"fill": "rgb(230, 194, 137)"
}, {
"r": 11.846028645833334,
"cx": 42,
"cy": 638.9493098110339,
"fill": "rgb(230, 194, 137)"
}, {
"r": 13.046875,
"cx": 43,
"cy": 635.5438456420493,
"fill": "rgb(227, 189, 127)"
}, {
"r": 13.046875,
"cx": 44,
"cy": 635.5438456420493,
"fill": "rgb(227, 189, 127)"
}, {
"r": 13.046875,
"cx": 45,
"cy": 635.5438456420493,
"fill": "rgb(227, 189, 127)"
}, {
"r": 14.2236328125,
"cx": 46,
"cy": 631.6291795399932,
"fill": "rgb(225, 183, 117)"
}, {
"r": 14.2236328125,
"cx": 47,
"cy": 631.6291795399932,
"fill": "rgb(225, 183, 117)"
}, {
"r": 14.2236328125,
"cx": 48,
"cy": 631.6291795399932,
"fill": "rgb(225, 183, 117)"
}, {
"r": 15.346028645833334,
"cx": 49,
"cy": 626.1064208896337,
"fill": "rgb(222, 178, 107)"
}, {
"r": 15.346028645833334,
"cx": 50,
"cy": 626.1064208896337,
"fill": "rgb(222, 178, 107)"
}, {
"r": 15.346028645833334,
"cx": 51,
"cy": 626.1064208896337,
"fill": "rgb(222, 178, 107)"
}, {
"r": 16.297526041666668,
"cx": 52,
"cy": 620.3574348526613,
"fill": "rgb(220, 174, 99)"
}, {
"r": 16.297526041666668,
"cx": 53,
"cy": 620.3574348526613,
"fill": "rgb(220, 174, 99)"
}, {
"r": 16.297526041666668,
"cx": 54,
"cy": 620.3574348526613,
"fill": "rgb(220, 174, 99)"
}, {
"r": 16.778645833333332,
"cx": 55,
"cy": 617.0644627244038,
"fill": "rgb(219, 172, 95)"
}, {
"r": 16.778645833333332,
"cx": 56,
"cy": 617.0644627244038,
"fill": "rgb(219, 172, 95)"
}, {
"r": 16.778645833333332,
"cx": 57,
"cy": 617.0644627244038,
"fill": "rgb(219, 172, 95)"
}, {
"r": 16.83203125,
"cx": 58,
"cy": 614.5978314122896,
"fill": "rgb(219, 171, 94)"
}, {
"r": 16.83203125,
"cx": 59,
"cy": 614.5978314122896,
"fill": "rgb(219, 171, 94)"
}, {
"r": 16.83203125,
"cx": 60,
"cy": 614.5978314122896,
"fill": "rgb(219, 171, 94)"
}, {
"r": 17.060221354166668,
"cx": 61,
"cy": 609.8278349138509,
"fill": "rgb(219, 170, 92)"
}, {
"r": 17.060221354166668,
"cx": 62,
"cy": 609.8278349138509,
"fill": "rgb(219, 170, 92)"
}, {
"r": 17.060221354166668,
"cx": 63,
"cy": 609.8278349138509,
"fill": "rgb(219, 170, 92)"
}, {
"r": 17.060221354166668,
"cx": 64,
"cy": 609.8278349138509,
"fill": "rgb(219, 170, 92)"
}, {
"r": 17.533854166666668,
"cx": 65,
"cy": 602.747264716075,
"fill": "rgb(218, 168, 88)"
}, {
"r": 17.533854166666668,
"cx": 66,
"cy": 602.747264716075,
"fill": "rgb(218, 168, 88)"
}, {
"r": 17.533854166666668,
"cx": 67,
"cy": 602.747264716075,
"fill": "rgb(218, 168, 88)"
}, {
"r": 18.1669921875,
"cx": 68,
"cy": 596.8306485811727,
"fill": "rgb(216, 165, 83)"
}, {
"r": 18.1669921875,
"cx": 69,
"cy": 596.8306485811727,
"fill": "rgb(216, 165, 83)"
}, {
"r": 18.333984375,
"cx": 70,
"cy": 594.4961471538654,
"fill": "rgb(216, 165, 81)"
}, {
"r": 18.333984375,
"cx": 71,
"cy": 594.4961471538654,
"fill": "rgb(216, 165, 81)"
}, {
"r": 18.333984375,
"cx": 72,
"cy": 594.4961471538654,
"fill": "rgb(216, 165, 81)"
}, {
"r": 18.333984375,
"cx": 73,
"cy": 594.4961471538654,
"fill": "rgb(216, 165, 81)"
}, {
"r": 18.0771484375,
"cx": 74,
"cy": 594.6126027167029,
"fill": "rgb(217, 166, 83)"
}, {
"r": 18.0771484375,
"cx": 75,
"cy": 594.6126027167029,
"fill": "rgb(217, 166, 83)"
}, {
"r": 18.0771484375,
"cx": 76,
"cy": 594.6126027167029,
"fill": "rgb(217, 166, 83)"
}, {
"r": 17.9443359375,
"cx": 77,
"cy": 594.2603597883598,
"fill": "rgb(217, 166, 85)"
}, {
"r": 17.9443359375,
"cx": 78,
"cy": 594.2603597883598,
"fill": "rgb(217, 166, 85)"
}];
const width = 400,
height = 200;
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
const xDomain = d3.extent(data, function(d) {
return d.cx
});
const yDomain = d3.extent(data, function(d) {
return d.cy
});
const xScale = d3.scaleLinear()
.range([25, width -25])
.domain(xDomain);
const yScale = d3.scaleLinear()
.range([25, height - 25])
.domain(yDomain);
const circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.style("opacity", 0)
.attr("cx", function(d) {
return xScale(d.cx)
})
.attr("cy", function(d) {
return yScale(d.cy)
})
.attr("r", function(d) {
return d.r
})
.style("fill", function(d) {
return d.fill
})
.transition()
.delay(function(_, i) {
return i * 100;
})
.style("opacity", 1);
<script src="https://d3js.org/d3.v5.min.js"></script>

Here is a simple D3-based solution:
const svg = d3.select('svg')
const circleData = [
{id: 1, x: 100, y: 300, c: '#f00', r: 50, d: 500},
{id: 2, x: 250, y: 100, c: '#ff0', r: 90, d: 1000},
{id: 3, x: 300, y: 350, c: '#08f', r: 70, d: 1500},
]
svg.selectAll('circle')
.data(circleData, data => data.id)
.enter()
.append('circle')
.attr('cx', data => data.x)
.attr('cy', data => data.y)
.attr('r', data => data.r)
.style('fill', data => data.c)
.style('visibility', 'hidden')
.transition()
.delay(data => data.d)
.style('visibility', 'visible')
See the demo in a fiddle: https://jsfiddle.net/mrovinsky/pbgac6jw/

The problem is that you're handing over the complete data out of the json object to the selectAll() function of d3 to be drawn at once. Instead inside the callback function for d3.json("test2.json") assign the returned data to a global variable. Afterwards initiate a interval where you call svg.append('circle') - thus telling d3 to draw a circle after another.
<head>
<meta charset="utf-8" />
<title>Laughter Visualizer</title>
<style>
html, body, #svg {
background-color: #FFFFFF;
}
</style>
</head>
<body>
<audio id="audioElement" src="laugh_8.mp3" type="audio/mp3"></audio>
<div>
<button onclick="plotPoints(0, 0)">Draw Points ►</button>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var svg;
var circleData;
var index=0;
var interval;
function update()
{
svg.append('circle')
.attr('r', circleData[index].r)
.attr('cx', circleData[index].cx)
.attr('cy', circleData[index].cy)
.attr('fill', circleData[index].fill);
if(index+1<circleData.length)
{
index++;
}
}
function plotPoints(p1, counter) {
d3.json("test2.json").then(function(data){
circleData=data;
var svgHeight = window.innerHeight - 100;
var svgWidth = window.innerWidth - 10;
svg = d3.select('body').append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight);
interval=setInterval(update,100);
})
}
</script>
</body>
</html>

Mouse behavior buggy?

I have a problem with this highcharts fiddle.
$(function() {
$('#container').highcharts({
lang: {
"noData": "no Data from 01.07.2016 until 01.08.2016"
},
"title": {
"text": ""
},
"series": [{
"zIndex": 10,
"color": "#2f7ed8",
"name": "Series 1",
"stickyTracking": false,
"marker": {
"symbol": "square",
"radius": 5
},
"lineWidth": 0,
"data": [{
"y": 291.0,
"x": Date.UTC(2015, 11, 10, 10, 45, 0),
}, {
"y": 156.0,
"x": Date.UTC(2015, 11, 10, 13, 0, 0),
}, {
"y": 215.0,
"x": Date.UTC(2015, 11, 10, 16, 30, 0),
}, {
"y": 212.0,
"x": Date.UTC(2015, 11, 10, 18, 45, 0),
}, {
"y": 232.0,
"x": Date.UTC(2015, 11, 10, 21, 15, 0),
}, {
"y": 73.0,
"x": Date.UTC(2015, 11, 10, 23, 15, 0),
}, {
"y": 112.0,
"x": Date.UTC(2015, 11, 11, 7, 30, 0),
}, {
"y": 264.0,
"x": Date.UTC(2015, 11, 11, 9, 30, 0),
}, {
"y": 152.0,
"x": Date.UTC(2015, 11, 11, 11, 15, 0),
}, {
"y": 138.0,
"x": Date.UTC(2015, 11, 11, 12, 0, 0),
}, {
"y": 133.0,
"x": Date.UTC(2015, 11, 11, 14, 30, 0),
}, {
"y": 272.0,
"x": Date.UTC(2015, 11, 11, 16, 30, 0),
}, {
"y": 106.0,
"x": Date.UTC(2015, 11, 11, 20, 15, 0),
}, {
"y": 239.0,
"x": Date.UTC(2015, 11, 11, 22, 45, 0),
}, {
"y": 220.0,
"x": Date.UTC(2015, 11, 11, 23, 45, 0),
}, {
"y": 257.0,
"x": Date.UTC(2015, 11, 12, 8, 45, 0),
}, {
"y": 140.0,
"x": Date.UTC(2015, 11, 12, 10, 45, 0),
}, {
"y": 86.0,
"x": Date.UTC(2015, 11, 12, 12, 0, 0),
}, {
"y": 96.0,
"x": Date.UTC(2015, 11, 12, 13, 45, 0),
}, {
"y": 230.0,
"x": Date.UTC(2015, 11, 12, 16, 0, 0),
}, {
"y": 262.0,
"x": Date.UTC(2015, 11, 12, 18, 30, 0),
}, {
"y": 133.0,
"x": Date.UTC(2015, 11, 12, 20, 15, 0),
}, {
"y": 167.0,
"x": Date.UTC(2015, 11, 12, 22, 0, 0),
}, {
"y": 59.0,
"x": Date.UTC(2015, 11, 13, 7, 45, 0),
}, {
"y": 207.0,
"x": Date.UTC(2015, 11, 13, 10, 15, 0),
}, {
"y": 133.0,
"x": Date.UTC(2015, 11, 13, 12, 0, 0),
}, {
"y": 127.0,
"x": Date.UTC(2015, 11, 13, 19, 45, 0),
}, {
"y": 207.0,
"x": Date.UTC(2015, 11, 13, 21, 15, 0),
}, {
"y": 88.0,
"x": Date.UTC(2015, 11, 14, 8, 15, 0),
}, {
"y": 161.0,
"x": Date.UTC(2015, 11, 14, 11, 0, 0),
}, {
"y": 142.0,
"x": Date.UTC(2015, 11, 14, 13, 30, 0),
}, {
"y": 155.0,
"x": Date.UTC(2015, 11, 14, 15, 45, 0),
}, {
"y": 197.0,
"x": Date.UTC(2015, 11, 14, 18, 45, 0),
}, {
"y": 310.0,
"x": Date.UTC(2015, 11, 14, 22, 15, 0),
}, {
"y": 89.0,
"x": Date.UTC(2015, 11, 15, 0, 15, 0),
}, {
"y": 182.0,
"x": Date.UTC(2015, 11, 15, 8, 15, 0),
}, {
"y": 96.0,
"x": Date.UTC(2015, 11, 15, 11, 30, 0),
}, {
"y": 70.0,
"x": Date.UTC(2015, 11, 15, 13, 0, 0),
}, {
"y": 111.0,
"x": Date.UTC(2015, 11, 15, 14, 30, 0),
}, {
"y": 233.0,
"x": Date.UTC(2015, 11, 15, 16, 0, 0),
}, {
"y": 191.0,
"x": Date.UTC(2015, 11, 15, 17, 45, 0),
}, {
"y": 162.0,
"x": Date.UTC(2015, 11, 15, 21, 15, 0),
}, {
"y": 248.0,
"x": Date.UTC(2015, 11, 16, 9, 15, 0),
}, {
"y": 77.0,
"x": Date.UTC(2015, 11, 16, 11, 0, 0),
}, {
"y": 94.0,
"x": Date.UTC(2015, 11, 16, 13, 15, 0),
}, {
"y": 100.0,
"x": Date.UTC(2015, 11, 16, 16, 15, 0),
}, {
"y": 101.0,
"x": Date.UTC(2015, 11, 16, 18, 15, 0),
}, {
"y": 154.0,
"x": Date.UTC(2015, 11, 16, 21, 30, 0),
}, {
"y": 162.0,
"x": Date.UTC(2015, 11, 17, 0, 15, 0),
}, {
"y": 132.0,
"x": Date.UTC(2015, 11, 17, 11, 15, 0),
}, {
"y": 151.0,
"x": Date.UTC(2015, 11, 17, 15, 30, 0),
}, {
"y": 144.0,
"x": Date.UTC(2015, 11, 17, 18, 30, 0),
}, {
"y": 84.0,
"x": Date.UTC(2015, 11, 17, 21, 30, 0),
}, {
"y": 136.0,
"x": Date.UTC(2015, 11, 17, 23, 15, 0),
}, {
"y": 55.0,
"x": Date.UTC(2015, 11, 18, 4, 45, 0),
}, {
"y": 131.0,
"x": Date.UTC(2015, 11, 18, 6, 0, 0),
}, {
"y": 182.0,
"x": Date.UTC(2015, 11, 18, 10, 15, 0),
}, {
"y": 203.0,
"x": Date.UTC(2015, 11, 18, 12, 15, 0),
}, {
"y": 332.0,
"x": Date.UTC(2015, 11, 18, 15, 0, 0),
}, {
"y": 177.0,
"x": Date.UTC(2015, 11, 18, 21, 0, 0),
}, {
"y": 85.0,
"x": Date.UTC(2015, 11, 18, 23, 30, 0),
}, {
"y": 63.0,
"x": Date.UTC(2015, 11, 19, 9, 0, 0),
}, {
"y": 189.0,
"x": Date.UTC(2015, 11, 19, 10, 30, 0),
}, {
"y": 170.0,
"x": Date.UTC(2015, 11, 19, 11, 15, 0),
}, {
"y": 175.0,
"x": Date.UTC(2015, 11, 19, 15, 15, 0),
}, {
"y": 204.0,
"x": Date.UTC(2015, 11, 19, 17, 30, 0),
}, {
"y": 169.0,
"x": Date.UTC(2015, 11, 19, 18, 45, 0),
}, {
"y": 115.0,
"x": Date.UTC(2015, 11, 19, 21, 45, 0),
}, {
"y": 117.0,
"x": Date.UTC(2015, 11, 20, 8, 15, 0),
}, {
"y": 83.0,
"x": Date.UTC(2015, 11, 20, 10, 0, 0),
}, {
"y": 49.0,
"x": Date.UTC(2015, 11, 20, 11, 30, 0),
}, {
"y": 195.0,
"x": Date.UTC(2015, 11, 20, 15, 15, 0),
}, {
"y": 273.0,
"x": Date.UTC(2015, 11, 20, 17, 30, 0),
}, {
"y": 227.0,
"x": Date.UTC(2015, 11, 20, 19, 45, 0),
}, {
"y": 243.0,
"x": Date.UTC(2015, 11, 20, 22, 0, 0),
}, {
"y": 190.0,
"x": Date.UTC(2015, 11, 20, 23, 15, 0),
}, {
"y": 170.0,
"x": Date.UTC(2015, 11, 21, 0, 15, 0),
}, {
"y": 86.0,
"x": Date.UTC(2015, 11, 21, 8, 15, 0),
}, {
"y": 311.0,
"x": Date.UTC(2015, 11, 21, 10, 45, 0),
}, {
"y": 244.0,
"x": Date.UTC(2015, 11, 21, 11, 45, 0),
}, {
"y": 129.0,
"x": Date.UTC(2015, 11, 21, 13, 30, 0),
}, {
"y": 119.0,
"x": Date.UTC(2015, 11, 21, 15, 30, 0),
}, {
"y": 125.0,
"x": Date.UTC(2015, 11, 21, 19, 30, 0),
}, {
"y": 206.0,
"x": Date.UTC(2015, 11, 21, 21, 0, 0),
}, {
"y": 230.0,
"x": Date.UTC(2015, 11, 21, 23, 45, 0),
}, {
"y": 229.0,
"x": Date.UTC(2015, 11, 22, 0, 15, 0),
}, {
"y": 137.0,
"x": Date.UTC(2015, 11, 22, 8, 30, 0),
}, {
"y": 118.0,
"x": Date.UTC(2015, 11, 22, 10, 30, 0),
}, {
"y": 57.0,
"x": Date.UTC(2015, 11, 22, 13, 15, 0),
}, {
"y": 211.0,
"x": Date.UTC(2015, 11, 22, 15, 15, 0),
}, {
"y": 88.0,
"x": Date.UTC(2015, 11, 22, 19, 15, 0),
}, {
"y": 290.0,
"x": Date.UTC(2015, 11, 22, 22, 30, 0),
},{
"y": 268.0,
"x": Date.UTC(2015, 11, 25, 20, 0, 0),
}, {
"y": 297.0,
"x": Date.UTC(2015, 11, 25, 21, 0, 0),
}, {
"y": 265.0,
"x": Date.UTC(2015, 11, 25, 22, 15, 0),
}, {
"y": 236.0,
"x": Date.UTC(2015, 11, 26, 8, 15, 0),
}, {
"y": 249.0,
"x": Date.UTC(2015, 11, 26, 10, 0, 0),
}, {
"y": 181.0,
"x": Date.UTC(2015, 11, 26, 11, 15, 0),
}, {
"y": 250.0,
"x": Date.UTC(2015, 11, 26, 12, 0, 0),
}, {
"y": 241.0,
"x": Date.UTC(2015, 11, 26, 15, 30, 0),
}, {
"y": 270.0,
"x": Date.UTC(2015, 11, 26, 17, 30, 0),
}, {
"y": 225.0,
"x": Date.UTC(2015, 11, 26, 18, 30, 0),
}, {
"y": 146.0,
"x": Date.UTC(2015, 11, 26, 20, 0, 0),
}, {
"y": 143.0,
"x": Date.UTC(2015, 11, 26, 21, 15, 0),
}, {
"y": 88.0,
"x": Date.UTC(2015, 11, 26, 22, 45, 0),
}, {
"y": 98.0,
"x": Date.UTC(2015, 11, 27, 0, 0, 0),
}, {
"y": 144.0,
"x": Date.UTC(2015, 11, 27, 8, 0, 0),
}, {
"y": 295.0,
"x": Date.UTC(2015, 11, 27, 10, 15, 0),
}, {
"y": 256.0,
"x": Date.UTC(2015, 11, 27, 11, 15, 0),
}, {
"y": 214.0,
"x": Date.UTC(2015, 11, 27, 16, 45, 0),
}, {
"y": 179.0,
"x": Date.UTC(2015, 11, 27, 19, 15, 0),
}, {
"y": 191.0,
"x": Date.UTC(2015, 11, 27, 21, 15, 0),
}, {
"y": 160.0,
"x": Date.UTC(2015, 11, 28, 0, 0, 0),
}, {
"y": 95.0,
"x": Date.UTC(2015, 11, 28, 9, 45, 0),
}, {
"y": 138.0,
"x": Date.UTC(2015, 11, 28, 12, 0, 0),
}, {
"y": 104.0,
"x": Date.UTC(2015, 11, 28, 13, 45, 0),
}, {
"y": 165.0,
"x": Date.UTC(2015, 11, 28, 17, 45, 0),
}, {
"y": 185.0,
"x": Date.UTC(2015, 11, 28, 18, 45, 0),
}, {
"y": 338.0,
"x": Date.UTC(2015, 11, 28, 21, 30, 0),
}, {
"y": 286.0,
"x": Date.UTC(2015, 11, 28, 23, 15, 0),
}, {
"y": 131.0,
"x": Date.UTC(2015, 11, 29, 3, 15, 0),
}, {
"y": 98.0,
"x": Date.UTC(2015, 11, 29, 8, 30, 0),
}, {
"y": 205.0,
"x": Date.UTC(2015, 11, 29, 10, 30, 0),
}, {
"y": 130.0,
"x": Date.UTC(2015, 11, 29, 11, 45, 0),
}, {
"y": 80.0,
"x": Date.UTC(2015, 11, 29, 13, 30, 0),
}, {
"y": 246.0,
"x": Date.UTC(2015, 11, 29, 16, 30, 0),
}, {
"y": 183.0,
"x": Date.UTC(2015, 11, 29, 18, 45, 0),
}, {
"y": 199.0,
"x": Date.UTC(2015, 11, 29, 19, 45, 0),
}, {
"y": 219.0,
"x": Date.UTC(2015, 11, 29, 21, 30, 0),
}, {
"y": 318.0,
"x": Date.UTC(2015, 11, 29, 23, 45, 0),
}, {
"y": 156.0,
"x": Date.UTC(2015, 11, 30, 8, 45, 0),
}, {
"y": 73.0,
"x": Date.UTC(2015, 11, 30, 11, 0, 0),
}, {
"y": 98.0,
"x": Date.UTC(2015, 11, 30, 11, 45, 0),
}, {
"y": 105.0,
"x": Date.UTC(2015, 11, 30, 14, 30, 0),
}, {
"y": 194.0,
"x": Date.UTC(2015, 11, 30, 17, 45, 0),
}, {
"y": 183.0,
"x": Date.UTC(2015, 11, 30, 20, 15, 0),
}, {
"y": 289.0,
"x": Date.UTC(2015, 11, 30, 21, 15, 0),
}, {
"y": 350.0,
"x": Date.UTC(2015, 11, 31, 0, 15, 0),
}, {
"y": 242.0,
"x": Date.UTC(2015, 11, 31, 8, 45, 0),
}, {
"y": 240.0,
"x": Date.UTC(2015, 11, 31, 10, 30, 0),
}, {
"y": 146.0,
"x": Date.UTC(2015, 11, 31, 11, 15, 0),
}, {
"y": 117.0,
"x": Date.UTC(2015, 11, 31, 13, 30, 0),
}, {
"y": 191.0,
"x": Date.UTC(2015, 11, 31, 15, 15, 0),
}, {
"y": 189.0,
"x": Date.UTC(2015, 11, 31, 17, 45, 0),
}, {
"y": 153.0,
"x": Date.UTC(2015, 11, 31, 20, 45, 0),
}, {
"y": 161.0,
"x": Date.UTC(2016, 0, 1, 0, 0, 0),
}, {
"y": 143.0,
"x": Date.UTC(2016, 0, 1, 0, 45, 0),
}, {
"y": 62.0,
"x": Date.UTC(2016, 0, 1, 8, 30, 0),
}, {
"y": 98.0,
"x": Date.UTC(2016, 0, 1, 13, 0, 0),
}, {
"y": 166.0,
"x": Date.UTC(2016, 0, 1, 14, 30, 0),
}, {
"y": 202.0,
"x": Date.UTC(2016, 0, 1, 17, 45, 0),
}, {
"y": 273.0,
"x": Date.UTC(2016, 0, 1, 21, 0, 0),
}, {
"y": 240.0,
"x": Date.UTC(2016, 0, 2, 0, 15, 0),
}, {
"y": 145.0,
"x": Date.UTC(2016, 0, 2, 8, 45, 0),
}, {
"y": 87.0,
"x": Date.UTC(2016, 0, 2, 12, 0, 0),
}, {
"y": 163.0,
"x": Date.UTC(2016, 0, 2, 16, 0, 0),
}, {
"y": 196.0,
"x": Date.UTC(2016, 0, 2, 19, 45, 0),
}, {
"y": 347.0,
"x": Date.UTC(2016, 0, 2, 22, 45, 0),
}, {
"y": 200.0,
"x": Date.UTC(2016, 0, 3, 0, 30, 0),
}, {
"y": 132.0,
"x": Date.UTC(2016, 0, 3, 8, 45, 0),
}, {
"y": 251.0,
"x": Date.UTC(2016, 0, 3, 10, 0, 0),
}, {
"y": 254.0,
"x": Date.UTC(2016, 0, 3, 12, 0, 0),
}, {
"y": 94.0,
"x": Date.UTC(2016, 0, 3, 14, 30, 0),
}, {
"y": 88.0,
"x": Date.UTC(2016, 0, 3, 18, 15, 0),
}, {
"y": 247.0,
"x": Date.UTC(2016, 0, 3, 21, 30, 0),
}, {
"y": 179.0,
"x": Date.UTC(2016, 0, 4, 0, 0, 0),
}, {
"y": 109.0,
"x": Date.UTC(2016, 0, 4, 10, 0, 0),
}, {
"y": 67.0,
"x": Date.UTC(2016, 0, 4, 12, 15, 0),
}, {
"y": 172.0,
"x": Date.UTC(2016, 0, 4, 15, 30, 0),
}, {
"y": 96.0,
"x": Date.UTC(2016, 0, 4, 17, 0, 0),
}, {
"y": 116.0,
"x": Date.UTC(2016, 0, 4, 18, 45, 0),
}, {
"y": 111.0,
"x": Date.UTC(2016, 0, 4, 21, 0, 0),
}, {
"y": 234.0,
"x": Date.UTC(2016, 0, 4, 22, 45, 0),
}, {
"y": 187.0,
"x": Date.UTC(2016, 0, 5, 0, 0, 0),
}, {
"y": 72.0,
"x": Date.UTC(2016, 0, 5, 9, 45, 0),
}, {
"y": 266.0,
"x": Date.UTC(2016, 0, 5, 11, 45, 0),
}, {
"y": 237.0,
"x": Date.UTC(2016, 0, 5, 13, 15, 0),
}, {
"y": 268.0,
"x": Date.UTC(2016, 0, 5, 16, 45, 0),
}, {
"y": 261.0,
"x": Date.UTC(2016, 0, 5, 18, 0, 0),
}, {
"y": 140.0,
"x": Date.UTC(2016, 0, 5, 21, 30, 0),
}],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"zIndex": 11,
"color": "#D6487E",
"name": "Series 2",
"marker": {
"symbol": "triangle-down",
"radius": 5
},
"lineWidth": 0,
"data": [],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"zIndex": 10,
"color": "#2f7ed8",
"name": "Series 3",
"marker": {
"symbol": "triangle",
"radius": 5
},
"lineWidth": 0,
"data": [],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"enableMouseTracking": false,
"zIndex": 3,
"isThreshold": true,
"name": "Background series",
"color": "#edf9d2",
"type": "arearange",
"data": [
[Date.UTC(2015, 11, 1, 0, 0, 0), 80.0, 160.0],
[Date.UTC(2016, 0, 10, 23, 59, 59), 80.0, 160.0],
[Date.UTC(2016, 0, 10, 23, 59, 59), 80.0, 160.0]
],
"scalingFix": true
}, {
"zIndex": 10,
"color": "#2f7ed8",
"name": "Test series",
"marker": {
"symbol": "circle",
"radius": 5
},
"lineWidth": 0,
"data": [],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"name": "scaling-fix",
"data": [
[Date.UTC(2016, 6, 31, 23, 59, 59), 80.0],
[Date.UTC(2016, 7, 1, 23, 59, 59), 80.0]
],
"zIndex": 0,
"visible": false,
"type": "line",
"showInLegend": false
} ],
"yAxis": {
"minRange": 20,
"startOnTick": true,
"plotBands": [],
"title": {
"text": "Values",
"enabled": true
},
"gridZIndex": 0,
"min": 0,
"endOnTick": false,
"plotLines": [],
"tickInterval": 20
},
"chart": {
"zoomType": "x",
"marginLeft": 70,
"resetZoomButton": {
"theme": {
"states": {
"hover": {
"style": {
"color": "white"
},
"fill": "#DA5430"
}
},
"stroke": "#DA5430",
"r": 0,
"style": {
"color": "white"
},
"fill": "#DA5430"
}
},
"type": "line",
},
"tooltip": {
"dateTimeLabelFormats": {
"millisecond": "%A, %e. %b., %H:%M:%S.%L",
"week": "Woche von %A, %e. %b. %Y",
"hour": "%A, %e. %b., %H:%M",
"month": "%B %Y",
"second": "%A, %e. %b., %H:%M:%S",
"year": "%Y",
"day": "%A, %e. %b. %Y",
"minute": "%A, %e. %b., %H:%M"
},
"snap": 0,
"shared": false,
"followPointer": false,
"useHTML": true
},
"credits": {
"enabled": false
},
"plotOptions": {
"series": {
"states": {
"hover": {
"lineWidth": 0,
"lineWidthPlus": 0
}
},
"cursor": "pointer",
"stickyTracking": false
},
"line": {
"zIndex": 6,
"marker": {
"enabled": true
},
"stickyTracking": false,
"dataLabels": {
"enabled": false,
"useHTML": true
}
},
"arearange": {},
"scatter": {
"marker": {
"enabled": true
},
"stickyTracking": false,
"dataLabels": {
"enabled": false,
"useHTML": true
}
},
"area": {
"stacking": true,
"enableMouseTracking": false,
"marker": {
"enabled": false
},
"shadow": false,
"lineWidth": 0,
"showInLegend": false
}
},
"xAxis": {
"minRange": 60000,
"min": Date.UTC(2015, 11, 1, 0, 0, 0),
"minPadding": 0.0,
"plotBands": [{
"zIndex": -100,
"to": Date.UTC(2016, 6, 3, 21, 59, 59),
"from": Date.UTC(2016, 6, 1, 22, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 6, 22, 59, 59),
"from": Date.UTC(2015, 11, 4, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 13, 22, 59, 59),
"from": Date.UTC(2015, 11, 11, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 20, 22, 59, 59),
"from": Date.UTC(2015, 11, 18, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 27, 22, 59, 59),
"from": Date.UTC(2015, 11, 25, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}],
"plotLines": [{
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 6, 23, 0, 0)
}, {
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 13, 23, 0, 0)
}, {
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 20, 23, 0, 0)
}, {
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 27, 23, 0, 0)
}],
"gridZIndex": 0,
"dateTimeLabelFormats": {
"millisecond": "%H:%M:%S.%L",
"week": "%e. %b. %y",
"hour": "%H:%M",
"month": "%B %y",
"second": "%H:%M:%S",
"year": "%Y",
"day": "%e. %b. %y",
"minute": "%H:%M"
},
"gridLineWidth": 0,
"maxPadding": 0.0,
"endOnTick": false,
"max": Date.UTC(2016, 0, 10, 23, 59, 59),
"minTickInterval": 60000,
"type": "datetime",
"events": {
"afterSetExtremes": function() {
var axis = "xAxis";
var axis2 = "yAxis";
var chartgroup = null;
if (typeof charts_p_allchartsmodule != 'undefined') {
chartgroup = charts_p_allchartsmodule;
}
if (typeof charts_container != 'undefined' && charts_container['p_allchartsmodule']) {
chartgroup = charts_container['p_allchartsmodule'];
}
if (chartgroup && this.chart.controllingChart == true) {
if (this.chart.inverted == true) {
var min = this.chart.xAxis[0].min;
var max = this.chart.xAxis[0].max;
} else {
var min = this.chart.xAxis[0].min;
var max = this.chart.xAxis[0].max;
}
for (key in chartgroup) {
if (this.chart != chartgroup[key]) {
if (chartgroup[key].inverted == true) {
chartgroup[key].xAxis[0].setExtremes(min, max, true);
} else {
chartgroup[key].xAxis[0].setExtremes(min, max, true);
}
}
}
this.chart.controllingChart = false;
}
}
}
},
"exporting": {
"url": "/m/hc-export/",
"chartOptions": {
"rangeSelector": {
"enabled": false
},
"navigator": {
"enabled": false
},
"scrollbar": {
"enabled": false
}
}
},
"rangeSelector": {
"buttons": [{
"text": "Alle",
"type": "all"
}],
"inputEnabled": false,
"enabled": true
},
"type": "scatter",
"legend": {
"draggable":true,
"floating":true,
"verticalAlign": "top",
"zIndex": 2000,
"title": {
"text": ":: Legend"
},
"itemStyle": {
"fontSize": "8px"
},
"align": "left",
"draggable": true,
"borderWidth": 1,
"backgroundColor": "rgba(234, 234, 234,0.8)",
"floating": true
}
});
});
When you hover over on of the points it will select a other point with nearly the same X-Axis. The Y-Axis is switching up and down but not to the point where the mouse hovers over. So the selection behavior isn´t precise, so you can´t see the right tooltip where your mouse hovers over.
Mouse = red dot
Please have a look at it.

Your series is treated as a "line" chart, which causes this behaviour of the tooltip popup. I found a problem in your configuration object. The type:"scatter" option must be placed in the "chart":{} object.
chart:{
type:"scatter"
}
see: http://jsfiddle.net/u9q2m9wp/2/
see also: Highcharts - only show tooltip when hovering directly on point

AmCharts: is there a way to enable zooming only by X axis on XYChart?

I'm using amcharts 3 for xychart and I would like to disable possibility for user to zoom y axis, but still make it possible to zoom x axis by ChartCursor.

Yes, you should set:
"hideYScrollbar":true
Full source:
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"marginRight": 80,
"marginTop": 17,
"hideYScrollbar":true,
"dataProvider": [{
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": 0,
"value2": 44
}, {
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
}, {
"y": -10,
"x": -3,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
}, {
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
}, {
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": -3,
"value2": 41
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": 1,
"value2": 16
}],
"valueAxes": [{
"position": "bottom",
"axisAlpha": 0
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left"
}],
"startDuration": 1.5,
"graphs": [{
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "bubble",
"lineAlpha": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"fillAlphas": 0,
"bulletBorderAlpha": 0.2,
"maxBulletSize": 80
}, {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "bubble",
"lineAlpha": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"fillAlphas": 0,
"bulletBorderAlpha": 0.2,
"maxBulletSize": 80
}],
"marginLeft": 46,
"marginBottom": 35,
"chartScrollbar": {},
"chartCursor": {},
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
});
Codepen: http://codepen.io/team/amcharts/pen/cdd55aa9f4f761686a4027d6895263da

JavaScript returning a 2D array in a function

I'm trying to return an array within a function like this:
function loadMap(map) {
if (map == 1) {
return board = [][
[ 1, 1, 1, 1, 1, 1, 1, 190, 115, 1, 1, 1, 1, 1, 1, 2],
[ 190, 190, 190, 190, 190, 190, 190, 190, 13, 148, 148, 148, 148, 148, 121, 2],
[ 1, 520, 127, 127, 127, 127, 127, 13, 13, 148, 167, 167, 167, 148, 343, 1],
[ 1, 520, 127, 166, 166, 166, 127, 13, 13, 148, 167, 167, 167, 148, 343, 1],
[ 1, 520, 127, 166, 166, 166, 127, 13, 13, 148, 148, 148, 183, 148, 343, 1],
[ 1, 520, 364, 174, 127, 361, 127, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[ 115, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 115],
[ 1, 514, 13, 13, 394, 343, 145, 220, 145, 145, 145, 13, 13, 13, 13, 1],
[ 1, 514, 13, 13, 343, 118, 145, 166, 166, 166, 145, 13, 13, 13, 13, 1],
[ 1, 514, 514, 13, 118, 118, 145, 166, 166, 166, 145, 13, 13, 13, 13, 1],
[ 1, 1, 1, 115, 1, 1, 145, 145, 145, 145, 145, 1, 1, 1, 1, 1]
];
}
}
However that is not right. How do I fix this?

You don't give the return value a name in the function, assign the return value to a variable when you call it.
You have an extra [] in front of the array literal.
function loadMap(map) {
if (map == 1) {
return [
[ ... ],
[ ... ],
[ ... ],
...
];
}
}
var board = loadMap(1);

function loadMap(map) {
if (map == 1) {
return [
[values],
[values],
[values]
]
}
}
you can access them like map[x][y]:
var map = loadMap(1);
map[1][1]; //190

Develop Reference

JavaScript is the programming language of the Web.

How to implement motion video highchart on Reactjs - javascript

I recommend you to use highcharts-react-official wrapper: https://www.npmjs.com/package/highcharts-react-official By using this wrapper, you can in easy way add additional plugins or modules. Below I created a live example with Motion-Highcharts-Plugin. Live demo: https://codesandbox.io/s/6j359qpr6r

Related

ApexChart column resize on zoom

How to plot one circle after another with some delay?

Mouse behavior buggy?

AmCharts: is there a way to enable zooming only by X axis on XYChart?

JavaScript returning a 2D array in a function

Categories

Resources