StripLines for every 5 minutes

[BlazG]

Hello,

I have a dynamic chart that has a “hh:mm” time format on the x-axis. I would like to show a stripline on x-axis for every 5 minutes.

HELP, and thanks!

[Thangaraj Raman]

@blazg,

You can render stripLines on x-axis for every 5 minutes in a dynamic chart with a few extra lines of code as shown in the code snippet below:

function updateChart() {
    var deltaY ;
    time.setTime(time.getTime()+60*updateInterval);
    deltaY = 0.5 + Math.random() *(-0.5-0.5);
    yValue = Math.round((yValue + deltaY)*100)/100;
    dataPoints.push({
      x: time.getTime(),
      y: yValue
    });
      
    if(stripLineCounter%5 == 0) {
    	stripLineArray.push({value:time.getTime(), label: CanvasJS.formatDate(time.getTime(), "hh:mm")});
    }
    stripLineCounter++;
    
    if (dataPoints.length >  100 ) {
      dataPoints.shift();				
    }
    chart.render();
    setTimeout(updateChart, updateInterval);
  }
  updateChart();
}

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[BlazG]

I tried what you did but my problem now is that when value: time.getTime() gets written into the array there is always the same value written in it. Time doesn’t change like it should. I implemented your code from the updateChart function and the two variables: stripLineCounter = 0, var time = new Date() into my code.

This is how the contents of the array look like:

STRIPLINEARRAY: [
{“value”:1653983029310,”label”:”5 minute mark”},
{“value”:1653983029310,”label”:”5 minute mark”},
{“value”:1653983029310,”label”:”5 minute mark”},
{“value”:1653983029310,”label”:”5 minute mark”},
{“value”:1653983029310,”label”:”5 minute mark”},
{“value”:1653983029310,”label”:”5 minute mark”},
{“value”:1653983029310,”label”:”5 minute mark”},
{“value”:1653983029310,”label”:”5 minute mark”}
]

[BlazG]

Nevermind i fixed it. Found out that my time variable wasn’t updating because it was at the wrong place. Thanks for the help.

[Thangaraj Raman]

@blazg,

Glad that you were able to make it work.

—
Thangaraj Raman
Team CanvasJS