perak / meteor-c3

Reactive C3 charting library based on D3 packaged for Meteor.js

C3 chart

Reactive C3 charting library based on D3

Usage

Somewhere in your template, add this:

<template name="someTemplate">

	{{> c3 myChartData}}

</template>

And in .js define helper that returns chart data object as described in c3 docs:

Template.someTemplate.helpers({
	"myChartData": function() {
		return {
			data: {
				columns: [
					['data1', 30, 200, 100, 400, 150, 250],
					['data2', 130, 100, 140, 200, 150, 50]
				],
				type: 'spline'
			}
		};
	}
});

Of course, instead providing static data, you can reactively show data from collection:

Template.someTemplate.helpers({
	"myChartData": function() {

		theReport = SomeCollection.find().fetch();

		var theData = ["myData"];
		theData.concat(_.pluck(theReport, "expenses"));

		return {
			data: {
				columns: [
					theData
				],
				type: 'line'
			}
		};
	}
});

In this example, SomeCollection contains key expenses that will be shown in the graph.

JSON objects can also be given as data:

// ...
return {
	data: {
		json: {
			data1: [4, 3, 5, 2],
			data2: [6, 4, 3, 6]
		}
	}
}

If you want to use multiple charts on one page you must specify a unique id, thus the syntax is a bit different:

<template name="someTemplate">

	{{> c3 data=myChartData id="chart4"}}

</template>

Access C3 API

You can access your chart's c3 variable via global c3charts object by referencing your chart's id attribute (please keep id unique).

var myChart = c3charts["chart4"];

Live example

You can see live example built with Meteor Kitchen showing radiation level from geiger counter here.

Credits

• Thanks to @KristerV and @tripflex for fixes and improvements

---

That's all folks.

Enjoy! :)