get data from mongodb

[aligos]

please help, i want to create charts with package meteor add maazalik:highcharts, using columnDemo https://github.com/jhuenges/highcharts-demo/blob/master/client/demos/columnDemo.js but i did'nt know how to get data from databes to this charts, i am using meteor example todos. https://github.com/aligos/pomodoro/blob/master/client/templates/chart.js

[jhuenges]

Can you check if this helps? If not, I can provide you with some more help.

[aligos]

actually i want to ask example like that :smile:

[jhuenges]

Okay, I have to see if I have some time later today.

[aligos]

I have managed to make monthly count, https://github.com/aligos/pomodoro/blob/master/client/templates/chart.js but I want to make per category as an example here, https://github.com/jhuenges/highcharts-demo/blob/master/client/demos/columnDemo.js

[jhuenges]

Can you give me an example of how your data looks (Todos.findOne({...}))? I am not 100% sure i understand what you want.

[aligos]

this ss https://i.imgur.com/IY9DwZ7.png

and this my route https://github.com/aligos/pomodoro/blob/master/lib/router.js

[jhuenges]

Try this:

var chart;
/*
 * Function to draw the column chart
 */
function builtColumn(chartData) {

  chart = $('#container-column').highcharts({

    chart: {
      type: 'column'
    },

    title: {
      text: 'Monthly Todos'
    },

    credits: {
      enabled: false
    },

    xAxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
      ]
    },

    yAxis: {
      min: 0,
      title: {
        text: 'Todos'
      }
    },

    tooltip: {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:f}</b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
    },

    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      }
    },

    series: chartData

  });
}

/*
 * Call the function to built the chart when the template is rendered
 */
Template.columnDemo.onRendered(function() {
  Tracker.autorun(function() {
    var data = Todos.find().fetch();

    // if there is no data, abort!
    if (!data || data === []) return;

    // Group data by listId
    data = _.groupBy(data, function(todo) {
      return todo.listId
    });

    // Array that contains the data for the chart
    var chartData = [];
    // Iterate over each list
    _.each(data, function(list) {
      // Create an object which contains the name and data for the list
      var listData = {};
      // Get the name/id of the list
      // This can be changed to use an actual name
      listData.name = list[0].listId;
      // Count the numbers of todos per month
      listData.data = _.pluck(list, 'bulan');
      listData.data = _.countBy(listData.data, function(bulan) {
        return bulan
      });
      // Add default values to all of the month - just in case there is no todo
      // so that the chart is still able to display everything correctly
      listData.data = _.defaults(listData.data, {
        Jan: 0,
        Feb: 0,
        Mar: 0,
        Apr: 0,
        May: 0,
        Jun: 0,
        Jul: 0,
        Aug: 0,
        Sep: 0,
        Oct: 0,
        Nov: 0,
        Dec: 0
      });
      listData.data = _.toArray(listData.data);
      chartData.push(listData);
    });

    // if there is no chart, built it
    if (!chart) {
      builtColumn(chartData);
      return;
    }

    // Otherwise, simply update the data if there is chartData
    if (chartData.length !== 0) {
      chart.highcharts().series[0].update({
        data: chartData
      });
    }
  });
});

[aligos]

thank you very much, you really helped Cool bro

[aligos]

i cannot change listId to name :cry:

[jhuenges]

You could try to do this in the _.each()-block:

listData.name = Lists.findOne(list[0].listId).name;

or

var listSource = Lists.findOne(list[0].listId)
if (listSource) {
  listData.name = listSource.name;
} else {
  listData.name = "unknown list"
}

[aligos]

work again :smile: I have tried from this morning but do not succeed

[aligos]

Do you know why i have to make reload page to get chart?, before i use datetimepicker and need reload page too

[jhuenges]

I am not quite sure :/ Maybe post this question on the Meteor forum.

[aligos]

@jhuenges sorry before, when i add data at February, but in chart show in January, but in mongo Feb you can try this https://github.com/aligos/todomoro.git

[jhuenges]

Can you add console.log(listData); here, here, here and here?

Please give me the output and I will try to find a solution.

[aligos]

wait a minute :smile:

[aligos]

Object {name: "Change this default list name", data: Array[3]} _colorIndex: 0 data: Array[12] name: "Change this default list name" proto: Object

SS http://i.imgur.com/YdfjGmu.png

[jhuenges]

Oh my bad! Can you use listData.data?

[aligos]

do you mean console.log(listData.data)?

[aligos]

this is when i console.log(listData.data)

http://i.imgur.com/qxlHeLk.png

[jhuenges]

Okay, got it! Please exchange these lines with the following code:

var monthLookup = {
        Jan: 0,
        Feb: 1,
        Mar: 2,
        Apr: 3,
        May: 4,
        Jun: 5,
        Jul: 6,
        Aug: 7,
        Sep: 8,
        Oct: 9,
        Nov: 10,
        Dec: 11
};
// This is the data used to display the values in the chart
// Each 0 represents a month
var monthArray = [0,0,0,0,0,0,0,0,0,0,0,0];

// Iterate over listData.data to assign the values to the correct "month-slot"
for(var key in listData.data) {
  if(monthLookup[key]) {
    monthArray [monthLookup[key]] = listData.data[key];
  }
}

// Reassign the array
listData.data = monthArray;

I hope this helps

[jhuenges]

Okay, got it! Please exchange these lines with the following code:

var monthLookup = {
        Jan: 0,
        Feb: 1,
        Mar: 2,
        Apr: 3,
        May: 4,
        Jun: 5,
        Jul: 6,
        Aug: 7,
        Sep: 8,
        Oct: 9,
        Nov: 10,
        Dec: 11
};
// This is the data used to display the values in the chart
// Each 0 represents a month
var monthArray = [0,0,0,0,0,0,0,0,0,0,0,0];

// Iterate over listData.data to assign the values to the correct "month-slot"
for(var key in listData.data) {
  if(monthLookup[key]) {
    monthArray[monthLookup[key]] = listData.data[key];
  }
}

// Reassign the array
listData.data = monthArray;

I hope this helps

[aligos]

January data can not change the array http://i.imgur.com/jRyA6IY.png http://i.imgur.com/hd7SFPW.png

[jhuenges]

I guess you need to take another look at this part

...

// Iterate over listData.data to assign the values to the correct "month-slot"
for(var key in listData.data) {
  if(monthLookup[key]) {
    monthArray[monthLookup[key]] = listData.data[key];
  }
}

...

I am gone for 3 weeks, so I cant help you right now.

[VeilleurTrytoFix]

hi i'm trying to use your example @jhuenges console.log on client side return

Exception from Tracker recompute function: meteor.js:913:11 TypeError: chart.highcharts(...).series[0] is undefined

and i get : no data to display in my template

Eveorder.find().count() ->

24

var chart;
/*
 * Function to draw the column chart
 */
function builtColumn(chartData) {

  chart = $('#container-column').highcharts({

    chart: {
      type: 'column'
    },

    title: {
      text: 'Monthly Todos'
    },

    credits: {
      enabled: false
    },

    xAxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
      ]
    },

    yAxis: {
      min: 0,
      title: {
        text: 'Todos'
      }
    },

    tooltip: {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:f}</b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
    },

    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      }
    },

    series: chartData

  });
}

Template.evemarket.onCreated(function() {
  this.subscribe('evemarketpublish');
});

/*
 * Call the function to built the chart when the template is rendered
 */
Template.evemarket.onRendered(function() {
  Tracker.autorun(function() {
    var data = Eveorder.find().fetch();
    //console.log("eveorderfind"+data);

    // if there is no data, abort!
    if (!data || data === []) return;

    // Group data by listId
    data = _.groupBy(data, function(todo) {
      return todo.listId
    });

    // Array that contains the data for the chart
    var chartData = [];
    // Iterate over each list
    _.each(data, function(list) {
      // Create an object which contains the name and data for the list
      var listData = {};
      // Get the name/id of the list
      // This can be changed to use an actual name
      listData.name = list[0].listId;
      // Count the numbers of todos per month
      listData.data = _.pluck(list, 'bulan');
      listData.data = _.countBy(listData.data, function(bulan) {
        return bulan
      });
      // Add default values to all of the month - just in case there is no todo
      // so that the chart is still able to display everything correctly
      listData.data = _.defaults(listData.data, {
        Jan: 0,
        Feb: 0,
        Mar: 0,
        Apr: 0,
        May: 0,
        Jun: 0,
        Jul: 0,
        Aug: 0,
        Sep: 0,
        Oct: 0,
        Nov: 0,
        Dec: 0
      });
      listData.data = _.toArray(listData.data);
      chartData.push(listData);
    });

    // if there is no chart, built it
    if (!chart) {
      builtColumn(chartData);
      return;
    }

    // Otherwise, simply update the data if there is chartData
    if (chartData.length !== 0) {
      chart.highcharts().series[0].update({
        data: chartData
      });
    }
  });
});

Have you an idea for fixe this ?:o

[jhuenges]

@keepthefaya I have a couple of questions:

1. I assume the chart is built correctly? So there is a container with the id="container-column"?
2. var data = Eveorder.find().fetch(); deliveres data?
3. In the autorun: is chart defined?

[VeilleurTrytoFix]

1 : just change template 2 : yes Eveorder.find().count() (client side) ===> 24 3 : i dont understand what do you mean? :octopus:

**client.html**
<template name="evemarket">
    <h2>EveMarket</h2>
       <div class="grapik">
        <div id="container-column" style="min-width: 310px; height: 400px;"></div>
        <div class="title-reload"><span class="icon-reset render-chart"></span></div>
    </div>
</template>

client.js

var chart;
/*
 * Function to draw the column chart
 */
function builtColumn(chartData) {

  chart = $('#container-column').highcharts({

    chart: {
      type: 'column'
    },

    title: {
      text: 'Monthly Todos'
    },

    credits: {
      enabled: false
    },

    xAxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
      ]
    },

    yAxis: {
      min: 0,
      title: {
        text: 'Todos'
      }
    },

    tooltip: {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:f}</b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
    },

    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      }
    },

    series: chartData

  });
}

Template.evemarket.onCreated(function() {
  this.subscribe('evemarketpublish');
});

/*
 * Call the function to built the chart when the template is rendered
 */
Template.evemarket.onRendered(function() {
  Tracker.autorun(function() {
    var data = Eveorder.find().fetch();
    //console.log("eveorderfind"+data);

    // if there is no data, abort!
    if (!data || data === []) return;

    // Group data by listId
    data = _.groupBy(data, function(todo) {
      return todo.listId
    });

    // Array that contains the data for the chart
    var chartData = [];
    // Iterate over each list
    _.each(data, function(list) {
      // Create an object which contains the name and data for the list
      var listData = {};
      // Get the name/id of the list
      // This can be changed to use an actual name
      listData.name = list[0].listId;
      // Count the numbers of todos per month
      listData.data = _.pluck(list, 'bulan');
      listData.data = _.countBy(listData.data, function(bulan) {
        return bulan
      });
      // Add default values to all of the month - just in case there is no todo
      // so that the chart is still able to display everything correctly
      listData.data = _.defaults(listData.data, {
        Jan: 0,
        Feb: 0,
        Mar: 0,
        Apr: 0,
        May: 0,
        Jun: 0,
        Jul: 0,
        Aug: 0,
        Sep: 0,
        Oct: 0,
        Nov: 0,
        Dec: 0
      });
      listData.data = _.toArray(listData.data);
      chartData.push(listData);
    });

    // if there is no chart, built it
    if (!chart) {
      builtColumn(chartData);
      return;
    }

    // Otherwise, simply update the data if there is chartData
    if (chartData.length !== 0) {
      chart.highcharts().series[0].update({
        data: chartData
      });
    }
  });
});

server.js

Meteor.publish('evemarketpublish', function() {
    return Eveorder.find();
});

[jhuenges]

In these lines:

// Otherwise, simply update the data if there is chartData
    if (chartData.length !== 0) {
      chart.highcharts().series[0].update({
        data: chartData
      });
    }

chart.highcharts().series[0] is not defined. So can you check if chart and chart.highcharts() are working?

[VeilleurTrytoFix]

I try to also look in my direction but without results at this time, I got in client side console

No data to display" and "Exception from Tracker function Recompute: meteor.js: 913: 11 TypeError. Chart.highcharts (...) series [0] is undefined

chart                     return  -> Object { length: 1, context: HTMLDocument → evemarket, selector: "#container-column", 1 de plus… }
chart.hightcharts()  return  -> [object Object]

[VeilleurTrytoFix]

series array isset, but array series.length return --> 0

`series \ receveid chartData, i try console.log(charData), he return to me Array [ Object ]**

0:Object ->data: Array[13] ->name: undefined ->proto:Object

`

[jhuenges]

Do you have a repository? Its hard for me to find the mistake

[VeilleurTrytoFix]

Yes just uploaded /

https://github.com/keepthefaya/meteortest

[jhuenges]

Okay, I ll take a look later today.

[VeilleurTrytoFix]

the creation working, it does not work during the update only from what I could see

[jhuenges]

I am sorry! I didnt get to it today ...

[VeilleurTrytoFix]

no problem, it's nice to look at you my problem already;)

[jhuenges]

@keepthefaya the .meteor folder is missing from your repository. Can you add that? I am not able to start your app without it

[VeilleurTrytoFix]

@jhuenges just i have added some files into meteor folder https://github.com/keepthefaya/meteortest/tree/master/meteor

[jhuenges]

@keepthefaya it has to be the.meteor folder. Just add the one that is already in your project folder

[VeilleurTrytoFix]

@jhuenges I purposely deleted the "." I did not know if github would accept this syntax in doubt .... I cancel service but it is now on my project

[jhuenges]

Renamed the folder...

[jhuenges]

Okay, so here is my help:

1. Take a look at the guide and try to create multiple client/server.js files. Dont put everything into one file.
2. Upgrade to Meteor 1.3.x?
3. Dont use IronRouter. It has a couple of flaws. FlowRouter is the better choice
4. Remove highcharts:highcharts-meteor and use mazaalik:highcharts. That is the package for which this demo is written and the package that I support.
5. Fix your code! I had a lot of trouble to get it running. And please include a short instruction on what to do. I had to search through the complete code to find the method that get the API data, which is then added to the collection and so on ...

And to answer you question on why there is not data (or undefined, ... ):

If you take a good look at the code you posted above you will notice that it will never work with the data you have. You cannot just copy the code I wrote for some other use case. The data you want to display doesnt even have a listId and there are many more reasons why it wont work. The data from the Eveorder collection looks like this:

{
_id: "8TzPMShaj4Nfx3gZa",
name: "buyhistory",
createdA: "2016-04-09T11:02:53.264Z",
volume: ["1285"],
avg: ["363279391.72"],
max: ["1011000000.00"],
min: ["999989.00"],
ddev: null,
median: ["11111111.11"],
percentile: ["1009710439.81"]
}

Edit: And I am not sure if a collection is there right thing to use in this case. If I am right, then you only want to display "buyhistory", "sellhistory" and "allhistory". So there are always these 3 types. You dont need a collection for that. You dont even need a server method for that.

[VeilleurTrytoFix]

I upload the whole project, on windows i cant upload folder named with ".", so I sent the file without dot

Template : Eveonline, insert new data from api in mongodb collection(Meteor.methods->xmlDemo) template : Evemarket, trying to build charts with datas from mongodb collection https://github.com/keepthefaya/meteorglobaltest

[jhuenges]

There are couple of weird files in there.

Lets start from the beginning: What do you want to show in the chart?

[VeilleurTrytoFix]

rename, "meteor" into ".meteor" it dosen"'t work ? (.meteor folder : https://github.com/keepthefaya/meteorglobaltest/tree/master/meteor)

[VeilleurTrytoFix]

chart with random data : i'm trying to build chart with on x = date, and y = "min", "max" line

[jhuenges]

So you are trying to built a line chart like this one. The code you posted earlier is for a column chart. If I understand you correctly, you want something like this:

The code mostlikey only works with this package

Please try this code: https://gist.github.com/jhuenges/814b60d80c96db014e045f2207fc1814

[VeilleurTrytoFix]

What i'm doing wrong ?

`=> Errors prevented startup:

While processing files with ecmascript (for target web.browser): client/clientmarkets.js:127: Unexpected token (127:0)

=> Your application has errors. Waiting for file change. `

https://github.com/keepthefaya/meteorglobaltest/blob/master/client/clientmarkets.js

[jhuenges]

Line 126 is missing a )

[VeilleurTrytoFix]

i get : meteor add maazalik:highcharts

TypeError: chart.higcharts is not a function

:$