Home Forums Chart Support StripLines for every 5 minutes

StripLines for every 5 minutes

Viewing 5 posts - 1 through 5 (of 5 total)
  • #37817

    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!

    #37925

    @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

    #37934

    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”}
    ]

    #37935

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

    #37937

    @blazg,

    Glad that you were able to make it work.


    Thangaraj Raman
    Team CanvasJS

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.