0

I'm creating a chart with angular charts, and am having problems getting the chart how i need.

I would like the x axis to have the date and the mouse over to show the client name, which are all being fed from a loop on an array of resource object.

Here is the loop:

angular.forEach(charts, function(chart, key) {
             var d = new Date(chart.appointment_date).toDateString();

             $scope.labels.push(d);
             $scope.total_earnings += chart.cost.dollars;
               $scope.data[0].push(chart.cost.dollars);
               if (!chart.refundObj[0]){
                 $scope.data[1].push(0);
                } else {
                 $scope.data[1].push((chart.refundObj[0].amount/100));
                }
            });

And but this only sets the date property on the x axis, as well as in the mouse over. If i create an object using the following:

$scope.labels.push({date: d, name: clientName});

the result only says [Object, Object].

I'm using the following as the basis for the charts:

http://jtblin.github.io/angular-chart.js/#getting_started

Mobaz
  • 597
  • 3
  • 10
  • 26

1 Answers1

2

angular-chart is based on Chart.js. Chart.js expects an array of strings for labels. When you insert an object Chart.js converts it to a string using toString which for an object becomes [Object, Object] when toString is not defined.

It's pretty simple get what you want by constructing the right object and setting an option.

HTML

<div ng-app="app">
    <div ng-controller="ctrlr">
        <canvas id="line" class="chart chart-line" data="data"
                labels="labels" options="options"></canvas>
    </div>
</div>

JS

Here we construct a special object SpecialLabel that returns the axis label when toString is called. We also override the tooltipTemplate to return tooltipLabel when constructing the tooltip

var app = angular.module('app', ['chart.js']);

app.controller('ctrlr', ['$scope', function ($scope) {

    var SpecialLabel = function (axisLabel, tooltipLabel) {
        this.axisLabel = axisLabel;
        this.tooltipLabel = tooltipLabel;
    }
    SpecialLabel.prototype.toString = function () {
        return this.axisLabel
    }

    $scope.labels = [
    new SpecialLabel("10-Jan", "Client 1"),
    new SpecialLabel("11-Jan", "Client 2"),
    new SpecialLabel("12-Jan", "Client 3"),
    new SpecialLabel("13-Jan", "Client 4"),
    new SpecialLabel("14-Jan", "Client 5"),
    new SpecialLabel("15-Jan", "Client 6"),
    new SpecialLabel("16-Jan", "Client 7")];

    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40]
    ];

    $scope.options = {
        tooltipTemplate: "<%if (label){%><%=label.tooltipLabel%>: <%}%><%= value %>"
    }
}])

Fiddle - http://jsfiddle.net/xg2pd1cu/

potatopeelings
  • 40,709
  • 7
  • 95
  • 119