Home forums Using CanvasJS create dynamic line chart use interval to make axisY move

This topic contains 7 replies, has 2 voices, and was last updated by  rayateng 1 week, 2 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17520

    rayateng
    Member

    I’m a new one in this program, I need help from all of you so please forgive me if I say something wrong.
    My problem about interval value because of it has very small value to increase so in graph have look not good of axisY.
    Please help me :(

    #17530

    Suyash Singh
    Moderator

    @rayateng,

    Are you looking for interval?
    If this doesn’t suit your requirements, can you please share pictorial representation or jsfiddle reproducing the issue you are facing so that we can understand it better & help you out.

    __
    Suyash Singh
    Team CanvasJS

    #17532

    rayateng
    Member

    this is my code:
    <script>
    window.onload = function () {

    var dps = []; // dataPoints
    var chart = new CanvasJS.Chart(“chartContainer”, {
    title :{
    text: “Dynamic Data”
    },
    data: [{
    type: “spline”,
    markerType: “none”, //”circle”, “square”, “cross”, “none”
    lineThickness: 4,
    color: “black”,
    dataPoints: dps
    }]
    });

    var xVal = 0;
    var yVal = 0;
    var updateInterval = 100;
    var dataLength = 1; // number of dataPoints visible at any point
    var ms = 0;

    var updateChart = function (count) {

    count = count || 1;

    for (var j = 0; j < count; j++) {
    yVal = Math.floor(100 * Math.pow(Math.E, 0.00006 * ms)) / 100;
    dps.push({
    x: xVal,
    y: yVal
    });
    xVal = xVal+0.02;
    ms=ms+100;
    }
    console.log(‘X= ‘+JSON.stringify(xVal)+’ Y= ‘+JSON.stringify(yVal));

    //=========== yVal ==================
    if(yVal <= 1.8){
    chart.options.axisY = {
    gridThickness: 0,
    suffix: “x”,
    viewportMinimum:1,
    viewportMaximum:1.8,
    interval:0.2,
    };
    }
    else if(yVal <= 3.03){
    chart.options.axisY = {
    gridThickness: 0,
    suffix: “x”,
    viewportMinimum:1,
    interval:0.01,
    };
    }
    //=========== xVal ==================
    if(xVal <= 1.9800000000000013){
    chart.options.axisX = {
    viewportMinimum:0,
    viewportMaximum:2,
    interval:0.5,
    };
    }
    else if(xVal <= 3.700000000000003){
    chart.options.axisX = {
    viewportMinimum:0,
    interval:0.5,
    };
    }
    chart.render();
    };

    updateChart(dataLength);
    setInterval(function(){updateChart()}, updateInterval);

    }
    </script>

    #17533

    rayateng
    Member

    I’m sorry maybe you hard to understand my meaning. But please test on my code you will see axisY has many interval so how can I custom it?

    • This reply was modified 1 week, 3 days ago by  rayateng. Reason: write wrong
    #17552

    Suyash Singh
    Moderator

    @rayateng,

    The interval you are setting for axisY is small, which is why labels start overlapping after a few updates. Setting interval to a larger value or letting CanvasJS handle it automatically (by commenting out the interval) should work fine in your case.

    ___
    Suyash Singh
    Team CanvasJS

    #17553

    rayateng
    Member

    Thank you very much for your help. Could I ask you some about how to show back to default template of chart line?

    #17575

    Suyash Singh
    Moderator

    @rayateng,

    You can reset the interval back to CanvasJS defaults by setting it to null & re-rendering the chart.

    If this doesn’t suit your requirements, can you please brief us about your requirements more so that we can understand it better & help you out.

    ___
    Suyash Singh
    Team CanvasJS

    #17577

    rayateng
    Member

    Thank you brother for help me :)

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

You must be logged in to reply to this topic.