How use Google Charts with meteor.js


#1

Hi, I’d like to use a Google column chart in meteor.js. I know there are other options to using charts in Meteor like Highcharts and chart.js, but right now, Google Charts is my preferred option.

I’ve tried the plugin meteor add rafaelhdr:google-charts, but wasn’t able to get it to work with iron router installed.

It just seems to me this shouldn’t be so difficult since Google Charts uses Javascript.

Thank you,

Harley
Google Chart I’d like to display

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

#2

Hey! I just threw something together that may or may not be helpful. I took the google charts package that you mentioned and I used it in a little test app that you can see http://google-charts.meteor.com/ and the repo which you can reference is here https://github.com/krishamoud/meteor-google-charts.

Hope this helps.


#3

Just a heads up. Google charts is not responsive. Chart.js and chartist.js is however.


#4

Thanks for the headsup, Pokus.


#5

Very nice, Khamoud. Thank you.


#6

I’m happy to help!

If you are interested in chartjs as a solution I posted this the other day.


#7

Hi, I have been seen the code of github, and I have tried to display a Table Chart changing the drawTable function in the package rafaelhdr:google-charts in the file rafaelhdr_google-charts.js but I can get it work properly because it doesn’t display the table. Nothing to display.

Thank you.


#8

Excuse the drawChart function.


#9

I’m trying to use chart.js to display some data in real time that is being live updated to the mongo database by a fluentd log harvesting process.

In your data: line in the chart function, where you have the line:

data: [random(), random(), random(), random(), random(), random(), random()]

I would like to use instead data from the live updating data by using a collection.find() call. Sort of like:

data: EDC_DATA.find({},{fields: {lvl_min: 1}}),

I cannot find any tutorial on how to make this actually work, or any example on line from anyone who has done this. I am running into errors when I try it, which I have documented at http://stackoverflow.com/questions/29293761/chart-js-in-meteor-not-pulling-data-from-context , which indicate to me that the ‘data’ in the line

new Chart(lvlCtx).line(data);

is not being populated properly. The actual error is:

Exception from Tracker afterFlush function: undefined is not a function (evaluating 'new Chart(lvlCtx).line(lvl_data)')

If anyone could help by posting working sample of a line chart populated from a collection.find(), or help me understand what I am clearly not doing correctly to enable the required data context by responding either here or on stack overflow, I would be most grateful.


#10

I have never used chart.js. However, looking at the original code:

data: [random(), random(), random(), random(), random(), random(), random()]

and yours:

data: EDC_DATA.find({},{fields: {lvl_min: 1}}),

my observation is that the first uses numerical values, whereas the result of a find() is a cursor. You could try

data: EDC_DATA.find({},{fields: {lvl_min: 1}}).fetch()

which will give you an array. You will need to ensure that the collection contains values appropriate to the data requirement of chart.js.

You should also be aware that if the cursor changes (e.g. one new datapoint arrives) the entire array will be regenerated and this may not be quite what you want.


#11

Hey Rob, thanks for responding so quickly.

I have tried it using

data: EDC_DATA.find({},{fields: {lvl_min: 1}}).fetch(),

and I get the same error as before.

your statement “You will need to ensure that the collection contains values appropriate to the data requirement of chart.js.” resonates with me. At this point I am uncertain if

  • the data is making it into the variable and then getting kicked out
    because it is inappropriate or formatted incorrectly,
  • or never making it into the variable at all because the data is not present in the context.

This is why I am hoping someone will post a working example or template. its just not clear to me how this particular use case is supposed to work.


#12

I’d probably add a line into the chart declaration which can have a web inspector breakpoint applied:

var stuff = EDC_DATA.find({},{fields: {lvl_min: 1}}).fetch();

and then see what you’re getting back in the browser console.


#13

good advice:

When I do that I see the following:

stuff: Array[2167]
0: Object
_id: Object
_str: "550987cc848d191e26000001"
__proto__: Object
clone: function () { // 31
constructor: function (hexString) { // 5
equals: function (other) { // 25
getTimestamp: function () { // 40
toHexString: function () { return this._str; }
toJSONValue: function () { return this._str; }
toString: function () { // 20
typeName: function () { // 36
valueOf: function () { return this._str; }
__proto__: Object
lvl_min: "208"
__proto__: Object
__defineGetter__: function __defineGetter__() {
__defineSetter__: function __defineSetter__() {
__lookupGetter__: function __lookupGetter__() {
__lookupSetter__: function __lookupSetter__() {
constructor: function Object() {
get __proto__: function () {
hasOwnProperty: function hasOwnProperty() {
isPrototypeOf: function isPrototypeOf() {
propertyIsEnumerable: function propertyIsEnumerable() {
set __proto__: function () {
toLocaleString: function toLocaleString() {
toString: function toString() {
valueOf: function valueOf() {

it’s an array of objects, not strings: the strings I want are in the object. SO I guess I would want to stringify this somehow?


#14

If you do not recognise your collection from this, then I suggest you don’t have the data you think you should have. You should be seeing an array of numerics.

I’m happy to look at this again, but it’s gone beyond a cursory examination of code snippets. Please post a link to a github repo of your code if you want to continue.


#15

Rob

I appreciate your help. It took a while, but I got it working and you definitely pointed me in the right direction.
I have posted working code to github at https://github.com/amstanley/ddt in case anyone else is as confused as I was.

Thanks again.

/malcolm


#16

Thanks for the above code, but I am the user koolchart charting library so can you please tell how to use koolchart with meteor.


#17

Hey Guys, you now have to insert an API key. How should I do this with meteor?

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

https://developers.google.com/maps/documentation/javascript/get-api-key