0

I am trying implement dynamic line plot using SVG polyline. And I need to somehow show gaps in the plot for invalid/unavailable data. This happens when XHR times out OR the fetched value is not a number.

The workaround I tried was inserting an extreme value (3.4e+8) in place of gaps in the plot and then setting a restriction on the range of values that can be plotted.

As I am controlling the minimum and maximum values displayed in the plot, the extreme values naturally goes out of the plot and all valid values are displayed in the plot. Thus gaps are implemented.

The problem is that firefox and chrome do not display the "extreme value" but IE9 does. So I have plot lines going outside the intended graph area.

I know that IE9 might be rendering SVGs in a completely different way. But is there any workaround for this?

kiran
  • 525
  • 1
  • 9
  • 26

2 Answers2

2

Are you stuck with using <polyline>? If not, it would be much simpler just to use <path>. Whenever you needed to skip, just use a move.

<path d="M 0,10 L 1,9 2,13 3,7 M 5,11 L 6,21"/>

Here the segments between x=3 and x=5 are skipped.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
0

This issue was solved here

Basically, I need to set the style attribute "overflow" as "hidden":

style="overflow: hidden;"
Community
  • 1
  • 1
kiran
  • 525
  • 1
  • 9
  • 26