ng-vega
Angular directive for rendering Vega specs. This project was forked and modified from angular-vega which was written for Vega 1 and became inactive. The current version of ng-vega supports Vega 2.
Demo
- Simple demo -- Select dataset/renderer to see the chart changes and see the code to see how it was implemented.
- Vega editor demo -- Implement Vega editor using ng-vega.
For more information about Vega, please refer to official documentation.
Usage
angular
-
spec
is$scope.spec
in your controller. -
vega-data
(optional) can be used to pass dynamic data. In the example above, it is bound to$scope.testData
. Data can be a function to modify the values (Vega 2 syntax) or raw values (and ng-vega will convert it to a function to make it work for you).
$scopetestData = // function to modify dataset name "table" { data } $scopetestData = // raw values for dataset name "table" table: a: 1a: 2
-
vega-renderer
(optional) can be used to set renderer ('canvas'
or'svg'
). Don't forget the quote. -
vega-on-parse
(optional) can be used to get notified whenspec
is parsed and to receive a handle to the View Component that Vega has built for the corresponding chart. In the example above, this parameter is bound to$scope.myCallback
.
$scope { // perform any work you need to do once the spec is parsed console; // make use of the View Component API as you wish view;};
Installation
bower install ng-vega --save
or
npm install ng-vega --save
Import into your project
Angular module ngVega
will be available once you do one of the following:
Choice 1. Global
Adding this library via <script>
tag is the simplest way.
Choice 2: AMD
If you use requirejs, this library support AMD out of the box.
require;;
Choice 3: node.js / browserify
;
Author
Krist Wongsuphasawat / @kristw
Copyright (c) 2016 Krist Wongsuphasawat. MIT License