Real time charts

help
1

Hello fellow developers,

I need to display realtime charts from data in some collections.
My use case is very simple :

  • client insert data
  • chart is updated in real time.

Here is my repo : https://github.com/skini26/TelemetryDashboard

I’m trying using d3.js and nvd3 (I have the two smart packages), but I can’t display anything, I have this following exception :
Exception from Tracker afterFlush function: undefined is not a function
TypeError: undefined is not a function

I know it is caused because of the this.autorun() inside the template.rendered(), but all examples use this and I don’t understand why it’s doing this.

Other question, I want to display the last inserted document in my Temperature collection, how can I do that ? findOne() returns the first one and not the last one.

All the data flow is working, my only real problem is the front end and I’m very bad at it (I an ‘‘old’’ Java EE backend developer).

Thank you in advance.

1 Like
2

  1. Simply remove .transitionDuration(350) in tempGauge.js and tempChart.js.

  2. var lastdoc = Temperature.find({}, {sort: {timestamp: -1}, limit:1}).fetch();

1 Like
3
  1. Oh it works now ! But why is this a problem ? How can I get the transitions then ?
  2. Is it not bad for performance to sort everytime I need the last doc ? Since this will be called maybe more than once per second and on a lot of other collections too.

And another question which is not really related :
I find it very difficult to code in JS, I was used to statically typed language and to the javadoc, now I don’t really know if my code works before executing it, and the big problem too is that I can’t find the available methods and what they do without reading the doc at the same time (not just with Meteor API, but let’s say with d3).

4
  1. if you need transition it’s .transition().duration(350) :wink:
  2. if you need just the last temp, you can put it in a Session.set(“lastTemp”, lastTemp) and call it with Session.get(“lastTemp”)
  3. unit testing is the way -> look at https://github.com/meteor-velocity/velocity
    I hope you’ve seen than meteor reloads automatically when you update code, with velocity tests are also run again.
5

Alright !
I did this and it’s working and it’s more performant than sorting the DB each time :

if(Meteor.isClient){
MotorTemperatures.find().observe({
added: function(temp){
Session.set(“actualMotorTemp”,temp);
}
});
}

Thank you for your help. I’ll dive into the unit tests later, for now I think I’ll try webstorm, it has great debuging features.

Last question : What do you suggest me to use for the charts, am I doing it right ? are there better chart libraries ?

1 Like
6

yes d3.js is ok for this kind of graphs, have a look at http://dc-js.github.io/dc.js/ based on d3 that gives crossfilter capabilities (sync multiple graphs) and large datasets -> see Nasdaq example.

1 Like
7

You could also look at highcharts. I believe there are some Meteor highcharts packages.

http://highcharts.com

2 Likes
8

I found simply wrapping C3.js worked well and was quite easy to update.
Here’s an example of an updating chart: http://c3js.org/samples/chart_bar_stacked.html

9

Here is the Meteor package of Highcharts. If you want reactive charts, you can take a look at the examples. If you have further questions, just ask :slight_smile:

10

Hi Sir @robfallows I hope you are doing well .
I have question regarding your answer, actually i am using chart.js with the plugin react-chart.js and chartjs-plugin-streaming , but when I use the usesubscribe and use find to get the new data, all graph change and start over from the beginning.How can i fix the problem?