Chart in meteor?

help
1

how to use Chart.js in meteor?
Pl example…

1 Like
2

Cant help with Chart.js but how about Highcharts? There is a template helper and some other examples.

1 Like
3

Very thanks for your reply.

4

No problem. If you have more questions, just ask them on the github page.

5

I have never used chartjs before but I gave it a quick shot. Here is a working chart.js site http://chartjs.meteor.com/ and here is the repo to that site https://github.com/krishamoud/meteor-chartjs-example. I apologize for how sloppy it is. I hope it helps though. I had a hard time getting bar charts to work so they are not included. It was weird.

5 Likes
6

@khamoud

I´ve used your example plus the bar example from the website. Added the current min version of the library (1.0.2), removed your existing files in compatibility and bar chart worked out of the box.

1 Like
7

@khamoud
Good example. Static chart working well. But what about reactive changes? If I change data on the page, how to rerender chart without page reload?

8

Use an autorun in the onrendered callback.

9

So. As a result it is easy. Here my code.
JavaScript

// --- Update Chart Function
function updateChart() {
    $('#myChart').replaceWith('<canvas class="chart" id="myChart"></canvas>');
    var data = new dataForChart();
    new drowChart(data);
};

HTML

<div class="col-xs-12">
    <canvas class="chart" id="myChart"></canvas>
</div>

When you change data you should call function updateChart()

10

Why did you replace the dom and no invoke the chart js api to clean/refresh the chart?

11

There’s an official package for Chart.js. Have you tried it?

12

@dcworldwide Yes I just replase DOM element canvas. I didn’t find better solution

13

@dandv No, I don’t use packaje. I just downlod Chart.js library from official page http://www.chartjs.org/

14

Hi , How are you ?

Can you help me to fill my geochart dynamically, here is my code :

Template.AllUsers.rendered = function() {
chart = {
target: ‘chart1’,
type: ‘GeoChart’,
columns: [
[‘string’, ‘Country’],
[‘number’, ‘Nombres de personnes inscrites’]
],
rows: [
[‘Belgium’, 3],
[‘Canada’, 100],
[‘France’, 50],
[‘Russie’, 100],
[‘United States’, 50]
],
options: {colorAxis: {colors: [’#cfd8dc’, ‘#607d8b’]}
}
};

drawChart(chart);
}

I would like to fill in the rows dynamically. Thank you very much !

15

Can you show a little more code? What is the source of the data?

16

Which chart library are you using? It doesn’t seem to be Chart.js, Highcharts or Google Charts.

17

i use google charts in meteor

18

So, I used the first example in Google’s docs and reworked that to demonstrate how to drive a geo chart reactively. It’s probably not the most efficient implementation, but I’ve never used Google Charts before.

Repo is here

19

https://zoomcharts.com/ - It’s a good options for charts if you are open to use 3rd party. Takes very less time to get integrated with Meteor.

20

I am having trouble with my charts. They don’t get updated even though the data is changed.

Template.xyz.onCreated(function () {
this.budget = new ReactiveVar();
this.budget_used_check = new ReactiveVar();
this.budget_used = new ReactiveVar();
this.profit = new ReactiveVar();
this.budget.set(Template.instance().data.a.calculated_budget)
})
Template.xyz.onRendered({
const instance = this
	instance.autorun(() => {
		this.budget_used_check.set(Template.instance().data.a.cost * Template.instance().data.a.time);
		this.budget_used.set(Template.instance().budget_used_check.get() + parseFloat(expense(Template.instance().data.b)));
		this.profit.set(this.budget.get() - this.budget_used.get());
		var context = '.graph';
		var budget_ctx = $(context);
		var budget_chart = new Chart(budget_ctx, {
			type: 'doughnut',
			data: {
				datasets: [{
					data: [Template.instance().budget.get(), Template.instance().budget_used.get(), Template.instance().profit.get()],
					backgroundColor: color_budget
				}],
				labels: ["budget", "expense", "profit"],
			},
			options: {
				legend: {
					onClick: (e) => e.stopPropagation()
				}
			}
		});
		console.log(Template.instance().profit.get(),"inside autorun");
		
	})
});

the autorun doesnt render new data as well.