Highcharts and MongoDB

help
1

Hi everyone,

It might be a silly question but I want to ask anyway :smile:

I want to do some mathematical analysis and want to store them in Mongodb. (this part is easy)

But I want to show these numbers in charts on a page for each data items from directly mongodb. In some ways it looks like a blog system user can create stuff and see them on a page like example.com/data/data_id .

Can you give me an example code for highcharts using data from mongodb ?

2

from their docs, there’s a self-updating chart every 1 second

https://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/

Just put your collection data in the data function.

3

Actually I was looking for something more clear and with mongo stuff.

4

result is from a simple mongo query (Fruits.find …);

 var fruit = _.pluck(result, 'fruit');
 var data = _.pairs(_.countBy(result, "fruit"));

$('#statusChart').highcharts({
credits: {
  enabled: false
},
chart: {
  type: 'pie'
},
title: {
  text: 'fruits'
},
xAxis: {
  categories: _.uniq(fruit)
},
yAxis: {
  title: {
    text: 'Fruit eaten'
  }
},
tooltip: {
  pointFormat: 'Anzahl <b>{point.y:,.0f}</b>'
},
lang: {
  noData: 'not enough data'
},
plotOptions: {
  pie: {
    allowPointSelect: true,
    cursor: 'pointer',
    dataLabels: {
      enabled: false
    },
    showInLegend: true
  }
},
series: [{
  animation: false,
  data:data,
        point:{
          events:{
              click: function (event) {

                     Session.set('fruit',[this.name]);
                     Router.go('/fruits')
              }
          }
      },  
  noData:"No data to display"
 }]
});
1 Like
5

I’m sorry for asking that but can you be more specific about this code ?

var fruit = _.pluck(result, ‘fruit’);
var data = .pairs(.countBy(result, “fruit”));

6

No problem. _,pluck,_pairs,_countBy are functions from underscore. http://underscorejs.org

You propably can´t use it 1:1 with your data. It depends on how your data looks and what kind of chart / data you need.

Highcharts has many examples you can look at. Look at the json data the examples use and shape your json results from mongodb accordingly. Underscore is just one option for it.

1 Like
8

Hey, I really did not get it. Can you look at my code ?

https://github.com/mustafaozguner/meteor-wind-power/blob/master/client/view/view.jade

https://github.com/mustafaozguner/meteor-wind-power/blob/master/client/view/view.js

9

can anyone online help me with this ? :confused:

10

I have reactively updating Highcharts in one of my apps. I could probably offer more targeted help if you can tell me exactly what you are wanting to do.

11

Thats what I have done in this demo. I am pretty sure that it will work with collections. If you have any questions feel free to ask!

12

I have two array objects in my mongodb collections. And I want to show them in highchart on X and Y. for example windspeed_arr[15,12,14,10] power_arr[100,122,140,155] . power_arr[i] is the output power of the windspeed_arr[i] . I want to show them on a line chart.

13

I prepared two code examples. The first is a very basic example which redraws the chart everytime something in the Data collection changed. If you dont want that you might like example two. Here we update the data of the chart everytime something changes in the collection but this time only the new point is added to the chart. I hope i understood your problem correctly :smiley: If thats not the case, can you provide a jsFiddle example of the chart you want?

14

Did @jhuenges answer help or are you still having problems?

15

This is a great example but it looks like its for a none meteor app. Would you know how to format this for Meteor and what atmosphere package implements it?

16

The missing piece of information is within the data callback. Instead of generating a random number, add an observer onto your collection and use it to append to a list as an initial test. Eg:

data: (function() {
  let data = [];
  Stubs.find().observe({
    addedAt: (doc, atIndex) => {
      data.push({
        x: atIndex,
        y: doc.score
      })
    }
  });
  return data;
}())
1 Like
17

The easiest way would be to take a timeout function and rerun the data gathering. However, this would generate a lot of overhead. You could use @corvid s solution or use one of the other examples.

18

Hello,
I have got your query and I have package about MongoDB, This package help you to solve your query. You can take advantage of this package, here many other problem about MongoDB also discussed. To see complete package visit the link:https://zappysys.com/blog/ssis-loading-data-into-mongodb-upsert-update-delete-insert/
Hope it will help you!!!