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>
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.
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.
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.
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.
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.
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.