Skip to content

Commit

Permalink
Merge branch 'release/v1.1.8'
Browse files Browse the repository at this point in the history
  • Loading branch information
@BigFatDog
BigFatDog committed Jan 29, 2018
2 parents 2efd0d3 + 908702f commit efe3c1e
Show file tree
Hide file tree
Showing 133 changed files with 10,482 additions and 5,711 deletions.
349 changes: 11 additions & 338 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,346 +59,19 @@ npm run test:cover // run tests and view coverage report

## API

* [Bar](#bar)
* [Area](#area)
* [Line](#line)
* [Pie](#pie)
* [Row](#row)
* [Scatter](#scatter)
* [Corona](#corona)
* [Stacked Area](#stacked-area)
* [Stream](#stream)
* [Grouped Bar](#grouped-bar)
* [Multi Line](#multi-line)
* [Bar](https://github.com/VizArtJS/vizart-basic/wiki/bar)
* [Area](https://github.com/VizArtJS/vizart-basic/wiki/area)
* [Line](https://github.com/VizArtJS/vizart-basic/wiki/line)
* [Pie](https://github.com/VizArtJS/vizart-basic/wiki/pie)
* [Row](https://github.com/VizArtJS/vizart-basic/wiki/row)
* [Scatter](https://github.com/VizArtJS/vizart-basic/wiki/scatter)
* [Corona](https://github.com/VizArtJS/vizart-basic/wiki/corona)
* [Stacked Area](https://github.com/VizArtJS/vizart-basic/wiki/stacked-area)
* [Stream](https://github.com/VizArtJS/vizart-basic/wiki/stream)
* [Grouped Bar](https://github.com/VizArtJS/vizart-basic/wiki/grouped-bar)
* [Multi Line](https://github.com/VizArtJS/vizart-basic/wiki/multi-line)


### Bar
[<img alt="Bar" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/bar.jpg">](https://vizartjs.github.io/bar.html)
```javascript
import { Bar } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
x: { accessor: 'age', type: 'number', name: 'Age' },
y: [ { accessor: 'income', type: 'number', name: 'Monthly Income' } ]
},
};

const fakeData = [
{ age: 19, income: 9 }
]

const chart = new Bar('#chart', options);
chart.render(fakeData);
```

### Area
[<img alt="Area" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/area.jpg">](https://vizartjs.github.io/area.html)
```javascript
import { Area } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
x: { accessor: 'age', type: 'number', name: 'Age' },
y: [ { accessor: 'income', type: 'number', name: 'Monthly Income' } ]
},
};

const fakeData = [
{ age: 19, income: 9 }
]

const chart = new Area('#chart', options);
chart.render(fakeData);
```

### Line
[<img alt="Line" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/line.jpg">](https://vizartjs.github.io/line.html)
```javascript
import { Line } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
x: { accessor: 'age', type: 'number', name: 'Age' },
y: [ { accessor: 'income', type: 'number', name: 'Monthly Income' } ]
},
};

const fakeData = [
{ age: 19, income: 9 }
]

const _chart = new Line('#chart', options);
_chart.render(fakeData);

```
### Scatter
[<img alt="Scatter" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/scatter.jpg">](https://vizartjs.github.io/scatter.html)
```javascript
import { Scatter } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
x: { accessor: 'age', type: 'number', name: 'Age' },
y: [ { accessor: 'income', type: 'number', name: 'Monthly Income' } ]
r: { accessor: 'companyYears', type: 'number', name: 'Years at Company' } //optional
},
};

const fakeData = [
{ age: 19, income: 9, companyYears:5 }
]

const _chart = new Scatter('#chart', options);
_chart.render(fakeData);

```
### Pie
[<img alt="Pie" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/pie.jpg">](https://vizartjs.github.io/pie.html)
```javascript
import { Pie } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
x: { accessor: 'age', type: 'number', name: 'Age' },
y: [ { accessor: 'income', type: 'number', name: 'Monthly Income' } ]
},
};

const fakeData = [
{ age: 19, income: 9 }
]

const _chart = new Pie('#chart', options);
_chart.render(fakeData);
```

### Row
[<img alt="Corona" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/row.jpg">](https://vizartjs.github.io/row.html)

```javascript
import { Row } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
x: { accessor: 'age', type: 'number', name: 'Age' },
y: [ { accessor: 'income', type: 'number', name: 'Monthly Income' } ]
},
};

const fakeData = [
{ age: 19, income: 9 }
]

const _chart = new Row('#chart', options);
_chart.render(fakeData);
```

### Corona
[<img alt="Corona" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/corona.jpg">](https://vizartjs.github.io/corona.html)
```javascript
import { Corona } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
s: { name: 'Department', type: 'string', accessor: 'dep'},
x:
{ name: 'Age', type: 'string', accessor: 'age'}
,
y: [
{ name: 'Monthly Income', type: 'number', accessor: 'income'}
],
},

plots: {
levels: 0, //How many levels or inner circles should there be drawn
maxValue: 0, //What is the value that the biggest circle will represent
labelFactor: 1.15, //How much farther than the radius of the outer circle should the labels be placed
wrapWidth: 60, //The number of pixels after which a label needs to be given a new line
opacityArea: 0.35, //The opacity of the area of the blob
dotRadius: 4, //The size of the colored circles of each blog
opacityCircles: 0.1, //The opacity of the circles of each blob
strokeWidth: 2, //The width of the stroke around each blob
innerRadiusRatio: 0.4,
showDots: false,
sortArea: true, // show smallest area on top
stackLayout: false, // stack areas
stackMethod: 'expand',
isArea: true //If true the area and stroke will follow a round path (cardinal-closed),
}
};

const _data = [
{ age: 19, income: 9, dep: 'science' }
]

const _chart = new Corona('#chart', options);
_chart.render(_data);

```
### Stacked Area
[<img alt="Stacked Area" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/multi_area.jpg">](https://vizartjs.github.io/multi_area.html)
```javascript
import { StackedArea } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
s: { name: 'Department', type: 'string', accessor: 'dep'},
x: { name: 'Age', type: 'string', accessor: 'age'},
y: [ { name: 'Monthly Income', type: 'number', accessor: 'income'} ],
},
plots: {
stackLayout: true,
stackMethod: 'zero',
curve: 'natural',
strokeWidth: 2,
opacityArea: 0.7
}
};

const _data = [
{ age: 19, income: 9, dep: 'science' }
]

const _chart = new StackedArea('#chart', options);
_chart.render(_data);
```
### Stream
[<img alt="Stream" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/stream.jpg">](https://vizartjs.github.io/stream.html)
```javascript
import { Stream } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
s: { name: 'Department', type: 'string', accessor: 'dep'},
x: { name: 'Age', type: 'string', accessor: 'age'},
y: [ { name: 'Monthly Income', type: 'number', accessor: 'income'} ],
}
};

const _data = [
{ age: 19, income: 9, dep: 'science' }
]

const _chart = new Stream('#chart', options);
_chart.render(_data);
```

### Grouped Bar
[<img alt="Grouped Bar" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/bar_grouped.jpg">](https://vizartjs.github.io/bar_grouped.html)
```javascript
import { StackedBar } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
s: { name: 'Department', type: 'string', accessor: 'dep'},
x: { name: 'Age', type: 'string', accessor: 'age'},
y: [ { name: 'Monthly Income', type: 'number', accessor: 'income'} ],
},
};

const _data = [
{ age: 19, income: 9, dep: 'science' }
]

const _chart = new StackedBar('#chart', options);
_chart.render(_data);
```
### Multi-Line
[<img alt="Multi line" src="https://github.com/vizartjs/vizartjs.github.io/blob/master/img/charts/multi_line.jpg">](https://vizartjs.github.io/multi_line.html)
```javascript
import { MultiLine } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
chart: {
height: 420,
margin: { left: 30, right: 30, top: 10, bottom: 30 }
},

data: {
s: { name: 'Department', type: 'string', accessor: 'dep'},
x: { name: 'Age', type: 'string', accessor: 'age'},
y: [ { name: 'Monthly Income', type: 'number', accessor: 'income'} ],
},
plots: {
stackLayout: true,
stackMethod: 'zero',
curve: 'natural',
strokeWidth: 2,
opacityArea: 0.7
}
};

const _data = [
{ age: 19, income: 9, dep: 'science' }
]

const _chart = new MultiLine('#chart', options);
_chart.render(_data);
```
###

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
Expand Down
5 changes: 0 additions & 5 deletions demo/stream.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
<li id="color1"><a href="#">BuGn</a></li>
<li id="color2"><a href="#">Blues</a></li>
<li id="color3"><a href="#">Warm</a></li>
<li id="color4"><a href="#">Cubehelix</a></li>
</ul>
</div>

Expand Down Expand Up @@ -117,10 +116,6 @@
chart.transitionColor(options2.color)
});

$('#color4').click(function(){
options2.color.scheme = "Category20c";
chart.transitionColor(options2.color);
});

});
</script>
Expand Down
Loading

0 comments on commit efe3c1e

Please sign in to comment.