timstrze/svgcharts

SVG chart visualizations using AngularJS and D3.js.

Angular Svg Charts

SVG charting software that can be used as a stand alone application or used as an AngularJS directive. Feed the application data and it will update in real time. Dynamically customize the look by changing the colors of the text and axis lines. Switch between chart types such as line charts or candlestick charts. Add extras such as Bollinger bands or moving average.

*This is currently under construction and I am currently building out the Kagi chart logic.

Built using AngularJS and D3.js for visualizations.

![alt tag] (https://github.com/timstrze/svgCharts/blob/master/app/images/screen-shot.png) ![alt tag] (https://github.com/timstrze/svgCharts/blob/master/app/images/screen-shot-2.png)

First Install

Clone the front end repo svgCharts:

git clone https://github.com/timstrze/svgCharts.git

Install generator-angular:

npm install -g generator-angular

Install node-modules:

npm install

Install bower-components:

bower install

Grunt Server

Launch your express server in development mode. This will also start the live-reload server to watch js, css, and html files.

grunt serve

Livereload

grunt serve will watch client files in app/ restarting the Grunt server when a change is detected.

Deployment

To generate a dist folder that can easily be deployed use:

grunt

This will run unit tests, jshint, concatenate and minify scripts/css, compress images, add css vendor prefixes, and finally copy all files to a tidy dist folder.

Alternatively to skip tests and jshint, use:

grunt build

Generators

All of the generator-angular client side generators are available.

Angular sub-generators:

• angular:controller
• angular:directive
• angular:filter
• angular:route
• angular:service
• angular:provider
• angular:factory
• angular:value
• angular:constant
• angular:decorator
• angular:view

Note: Generators are to be run from the root directory of your app.

Add to Index

By default, new scripts are added to the index file. However, this may not always be suitable. Some use cases:

• Manually added to the file
• Auto-added by a 3rd party plugin
• Using this generator as a sub-generator

To skip adding them to the index, pass in the skip-add argument:

yo angular:service serviceName --skip-add

Testing

Running grunt test will run the client unit tests with karma and mocha.