Real time interactive graph

[saisubathra08]

I'm currently working on a project that requires me to use a real time interactive graph. I was wondering if I could use this library for that.

Would anyone be able to give me some pointers as to how I should proceed to use this library for the same.

Note: It should be real time and should be interactive (zoom, crosshair, etc)

Any help is greatly appreciated.

Thanks.

[jckr]

Hi, real time could mean several things so:

• if you mean real-time, live data, vs static data, react-vis is agnostic on that front. React-vis components will update (and if needed animate) when receiving new data through props. In other words, creating a static chart with data that won't be updated and a chart with data that will continuously refresh is the same as far as react-vis is concerned.
• if you mean interactive, then the various components have various methods to interact with them (see https://uber.github.io/react-vis/documentation/general-principles/interaction). The interactions described there are the easiest to implement with react-vis.

There is no direct zoom method, but it can be done though such as in this example: https://uber.github.io/react-vis/examples/charts/zoomable-chart

[abramjstamper]

Not to hijack this thread's topic - I have implemented these graphs in an application where I plan to use them to display real time graphs, and it works great for that. As new points are added it automatically animates the new point perfectly. However, my question is there a way to display the chart when the data prop is []. In my implementation, it's blank until data > 0.

[dgaitsgo]

@abramjstamper Could you explain more how you did that please? I'm trying to implement path transitions like these but my react-vis animations are wobbling if I just set animate and am not sure how to interpolate the transform of the x-axis and not just between the old and new y values.

[abramjstamper]

Well, animations and changing the dataset just worked out of the box for me. I set animate={true}, which by default will not wobble. I think (like any react component), react-vis is just doing a shallow comparison of the data to see if it changed, and if it did, it will re-render the component. The only addition of the animate prop is to animate between those changes of state.

See this link for more info on animations

[dgaitsgo]

Thanks for the info! I'll see what I can do.

[mcnuttandrew]

@abramjstamper there is a way to make empty charts that is currently part of the library! It is unfortunately currently undocumented but #882 changes that, in the mean time you can provide dontCheckIfEmpty={true} as a prop to XYPlot and get as many empty charts as you'd like

[mcnuttandrew]

This question of real time charts has come up a few times now. It would maybe be good to make a fake real time chart example to show how it would be done? Something like an outer component that has a ticker and creates random data point over time. Like a more sophisticated version of the clock example https://github.com/uber/react-vis/blob/master/showcase/sunbursts/clock-example.js

(Would welcome a PR)

[dgaitsgo]

Once I figure it out, I'd be happy to make a PR :) Hold my seltzer.

[dgaitsgo]

Hello,

I wanted to give an update and see if you all had any ideas. I ran the clock example and indeed, it updates on a 'tick' basis with smooth transitions between renders. I think this works because time being continuous when you this.setState({time: getSeconds()}), 100), you're guaranteed to have a new value and can smoothly transition with an animation between. My use case is a bit different. My data comes in discrete steps, demographic data of Conway's Game of Life (generations, population, etc.) I can make the real time graph look 'smoother' (but still not seamless) by setting the interval timeout really low like in the clock example. But then the GoL is too fast and uninteresting to watch. Anything else, no matter how I configure the animations, I'll get that wobbly effect from the y values being interpolated. I got a stable real time graph by setting no animations and the interval to around 1 second. But then the graph jumps between updates and that's not charming.

I implemented the whole thing in d3 just to really see how the magic happens. The updates between steps are smooth because the y values aren't moving. It adds the latest data point (clipped from our view) then shifts the x-axis left to bring out the hidden value. Now that I get the problem a bit better, I'll try to implement it in react-vis, but would love to hear your ideas.

how I did it in d3 based on the reference I provided earlier is here.

[trinicoder]

I want to implement a real-time data visualization app with react-vis and meteorjs

[luk3Sky]

I have the same needs just like @saisubathra08 's, for an application where a real-time graph should be implemented with the crosshairs with vertical and horizontal lines and zooming just like in TradingView. Unfortunately, TradingView is not available in react realm. If it was, that would definitely fill the requirement.

Since, there is only a horizontal line in the react-vis crosshairs, I've tried so many methods to change the crosshair in the react-vis code base, but couldn't do so. Is there any way to overcome this in react-vis or any outsource much like tradingview, which full fill the above scenarios please let me know. Thanks.