Filip Martiak Filip Martiak - 7 months ago 41
Javascript Question

How to slow down Highcharts plot

1.
Hi I´d like to know your opinion. Im trying to plot some signal taken from database. Everything is running well, I want to plot EKG signal in 10 secs window. Im taking 2500 samples at once to do it send it by Json and plot than by Highcharts JS. The problem is that the rendering JS is plotting default by 500ms. I want it to plot more like in the hospital monitoring... To slow it down. How can it be done?

2.
And please do you know if there is any possibility to set X axis like a counter that it marks values everytime i render a new chart? sth like every 1250 values rendered it will show on X axis 5 after 2500 it will be 10.......i want to change it from counting values to time axis......the frequency of values is 250 ms

here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>

var ID = 1;

$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
animation: 'false'
},
series: [{marker: {
enabled: false
}}]
};

function posielanie () {
$.getJSON("data.php",{posielam : ID}, function(data) {
options.series[0].data = data;
console.log(data);
var chart = new Highcharts.Chart(options);
ID = ID+2500;
});
setTimeout(posielanie, 2000);
}
posielanie ();
});


</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<div id="container" style="height: 300px"></div>
</body>
</html>


and data.php

<?php

header('Content-Type: application/json');

$con = mysqli_connect("ADRESS","USER","PSW","TBL");


$a= $_GET['posielam'];

if (mysqli_connect_errno($con))
{
echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
$result = mysqli_query($con, "SELECT * FROM samples LIMIT $a, 2500 ");
while ( $row= mysqli_fetch_array($result)){
$out[]=$row['sample'];
}

echo json_encode($out, JSON_NUMERIC_CHECK);
}
mysqli_close($con);

?>

Answer

You need to use the plotOptions.series.animation option like so:

    plotOptions: {
        series: {
            animation: {
                duration: 1000
            }
        }
    },

Example fiddle - try changing the duration to see different rendering times

Link to relevant Highcharts docs