How to create dynamic update spline Highcharts chart?

Question

I'm scratching my head for few days with no luck. I would like to create Highcharts chart that shows data from my database. I did some charts without problem, but I'm stuck on chart that shows some points (20 or more) and scrolls spline chart to the left showing new data.

I have created two arrays jfDatumi (containing times in format hh:mm from database) (12:10) and jfTempOuts containing temperature values (-2.3…).

Now I want to show those data on chart that moves every second adding new point (time, temperature) but showing only 20 points at the time. When it comes to the end of an array I would like chart to start over from first point. It's like this chart https://www.highcharts.com/demo/dynamic-update but I want X axis to show my times from my array (jfDatumi) not current time (without var x = (new Date()).getTime())

Can anyone please help me? I'm pulling my hair out because of this. Below is my current code.

$(function () 
{
$(document).ready(function () 
{

    Highcharts.setOptions(
    {


        global: 
        {
            useUTC: false,

        }
    });

    $('#test').highcharts(
    {
        credits: 
        {
            text: 'By: http://amicus.ba',
            href: 'http://amicus.ba'
        },
    chart:
    {
        type: 'spline',
        animation: Highcharts.svg, // Ne animiraj u starom IE
        marginRight: 1,

        events: 
        {
            load: function () 
            {

                // Postaviti update grafikona svake sekunde
                var series = this.series[0];


                setInterval(function () 
                {


                    var x = jfDatumi, // Trenutno vrijeme

                    //var x = new Date(), // current time
                    //x=jfDatumi,
                    //var x = (new Date()).getTime(),
                    y = jfTempOuts;
                    series.addPoint([x, y], true, true);

                }, 1500);

            }

        }

    },
    title: 
    {
        text: 'Test Vanjska temperatura [°C]'
    },
    xAxis: 
    {
        type: 'datetime',
        categories: jfDatumi,
        minRange: 1,
        title: 
        {
            text: 'Vrijeme'
        },
            tickPixelInterval: 1,   

    },
    yAxis: 
    {
        minRange: 0,
        title: 
        {
            text: '[°C]'
        },
        plotLines: [
        {
            value: 0,
            width: 2,
            color: '#808080'
        }]
    },
    tooltip: 
    {
        formatter: function () 
        {
            return '<b>' + this.series.name + '</b><br/>' +
            Highcharts.numberFormat(this.y, 2) + ' [°C]';

        }
    },

    legend: 
    {
        enabled: false
    },
    exporting: 
    {
        enabled: false
    },

    series: [
    {
        name: 'Vanjska temperatura',
        //data: (jfTempOuts)


        data: (function () {
          // generate an array of random data

          var data = [],
            time = jfDatumi,
            i;

          for (i = 0; i <= 20; i += 1) {
            data.push([
              time,
              jfTempOuts
            ]);
          }
          return data;
        }())


    }]
});
});
});

At this time, i have my times from jfDatumi, but NO temperature values from jfTempOuts.

Samir Gutic Samir Gutic · Accepted Answer · 2019-03-10T08:59:01

I have found solution by myself. Here is code that works for me:

// Animirani grafikon vanjske temperature
$(function () 
{
$(document).ready(function () 
{

    Highcharts.setOptions(
    {
        global: 
        {
            useUTC: false,  
        }
    });

    $('#vanjskaTemp').highcharts(
    {
        credits: 
        {
            text: 'By: http://amicus.ba',
            href: 'http://amicus.ba'
        },
    chart:
    {
        type: 'spline',
        animation: Highcharts.svg, // Ne animiraj u starom IE
        marginRight: 1,

        events: 
        {
            load: function () 
            {
                // Postaviti update grafikona po podešenom intervalu
                var series = this.series[0];

                var br=20; // Start brojača za indeksiranje niza temperatura (podešeno u: for (i = 0; i <= 20; i += 1))

                setInterval(function () 
                {
                    br=br+1;  // Brojač za indeksiranje niza temperatura

                    // Zaustavljanje skrolovanja ako je dostignut kraj niza jfTempOuts
                    if (br<=jfTempOuts.length-1) 
                    {
                        var x = jfSamoVrijeme; // Vrijeme za X osu (zaustavi se osa ako se ne očitava)
                        y = jfTempOuts[br]; // Vrijednosti za Y osu (Vanjske   temperature)

                        series.addPoint([x, y], true, true);
                    }
                    else
                    {   
                        //document.write("BR:<li>"+br+"</li>");
                    }

                }, 1500);
            }
        }
    },
    title: 
    {
        text: 'Vanjska temperatura [°C]'
    },
    xAxis: 
    {
        type: 'datetime',
        categories: jfSamoVrijeme,
        minRange: 1,
        title: 
        {
            text: 'Vrijeme'
        },
            tickPixelInterval: 1,       
    },
    yAxis: 
    {
        minRange: 0,
        title: 
        {
            text: 'Vanjska temperatura [°C]'
        },
        plotLines: [
        {
            value: 0,
            width: 0.5,
            color: '#808080'
        }]
    },
    tooltip: 
    {
        formatter: function () 
        {
            return '<b>' + this.series.name + '</b><br/>' +
            Highcharts.numberFormat(this.y, 2) + ' [°C]';
        }
    },

    legend: 
    {
        enabled: false
    },
    exporting: 
    {
        enabled: false
    },

    series: [
    {
        name: 'Vanjska temperatura',

        data: (function () {

          var data = [],
            time = jfSamoVrijeme,
            i;

          for (i = 0; i <= 20; i += 1) {
            data.push([
              time,
              jfTempOuts
            ]);
          }
          return data;
        }())  
    }]
 });
 });
 });
 // Kraj animiranog grafikona vanjske temperature

Only problem I have now is that I CAN'T show first 20 points, but not so important. I will find solution for that problem too. My chart

How to create dynamic update spline Highcharts chart?

1 Answers