Drawing empty smooth line graph

[ujwal-setlur]

trafficstars

I would like to put up a graph with no data, just x and y axes. If I pass in empty data arrays, I get an exception. How can I draw an empty graph?

[marzolfb]

Just yesterday I discovered a way to scale a chart independent of the data items (see #31). I'm working on a PR now to make these scaling options configurable and I believe my changes will address your use case as well but I will make sure to test for this.

[ujwal-setlur]

Thanks you. I was about to embark on making the changes and issuing a pull request, but if you are already doing it, that's great!  Any ETA for this? Thanks! --ujwal

Get Outlook for iOS

On Wed, Jan 18, 2017 at 11:08 AM -0800, "Bret Marzolf" [email protected] wrote:

Just yesterday I discovered a way to scale a chart independent of the data items (see #31). I'm working on a PR now to make these scaling options configurable and I believe my changes will address your use case as well but I will make sure to test for this.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[ujwal-setlur]

In the meantime, can I make an invisible line, ie line color and shading the same as the background?

[marzolfb]

Invisible line approach is imteresting but one I don't think is supported without code modifications as there is only one color option driving both background and line (different shades of the same color).

I made an attempt to try your use case with the work I had in progress and it looks like my assumption about my work handling this use case is incorrect. I also got an exception and it seemed to be triggered as a result of the way the pathsjs code is constructed. But I didn't look too closely at it.

If you'd like to make at attempt at addressing your issue in a PR, go ahead. Feel free to bounce ideas around here.

[ujwal-setlur]

OK, I will hack at it. Just curious, why isn't it as simple as just drawing the x-axis and y-axis, and not drawing any data at all?

[ujwal-setlur]

OK, I achieved what I needed by doing an "invisible" line by setting:

    showAreas: false,
    strokeWidth: 0

[marzolfb]

The strokewidth: 0 idea is a creative workaround and I'm glad you found something that works for you for now.

Your other idea of drawing the x and y axis and not drawing data would also work. Unlike your strokewidth: 0 approach, this one would require a minor code change to implement a showLines option similar to the existing showAreas option.

Both of those approaches work but are less than ideal as you are having to provide "fake" data points that won't be displayed in order to achieve your objective.

The one, more-natural approach I had hoped would work is to provide an empty dataset with a min and max value for the chart (introduced recently in #53) such as min: -1000, max: 2000. Unfortunately, if you use data: [], nothing is drawn for the chart at all, and if you use data: [[]] you get a undefined is not an object error (see below).

I think we should keep this issue open until we are able to provide an empty dataset with a min/max value and have the chart draw its X/Y axes appropriately. Until then, your strokewidth: 0 idea is probably the simplest/easiest thing to do.

Here is a more detailed explanation of why the empty dataset approach does't work and some documentation around buggy behavior for some various scenarios...

There are some natural assumptions made by paths-js (a major dependency relied on in constructing these charts) on the incoming data structure. Paths-js assumes that each array used to construct a line has at least one object inside the array with one key and value represent the X point on a graph and the other representing the Y point on the graph. There are also other natural assumptions made by this react-native-pathjs-charts lib - one being that there are at least two X/Y objects in an array to construct a line. Anything that deviates from these assumptions is prone to various problems:

• If you provide an empty set of data (data: [[]]), paths-js throws this error:

undefined is not an object (evaluating 'sorted[0]')

• if you provide one data point at 0,0 (or even all data points all at 0,0) like

data = [
      [{
        "x": 0,
        "y": 0
      }]
    ]

you get an interesting result:

• one data point at something other than 0,0 (like (32,60)) is also interesting:

• even more fun is if you have one data point at 0,0 and provide a min and max value for the chart (introduced recently in #53) such as min: -1000, max: 2000 - you will see this:

[ujwal-setlur]

Thanks for the detailed explanations. Yes, I had actually tried all those experiments :). I agree we should keep this open until we find an empty data set solution. This will likely involve changes in the pathjs library though, right?

[marzolfb]

Yes, likely. On my mental todo list is creating an issue on that project. You are welcome to do this as well