Create simple Angularjs SVG Charts Directive
I will show you Step by step code to create SVG Charts directive in AngularJs. This will be simple, also I will take your throught basics of AngularJs Directives
- Directive Markup
- Restricting Directive Usage
- Directive scope
You can fork my code here : view on Plnkr
Lets add out html mark up in index.html and dont forget to add ng-app at html tag.
Initialize our base angularjs file app.js
And create your 'chart.html', dont worry I will take you through the code after this.
- You can see
restrict: 'E'it denotes we are creating a Directive - Element only (i.e. a new HTML tag)
replace: truemeans we want to replace current html ELEMENT with our SVG element from Chart.html.
transclude: trueliteral translation it means including of part. We are going to inject our 2nd directive using this, we will pass datapoints inside Chart.html
<g ng-transclude>element. Read more here.
templateUrl: 'chart.html'will load our Chart directive html from external file.
You will see now all SVG datapoints pilled up on each other since we have same x and y coordinates for all of them.
Now, inside our 'datapoint' directive, we will dynamically take x and y coordinates from our html element, since we had set
I have updated the
template value for datapoint directive. Also, now jump into LINK and Controller functions.
We need to place datapoints with value ZERO at bottom of chart and 100 at top of chart. However, we will also need to equally distribute them accross our SVG Chart (base), since highest value can be also set to 1000 or 1 million we need to be prepared for any condition.
Lets update LINK function inside datapoint directive
parseInt(scope.d, 10) this scope is coming from our isolate scope ie.
Once we have values on our LINK scope, we are updating that to our template, on this line
template: '<circle ng-attr-cx="" ng-attr-cy="" ng-attr-r="" ng-attr-stroke-width="" fill="#ffffff" stroke="#5B90BF" />'
Now lets fix cx and cy values.
Since our 'chart' directive is wrapping several other 'datapoint' directive we will control the values from Chart and update our datapoint positions. In this way our datapoints can communicate with eachother.
We will need to add Controller function to Chart directive, and as well update datapoint directive to load chart controller.
Getting Y coordinates
And now inside Chart directive
draft..(this post is a draft)