A Beating Heart – Highcharts animation example

Further to my last post about highcharts thought I would show how we can graph any set of data in the form of a heart graph example. Using the line graph, Ajax and Highcharts animation we can create a live graph powered by data coming from the server.

Graph saved as GIF

Html & javascript

Call to server every 10 seconds. In reality this is not suitable in a clinical environment would need to be one second calls.

$(document).ready(function() {
    refreshChart();
    setInterval(refreshChart, 10000)
});

Ajax to call the server for fresh data

function refreshChart(){
    var url = "";
    $.ajax({url: url,
         error: function(){
             alert("An error occured")
          },
           success: function(chartData){
               LoadHeartBeat(chartData);
          }
    });
}

Highcharts Jquery

ChartData is in the form of x,y pairs as Json. i.e.

[[1,1],[1.234,1.45],[3.22, 1.34]]

               
        function LoadHeartBeat(chartData){
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                    //type: 'pie'
                },
                title: {
                    text: 'My heart beat'
                },
                plotOptions: {
                    series: {
                        //use animation to show each beat one by one
                        animation: {
                            enabled: true,
                            duration: 10000
                        }
                    },
                    line: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                tooltip: {
                    pointFormat: '{series.name}: 
                                   {point.percentage:.1f}%'
                },
                series: [{
                    name: 'Processes',
                    data: chartData
                }]
            });
        }

Html