Forum Stats

  • 3,769,970 Users
  • 2,253,039 Discussions
  • 7,875,254 Comments

Discussions

Charts based on real-time data

Hari_639
Hari_639 Member Posts: 1,484 Silver Trophy
edited Nov 30, 2015 12:54AM in Oracle JET

Dear All,

Using Oracle JET, is it possible to develop charts based on real-time data? for e.g. something like described here, a line chart that automatically displays new data points as it receives.

If yes, can you please provide some hints how this can be achieved?

Regards,

Hari

Hendrik.GossensHari_639

Answers

  • Hendrik.Gossens
    Hendrik.Gossens Member Posts: 8 Blue Ribbon
    edited Nov 26, 2015 5:11AM

    Hi,

    this should work. You should think about how to get the real-time data. IMHO this is typically a use case for websockets. To wire up real-time data with your JET application you have to update your ViewModel when receiving new data.

    Regards,
    Hendrik

    Hari_639
  • Hari_639
    Hari_639 Member Posts: 1,484 Silver Trophy
    edited Nov 26, 2015 6:37AM

    Hi Hendrik,

    Thank you. I was under same impression, but I just want to confirm.

    Web-sockets work over new protocol ws/wss and may need new server set-up. For this particular case, this should work just fine with Server Sent Events (SSE) as-well? Isn't it?

    And when we update ViewModel (via SSE or web-sockets), will the charts transition be smooth?

    Does JET visualization components are designed/developed to work under these kind of scenarios as-well? or only good to use with static data (charting components knows the data during initialization itself)?

    Regards,

    Hari

  • Frank Nimphius-Oracle
    Frank Nimphius-Oracle Member Posts: 29,689 Bronze Badge
    edited Nov 26, 2015 6:50AM

    Hi,

    WebSockets is an HTML5 specification. There is nothing specific you do for or in JET to use it. So whatever you find on the Internet to setup web sockets is what you can use. In the web socket event listeners you create, you manipulation the view model (make sure this implements observable so the bound UI component is refreshed). E.g you can set up an array to hold the data, which then you update through web sockets

    self.seriesData = ko.observableArray([ ... initial values here ]}

    This then is referenced in the data-binding of the chart component

    Frank

    Hendrik.GossensHari_639
  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,700 Employee
    edited Nov 26, 2015 10:40AM

    Henry's answers are correct, but it should also be noted that in answer to your question about Server Sent Events(SSE), there are no current versions of Microsoft browsers that support SSE.  So if you have any requirements for customers being allowed to use IE11 or Edge, SSE would not work with them.

    As for setting up WebSocket ws/wss protocols, yes it takes a more modern application server if you plan to set up the server side with Java.  Most of the major App servers now support this though. There are plenty of examples on the Internet on how to setup WebSocket services using anything from Node to Java and PHP.

    --jb

    Hari_639
  • Hari_639
    Hari_639 Member Posts: 1,484 Silver Trophy
    edited Nov 26, 2015 11:55PM

    Thank you @Frank Nimphius-Oracle and @John

    I will try web-sockets option and I will update how it goes.

    Regards,

    Hari

  • Hugh Zhang-Oracle
    Hugh Zhang-Oracle Member Posts: 193 Employee
    edited Nov 27, 2015 7:51PM

    On the part about whether the JET visualizations are designed to work well with dynamic data, they absolutely are. Each visualization supports contextual data change animations that's intended to help the user to understand the exact data change that occurred. I'm planning to write a blog post about this in the next couple weeks, but it's one of the things I'm most proud of in our components.

    For the charts, we do a 3-phase animation that first handles any deletes, then updates, and finally inserts. Separating out these changes into separate phases helps to make the underlying data changes more understandable, and we also have optional animation indicator arrows to identify exactly which items are changing. This is especially useful when a value change results in a change of axis extents, which can cause all the data to shift. We've also optimized some use cases for data analysis, such as the stacking and unstacking of bars, as well as common configuration editor cases like vertical to horizontal orientation changes.

    Hope this helps,

    Hugh

    Hendrik.GossensHari_639
  • Hari_639
    Hari_639 Member Posts: 1,484 Silver Trophy
    edited Nov 30, 2015 12:54AM

    Hi Hugh,

    Perfect! That's sounds so promising. I'm eagerly waiting for your blog post.

    Regards,

    Hari