meteor-c3

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #golang #machine-learning #linux #nodejs #windows #awesome-list #pytorch #ios #openai #open-source

(★ 11)

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

meteor-c3 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

C3 chart
========

Reactive C3 charting library based on D3

Usage
=====

Somewhere in your template, add this:

```Handlebars
<template name="someTemplate">

</template>
```

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

```JavaScript
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:

```JavaScript
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:

```JavaScript
// ...
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:

```Handlebars
<template name="someTemplate">

</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 <a href="http://www.meteorkitchen.com" target="_blank">Meteor Kitchen</a> showing radiation level from geiger counter <a href="https://example-geiger.meteorfarm.com" target="_blank">here</a>.

Credits
=======

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

---

That's all folks.

Enjoy! :)

meteor-c3

meteor-c3 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

meteor-c3

meteor-c3 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README