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

`