<commit_before># EON Charts

Realtime animated graphs with [PubNub](http://pubnub.com) and [C3](http://c3js.org/).

![](http://i.imgur.com/MRK20Kb.gif)

# Examples

* [Spline Chart](http://pubnub.com/developers/eon/chart/spline/)
* [Bar Chart](http://pubnub.com/developers/eon/chart/bar/)
* [Donut Chart](http://pubnub.com/developers/eon/chart/donut/)
* [Gauge Chart](http://pubnub.com/developers/eon/chart/gauge/)

## Installing

### Hotlink

```html
<script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
<link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>
```

### Bower

```sh
bower install eon-chart --save
```

Check out our [bower example](https://github.com/pubnub/eon-chart/examples/bower.html).

### NPM

```sh
npm install eon-chart --save
```

Check out our [webpack example](https://github.com/pubnub/eon-chart-webpack).


## Quick Start

Plug your normal C3 config into the ```generate``` param. Supply an array of PubNub channel in ```channels``` param. ```eon.chart``` returns the normal C3 chart object.

```html
<div id="chart"></div>
<script>
  var pubnub = new PubNub({
    publishKey:   'demo', // replace with your own pub-key
    subscribeKey: 'demo' // replace with your own sub-key
  });

  eon.chart({
    pubnub: pubnub,
    channels: ["c3-spline"],
    generate: {
      bindto: '#chart',
      data: {
        labels: true
      }
    }
  });
</script>
```

That's it! Now you can publish messages to the same ```channel``` and they'll render in the graph.

```js
var pubnub = new PubNub({
  publishKey:   'demo', // replace with your own pub-key
  subscribeKey: 'demo' // replace with your own sub-key
});

setInterval(function(){
  pubnub.publish({
    channels: 'c3-spline',
    message: {
      eon: {
        'Austin': Math.floor(Math.random() * 99),
        'New York': Math.floor(Math.random() * 99),
        'San Francisco': Math.floor(Math.random() * 99),
        'Portland': Math.floor(Math.random() * 99)
      }
    }
  });

}, 1000);
```

All chart data must exist within an object called ```eon```. Also notice how the ```channel``` and ```channels``` matches in both examples.

# Configuration<commit_msg>changed channels to channel for publish<commit_after># EON Charts

Realtime animated graphs with [PubNub](http://pubnub.com) and [C3](http://c3js.org/).

![](http://i.imgur.com/MRK20Kb.gif)

# Examples

* [Spline Chart](http://pubnub.com/developers/eon/chart/spline/)
* [Bar Chart](http://pubnub.com/developers/eon/chart/bar/)
* [Donut Chart](http://pubnub.com/developers/eon/chart/donut/)
* [Gauge Chart](http://pubnub.com/developers/eon/chart/gauge/)

## Installing

### Hotlink

```html
<script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
<link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>
```

### Bower

```sh
bower install eon-chart --save
```

Check out our [bower example](https://github.com/pubnub/eon-chart/examples/bower.html).

### NPM

```sh
npm install eon-chart --save
```

Check out our [webpack example](https://github.com/pubnub/eon-chart-webpack).


## Quick Start

Plug your normal C3 config into the ```generate``` param. Supply an array of PubNub channel in ```channels``` param. ```eon.chart``` returns the normal C3 chart object.

```html
<div id="chart"></div>
<script>
  var pubnub = new PubNub({
    publishKey:   'demo', // replace with your own pub-key
    subscribeKey: 'demo' // replace with your own sub-key
  });

  eon.chart({
    pubnub: pubnub,
    channels: ["c3-spline"],
    generate: {
      bindto: '#chart',
      data: {
        labels: true
      }
    }
  });
</script>
```

That's it! Now you can publish messages to the same ```channel``` and they'll render in the graph.

```js
var pubnub = new PubNub({
  publishKey:   'demo', // replace with your own pub-key
  subscribeKey: 'demo' // replace with your own sub-key
});

setInterval(function(){
  pubnub.publish({
    channel: 'c3-spline',
    message: {
      eon: {
        'Austin': Math.floor(Math.random() * 99),
        'New York': Math.floor(Math.random() * 99),
        'San Francisco': Math.floor(Math.random() * 99),
        'Portland': Math.floor(Math.random() * 99)
      }
    }
  });

}, 1000);
```

All chart data must exist within an object called ```eon```. Also notice how the ```channel``` and ```channels``` matches in both examples.

# Configuration
{'fraction_non_alphanumeric': 0.18615007793364508, 'fraction_numerical': 0.011578712981518594, 'mean_word_length': 3.369649805447471, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '38757', 'n_tokens_mistral': 1662, 'n_tokens_neox': 1553, 'n_words': 388}