The W20 Dataviz addon provides supports for charts and graphical representation. It proposes an integration of the NVD3 charting library (which itself uses D3) along with an integration of the Dygraphs chart library for large data sets.
Live demo Dataviz addon Installation bower install w20-dataviz Configuration To include the addon, declare it in the application manifest:
"bower_components/w20-dataviz/w20-dataviz.w20.json": {} If using the w20 bridge you can simply refer to the fragment by its id without specifying the path:
Dygraphs is a fast charting library that allows users to explore large data sets. It plots data series as lines. The W20 integration provides an AngularJS directive augmented with an option to load down-sampled data while zooming.
Live demo Dygraphs Installation See the installation of the Dataviz addon in the basics section
Configuration Declare the dygraphs module in the modules section of the dataviz fragment
"w20-dataviz": { "modules": { "dygraphs": {} } } Directive Below you can find an example of a dygrah declaration with all its attributes:
Nvd3 Nvd3 is a data visualization library build on top of the popular d3 library. It offers several chart types for common visualization needs. The web framework add an AngularJS integration in the form of directives, along with sensible defaults for these different charts.
Live demo Multibar The multibar chart is used to compare different series in a bar representation following the X axis.
Configuration "multibar":{}, The w20MultibarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.
Basics