var interval = setInterval(function() {
    $.ajax({
        url : 'ajax/updatevalues',
        dataType : 'json',
        type : 'GET',
        success: function(data)
        {   
            var dateStr = JSON.parse(data.temperature.last_timestamp)
            // console.log('dateStr:', dateStr); // 2014-01-01T23:28:56.782Z
            temp_time = new Date(dateStr);
            // console.log('temp_time:', temp_time); // 2014-01-01T23:28:56.782Z
            temp_temperature = data.temperature.last;
            temp_refined_fuels = data.refined_fuels.last;
            temp_crude_oils = data.crude_oils.last;

            index.push(temp_time);
            temperature.push(data.temperature.last);
            refined_fuels.push(data.refined_fuels.last);
            crude_oils.push(data.crude_oils.last);
        }
    });

    
    xx = [];
    yy = [];
    

    temperature_list = [];
    refined_fuels_list = [];
    crude_oils_list = [];

    $('input[type=checkbox]').each(function () {

        if(this.checked == true){
            if(this.name == 'Temperature'){
                tt = [];
                tt.push(temp_time);
                xx.push(tt);
                temperature_list.push(temp_temperature);
                yy.push(temperature_list);
            }else if(this.name == 'Refined_Fuels'){
                tt = [];
                tt.push(temp_time);
                xx.push(tt);
                refined_fuels_list.push(temp_refined_fuels);
                yy.push(refined_fuels_list);
            }else if(this.name == 'Crude_Oils'){
                tt = [];
                tt.push(temp_time);
                xx.push(tt);
                crude_oils_list.push(temp_crude_oils);
                yy.push(crude_oils_list);
            }
        }        
    });

    console.log('xx: ', xx);
    console.log('yy: ', yy);
    console.log('get_number_of_traces(): ', get_number_of_traces());

    Plotly.extendTraces(testGraph, {
        x: xx ,
        y: yy 
        }, get_number_of_traces() );
    cnt++;

if(++cnt === 100) clearInterval(interval);
}, 2000);

import { useEffect, useRef } from 'react';
import Plot from 'react-plotly.js';
import Plotly from 'plotly.js-dist';

export default function LineGraph() {

  const plotRef = useRef(null);
  const intervalRef = useRef(null);

  useEffect(() => {
    let count = 0;
    const samplesPer = 10;
    
    // Update the graph every 200ms with new data
    intervalRef.current = setInterval(() => {
      // Extend traces with the new data points
      const newData = Array.from({length: samplesPer}, () => Math.random());
      count += samplesPer;
      Plotly.extendTraces(
        plotRef.current.el, 
        { y: [newData] },
        [0]);

      // Start sliding the x axis once we reach >200 samples.
      if (count > 200) {
        Plotly.relayout(plotRef.current.el, {xaxis: {range: [count-200, count]}});
      }
    }, 250);

    return () => clearInterval(intervalRef.current); // Cleanup on component unmount
  }, []);

  return (
    <Plot
      ref={plotRef}
      data={[{ y: [], type: 'line' }]}
      layout={{ width: 500, height: 300, title: { text: 'Scrolling Plot' } }}
      useResizeHandler={true}
      style={{ width: '100%', height: '100%' }}
    />
  );
}