Angular-chart / line chart with multiple horizontal lines (margins)

Question

I am trying to create an agular line chart that has four horizontal lines (margins - two upper margins and two lower margins). Please see this fiddle - https://jsfiddle.net/CypressMountain/arq34fcu/30/

My objective is to define the properties (value,color,label) of these lines inside angular controller, but not inside JQuery line chart extension, as it is currently done in the fiddle. The graph properties, as well as the margin line properties will come from the back end, and the margin lines will be drawn independently from the graph.

I am not sure how to achieve something like $scope.margins = [] in controller, similar to what we have for $scope.data = [] or $scope.labels... Any help is appreciated.

This is the HTML:

        <canvas id="line" class="chart chart-linebis" chart-data="data"
            chart-labels="labels" chart-legend="true" chart-series="series"
            chart-click="onClick">
        </canvas>

The margin lines are now defined in draw function, when the line chart type is being extended

    draw: function () {
    Chart.types.Line.prototype.draw.apply(this, arguments);

        var lines = 
    [
        {
            label: 'Upper margin 1',
            value: 90,
            color: 'rgba(255, 0, 0, .9)'
        },
        {
            label: 'Upper margin 2',
            value: 75,
            color: 'rgba(255, 165, 0, .8)'
        },
        {
            label: 'Lower margin 1',
            value: -10,
            color: 'rgba(0, 165, 255, .8)'
        },
        {
            label: 'Lower margin 2',
            value: -25,
            color: 'rgba(0, 0, 255, .8)'
        }
    ]

.............................

This is the controller:

angular.module('test', ['chart.js']);

angular.module('test').controller('TestCtrl', function ($scope) {

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A'];
$scope.data = [
  [-5, 48, 40, -19, 86, 27, 90]
];
});

Two previous posts were referenced angular-chart add horizontal line and Chart.js - draw horizontal line

user2217057 user2217057 · Accepted Answer · 2016-05-27T02:01:38

I finally got it resolved and hope this will help someone else who might have a similar task.

$scope.options is the place inside the angular controller where the margin lines' properties will be received from the back end and assigned to $scope.options (you would replace the current hard coded label, value, and color for each horizontal line with the dynamic values).

    $scope.options = {

        limitLines: [
            {
                label: 'Upper margin 1',
                value: 90,
                color: 'rgba(255, 0, 0, .9)'
            },
            {
                label: 'Upper margin 2',
                value: 75,
                color: 'rgba(255, 165, 0, .8)'
            },
            {
                label: 'Lower margin 1',
                value: -10,
                color: 'rgba(0, 165, 255, .8)'
            },
            {
                label: 'Lower margin 2',
                value: -25,
                color: 'rgba(0, 0, 255, .8)'
            }
        ]

}

Then the canvas tag in HTML will have the options added:

chart-options="options"

Finally, in the line chart extension code, in the draw function 'lines' will be bridged to 'limitLines' via options:

    draw: function () {
    Chart.types.Line.prototype.draw.apply(this, arguments);

    var lines = this.options.limitLines;

Angular-chart / line chart with multiple horizontal lines (margins)

1 Answers