Как создать динамический график сплайна Highcharts?

Question

Я почесал голову в течение нескольких дней без удачи. Я хотел бы создать диаграмму Highcharts, которая показывает данные из моей базы данных. Я без проблем сделал несколько графиков, но я застрял на графике, который показывает некоторые точки (20 или более) и прокручивает сплайн-диаграмму влево, показывая новые данные.

Я создал два массива jfDatumi (содержащих время в формате чч: мм из базы данных) (12:10) и jfTempOuts, содержащих значения температуры (-2,3…).

Теперь я хочу показать те данные на графике, которые перемещаются каждую секунду, добавляя новую точку (время, температуру), но показывая только 20 точек в данный момент. Когда дело доходит до конца массива, я бы хотел, чтобы график начинался заново с первой точки. Это похоже на этот график https://www.highcharts.com/demo/dynamic-update, но я хочу, чтобы ось X показывала мое время из моего массива (jfDatumi), а не текущее время (без переменной x = (new Date ()). GetTime ())

Может кто-нибудь помочь мне? Я вырываю свои волосы из-за этого. Ниже мой текущий код.

$(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;
        }())


    }]
});
});
});

В настоящее время у меня время от jfDatumi, но НЕТ значений температуры от jfTempOuts.

Answer 1

Я нашел решение сам.Вот код, который работает для меня:

// 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

Единственная проблема, с которой я столкнулся сейчас, в том, что я НЕ МОГУ показать первые 20 очков, но это не так важно.Я тоже найду решение этой проблемы. Мой график