I am struggling to make Angular Charts display labels the way I want them to

Question

I am struggling to make Angular Charts display labels the way I want them to

Struggling to customize an angular chart for my project. The x axis should display dates and the mouse over should show client names, all retrieved from an array of resource objects in a loop.

The loop code snippet is as follows:

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));
                }
            });

Currently, the date property is set on both the x axis and in the mouseover. However, when trying to include the client name using:

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

the output only shows [Object, Object].

Using this documentation as the foundation for the charts:

javascript angularjs charts angular-chart

Answer 1

Answer №1

angular-chart is built on the foundation of Chart.js, which requires an array of strings for labels. If you input an object instead, Chart.js will convert it to a string using toString, resulting in [Object, Object] if toString is not defined.

Creating the desired output is straightforward with the correct object construction and option setting.

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

In this example, we define a unique object SpecialLabel that provides the axis label when toString is invoked. We also customize the tooltipTemplate to display tooltipLabel while 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/

Answer 2

angular-chart is built on the foundation of Chart.js, which requires an array of strings for labels. If you input an object instead, Chart.js will convert it to a string using toString, resulting in [Object, Object] if toString is not defined.

Creating the desired output is straightforward with the correct object construction and option setting.

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

In this example, we define a unique object SpecialLabel that provides the axis label when toString is invoked. We also customize the tooltipTemplate to display tooltipLabel while 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/

I am struggling to make Angular Charts display labels the way I want them to

Answer №1

Similar questions

Symfony's DataTables is encountering an issue with the JSON response, showing

Terminating a function during execution in JavaScript/TypeScript

The confusion arises from the ambiguity between the name of the module and the name of

What is the best way to split an array into smaller chunks?

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I am having trouble with my jQuery wrap function and it is not functioning correctly

Displaying Image Preview in Angular 2 After Uploading to Firebase Storage

Obtain ng-model data upon sending a POST request to an Express.js endpoint

Use the keyboard to interact with the user interface

Facing issues with Heroku and Express/Nodejs crashing?

best practices for implementing authentication in MEAN stack

What are the steps to bring in a module from a URL?

Posting Form Data with Ajax in CodeIgniter

``Is there a way to retrieve the file path from an input field without having to submit the form

Implementing ng-show in the controller using $index variable

Ways to create a URL path that is not case-sensitive in NextJs using JavaScript

Is there a way to stream an mp3 file in a Node.js REPL on Replit?

The data list is failing to retain previous elements as new ones are incorporated

What is the best way to transfer Express.js variables to MongoDB operations?

Exploring the World of JSON Nested Arrays with Unknown Titles and Organizing Them for Storage