Home Forums Chart Support Points are displayed with a delay rather than immediately

Points are displayed with a delay rather than immediately

Viewing 2 posts - 1 through 2 (of 2 total)
  • #45837

    I encountered this problem when displaying data in real time: the graph is not displayed until a certain number of points have accumulated. As soon as there are enough points (I don’t know exactly how many points are needed), they are “spitted out” at once and a graph is drawn. Then the points are added and drawn smoothly. But in the first moments there is an accumulation and a sharp display. I found a workaround – specify minimum on the X axis, for example the current time minus 1 minute, and then the graph begins to be drawn from the first point and smoothly. But now I need to remove this temporary smooth display fix.
    Please tell me, is there any setting that allows you to display data from the first point, without accumulating the minimum required points along the X axis?
    Example, interval 1 minute. The data (dots) comes every 3 seconds, and with this setup I will only see them after 30-60 seconds.

    axisX: {
          interval: 1,
          intervalType: 'minute',
          labelFormatter: function (e) {
            return CanvasJS.formatDate(e.value, 'HH:mm:ss.ff');
          },
          gridThickness: 1,
          gridColor: '#9C9998',
          xValueType: 'dateTime',
          xValueFormatString: 'HH:mm:ss',
          crosshair: {
            enabled: true,
            shared: true,
            snapToDataPoint: true,
            labelFormatter: function (e) {
              return CanvasJS.formatDate(e.value, 'HH:mm:ss');
            }
          },
          stripLines: [],
          labelWrap: false,
          labelAutoFit: true,
          labelAngle: 0
        },
    

    When configured with a minimum, the points are displayed immediately.

    axisX: {
          minimum: new Date().getTime() - 60000,
          interval: 1,
          intervalType: 'minute',
          labelFormatter: function (e) {
            return CanvasJS.formatDate(e.value, 'HH:mm:ss.ff');
          },
          gridThickness: 1,
          gridColor: '#9C9998',
          xValueType: 'dateTime',
          xValueFormatString: 'HH:mm:ss',
          crosshair: {
            enabled: true,
            shared: true,
            snapToDataPoint: true,
            labelFormatter: function (e) {
              return CanvasJS.formatDate(e.value, 'HH:mm:ss');
            }
          },
          stripLines: [],
          labelWrap: false,
          labelAutoFit: true,
          labelAngle: 0
        },
    

    Please tell me how can I see the points immediately on the chart without setting a minimum?

    #45840

    @diano4ka,

    CanvasJS chart seems to be working fine on the initial render itself. Can you kindly create a JSFiddle or a sample project reproducing the issue and share it with us over Google Drive or OneDrive so that we can look into the code, run it locally to understand the scenario better, and help you out?


    Thangaraj Raman
    Team CanvasJS

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

You must be logged in to reply to this topic.