Graf v podobe SVG.
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js></script>
<style>
.chart {
width: 300px;
height: 150px;
border-radius: 8px;
overflow: hidden;
}
.chart_content {
background: #b6e356;
}
.chart_line {
fill: none;
stroke: #fff;
stroke-width: 2px;
}
.chart_horizontal_line{
fill: none;
stroke: #fff;
stroke-width: 1px;
}
.chart_circle {
fill: #fff;
radius: 5px;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Graf</h3>
<div class="chart">
<svg xmlns="http://www.w3.org/2000/svg" class="chart_content">
<line x1="10" y1="50" x2="290" y2="50" class="chart_horizontal_line" />
<line x1="10" y1="100" x2="290" y2="100" class="chart_horizontal_line" />
<path class="chart_line" ng-attr-d="{{linePath()}}"></path>
<circle class="chart_circle" r="5" ng-repeat="p in points" ng-attr-cx="{{p.x}}" ng-attr-cy="{{p.y}}"></circle>
</svg>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
var points = [
{x: 30, y: 60},
{x: 100, y: 110},
{x: 200, y: 40},
{x: 280, y: 30}
];
$scope.points = points;
$scope.linePath = function(){
var pathParts = [], currentPoint, i;
for(i=0;i<points.length;i++) {
currentPoint = points[i];
pathParts.push(currentPoint.x + "," + currentPoint.y);
}
return "M" + pathParts.join(" L");
};
}]);