line chart – x-axis points exceeds pixels on screen chart; how is it reduced?

• June 17, 2020 at 11:42 pm #29602
  
  AaronFII

  My question involves this: if I plot x-y data for say 2 hrs at 1sec intervals, that’s 7200 x-points. However, my chart (canvasjs line chart, working fine i anuglar framework etc.) is only about 1200 pixels across on the screen in my current set up. How does canvasjs get from 7200 to 1200 when it plots the line? Sample every 6th data point? Average the y values of 6 point they plot that as the value for the first one, then repeat for the next 6 and so on? Or something else? I need to know the methodology of how this happens so I can explain it to end users who are worried about “losing data”—we’ve made numerous attempts to explain it is impossible to show 7,200 data points across the screen and some math and such has to happen to make it functional, but they need a concrete explanation and it is not self-evident from initial observation. Without a response, I’ll need to brute force a ton of examples to sort out how it performs this reduction. Many thanks for any assistance.

  June 18, 2020 at 9:44 pm #29616
  
  Manoj Mohan

  @aaronfii,

  We don’t manipulate or skip any dataPoint values to render chart in a screen with lesser pixels. However, dataPoints might get overlapped with each other in case there is huge number of dataPoints compare to available pixels to display. For e.g., let’s say screen with 1000 pixels and chart with dataPoints ranging from 1 to 10000, there might be a possibility that dataPoints with values 10-19 be overlapped with each other and render in one pixel. Moreover, for such scenarios you can set zoomEnabled to true and zoom into a region of interest.

  —-
  Manoj Mohan
  Team CanvasJS

  June 18, 2020 at 11:08 pm #29617
  
  AaronFII

  Manoj, Thank you but this doesn’t quite answer my question. Let’s go with your example of 10,000 data points and 1,000 pixels to display it with values 10-19 “overlapped”. Let’s say they have values [3, 3, 3, 5, 5, 5, 5, 7, 7, 7]. Should I expect to see a vertical line (1 pixel wide) ranging from y-axis value 3 to y-axis value 7? That would include values 4 and 6 that were not in the original set. There is no easy or perfect way to do this and I’m not trying to sharpshoot the software, I just need a detailed answer to give our stakeholders.

  I kinda sorta think it picks a value from that set but does not show the range or a mean or anything based on an initial observation of this. I had a huge data set that I charted and it looked fine then I cut it down and it was still large but it showed some outlier values that would have been captured in a range or average approach. Maybe it just picks the first one of the set, in this example a value of 3, then skips the rest? Then, if I trimmed my dataset from 10,0000 to 2,000, it would be “binning” or grouping them into two value sets and I’d expect to see the first/last of them.

  I’m not interested in Zoom features or anything in this case–just want the details on how it gets the huge (too big) set of data down to the viewable chart.

  Thanks for investigating this. Much appreciated.

  June 18, 2020 at 11:11 pm #29618
  
  AaronFII

  Let me clarify my last post and the problem set were looking at—that array [3, 3, 3, 5, …] was the y-values, not the x-values. So, we have [(1,3),(2,3),(4,3),(5,5),(6,5),(7,5)…] and we have to jam that into something one pixel wide, but it could be multiple pixels high. thanks again.

  June 19, 2020 at 7:52 pm #29630
  
  Manoj Mohan

  @aaronfii,

  As mentioned earlier, we don’t filter or skip any dataPoint values to render chart. Consider this JSFiddle for an example. In the fiddle, you can observe that the dataPoints values { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 } are displayed in same pixel vertically. i.e if multiple dataPoints with different y-values end up sharing the same pixel co-ordinate vertically. In the case of dataPoints with same y value & different x value, it ends up overlapping each other and gets rendered in same pixel co-ordinate vertically & horizontally. Similarly, for same x and y values, dataPoints will be displayed one top of another (overlaps one on top of other).

  In the shared example, even when 1000 datapoints are rendered within 600px chart width, you can clearly observe that we don’t group or skip any dataPoint irrespective of a large number of dataPoints to be displayed in the limited width available.

  —-
  Manoj Mohan
  Team CanvasJS

  June 20, 2020 at 12:55 am #29637
  
  AaronFII

  Manoj, Thank you again. So, I want to make certain that I understand you: Let’s say I have a data point (12, 300) in my dataset and everything else is like under 100 for the y-axis value. So, if all the points are plotted and “overlapping” like you said, then it should include that one outlier point (value = 300) in any chart sizing (where x-axis points are less than pixels {ideal} or where there are many more data points than available width pixels to represent them {the issue I am most concerned about}). Is that right? With that, I’ll go back to my data set and brute force out some examples to prove or disprove this.

  June 22, 2020 at 7:33 pm #29659
  
  Manoj Mohan

  @aaronfii,

  Yes, the dataPoint(12, 300) will be displayed irrespective of the chart width and other dataPoints with y value less than 100 might get overlap with each other in such scenarios.

  —-
  Manoj Mohan
  Team CanvasJS