Home Forums Chart Support Dynamic chart with fixed X Axis

Dynamic chart with fixed X Axis

Viewing 9 posts - 1 through 9 (of 9 total)
  • #15106

    Hi,

    I am trying to make a dynamic chart which has a fixed x-axis.

    I am looking for the x-axis to be in seconds with the left being -60 secs, the center being 0 secs (now) and the right +60 secs. The graph is to be dynamic, so would like the x-axis to remain the same while the data moves left. As per the below screenshot.

    Is this possible with canvasjs? I have had a few attempts but have been unsuccessful.

    Thanks for any help.

    #15107
    #15146

    @jyxx,

    You can create dynamic chart with static x-axis by adding one more axisX and setting it’s stripLines, viewportMinimum and viewportMaximum as per your requirements. Also, you will need to hide the default axisX. Please have a look at below code snippet for axisX properties to be used.

    axisX: [{
        tickLength: 0,
        lineThickness: 0,
        labelFormatter: function(e) {
          return "";
        },
        margin: -5
      }, {
        viewportMinimum: -60,
        viewportMaximum: 60,
        interval: 15,
        stripLines: [{
          value: 0,
          label: "Now",
          labelPlacement: "outside"
        }]
      }],
    

    Also, check out this JSFiddle for complete code.

    Dynamic Chart with Static X-axis Labels using Multiple X-Axis

    ___
    Suyash Singh
    Team CanvasJS

    #27279

    i want to have this same graph but data should be in sync order in which x axis should be static

    • This reply was modified 5 years, 1 month ago by utsavgupta.
    • This reply was modified 5 years, 1 month ago by utsavgupta.
    #27302

    @utsavgupta,

    Can you please brief us further about your requirements along with some example or pictorial representation so that we can understand your scenario better and help you out?

    —-
    Manoj Mohan
    Team CanvasJS

    #27310

    https://canvasjs.com/forums/topic/step-line-chart-with-time-series/
    please see this here is a graph in which i want to set label in y axis and time in y-secondary axis dynamically

    • This reply was modified 5 years, 1 month ago by utsavgupta.
    #27377

    @utsavgupta,

    Please take a look at this documentation page for information on rendering a dynamic chart.

    Adding date and time to axis Y is not available as of now. However, you can take a look at this workaround to achieve the same.

    Line Chart with Time over axisY

    ___________
    Manoj Mohan
    Team CanvasJS

    #27385

    https://www.screencast.com/t/zhwwtIK7LlIn

    Some how it tried to make it and i made this,still i want to label the time available in x-secondary axis want to replace it with some label like M And N

    i want to have this graph

    https://www.screencast.com/t/GuqgXurP

    • This reply was modified 5 years ago by utsavgupta.
    #27404

    @utsavgupta,

    You can achieve the above requirement by formatting the labels of axisX2 using labelFormatter.

    Formatting x-axis labels using labelformatter

    —-
    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.