Getting started

Version history
0.0.30 (current)
0.0.4
0.0.1

Get Proteic.js

You can download the latest release and include the proteic.js script and proteic.css styles found in the dist/ directory into your HTML. You also need to include the latest release of D3 v4:

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="proteic.js"></script>
<link rel="stylesheet" href="proteic.css">

Another option is to use the RawGit CDN pointing to the 0.0.30 release:

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/proteus-h2020/proteic/0.0.30/dist/proteic.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/proteus-h2020/proteic/0.0.30/dist/proteic.css">

Alternatively, you can get the latest development version of Proteic.js from RawGit. Warning: this version may break 😅:

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/proteus-h2020/proteic/development/dist/proteic.js">
<link rel="stylesheet" href="https://cdn.rawgit.com/proteus-h2020/proteic/development/dist/proteic.css"></script>

Creating a chart

Proteic.js can be used with both or streaming data. The data format is the same for both cases and for every chart, although each chart might need a different set of keywords. You can find more information about this topic in the Data format wiki page and in the individual chart pages.

With static data

As an example, we will create a simple bar chart. You can refer to the Bar chart documentation for more information or to the other charts pages for the rest of the charts.

To create a bar chart in Proteic.js we need to call the proteic.Barchart() object with some data and an optional configuration object. We also need a div where the chart will be placed. By default, Proteic.js will use a div with a chart id, but for this example we will specify a different selector in the configuration.

First we place a div in our HTML where the chart will appear. For this example it will have a example-barchart id:

<div id='example-barchart'></div>

We then create the data in the Proteic.js Data format:

var data = [
  {x: 'SP', key: '- 18', y: 30},
  {x: 'SP', key: '+ 18 - 35', y: 25},
  {x: 'SP', key: '+ 35', y: 45},
  {x: 'FR', key: '- 18', y: 10},
  {x: 'FR', key: '+ 18 - 35', y: 50},
  {x: 'FR', key: '+ 35', y: 40},
  {x: 'BR', key: '- 18', y: 20},
  {x: 'BR', key: '+ 18 - 35', y: 40},
  {x: 'BR', key: '+ 35', y: 40}
];

For this example, we will specify the #example-barchart selector that we used before where the chart will be placed, and a custom size:

var config = {
  selector: '#example-barchart',
  height: 250, width: '100%'
};

We then create a new bar chart with our data and configuration:

var barchart = new proteic.Barchart(data, config);

Finally, we draw the bar chart:

barchart.draw();

You can check the result in this JSFiddle.

With streaming data