Currency format in google charts vs angular

Question

I'm trying to add currency format in google charts and angularjs

Google charts display Money not Percentages

var formatter = new google.visualization.NumberFormat({ prefix: '$' }); formatter.format(data, 1);

var options = { pieSliceText: 'value' };

how to add above code in the function below ?

    $scope.jkchart = function(){
    $scope.chartObject = {};

    $scope.chartObject.data = {"cols": [
        {id: "t", label: "Topping", type: "string"},
        {id: "s", label: "Slices", type: "number"}
    ], "rows": [
        {c: [
            {v: "Mushrooms"},
            {v: 3},
        ]},
        {c: [
            {v: "Olives"},
            {v: 31}
        ]},
        {c: [
            {v: "Zucchini"},
            {v: 5},
        ]}
    ]};
    $scope.chartObject.type = "PieChart";
    $scope.chartObject.options = {
        'title': 'How Much Pizza I Ate Last Night'
    };
  };

I'm trying to use angular-google-chart: bouil.github.io/angular-google-chart/#/generic/PieChart. I can't add '$' in number type. — Lighthouse Nguyen

Vadim Gremyachev Vadim Gremyachev · Accepted Answer · 2015-11-04T08:45:04

You could specify format like this:

$scope.chartObject.formatters = {
    number: [{
        columnNum: 1,
        prefix: '$'
    }]
};

Working example

var app = angular.module('chartApp', ['googlechart']);

app.controller('MainCtrl', function ($scope) {
    $scope.chartObject = {};

    $scope.chartObject.data = {
        "cols": [
            { id: "t", label: "Topping", type: "string" },
            { id: "s", label: "Slices", type: "number" }
        ], "rows": [
            {
                c: [
                   { v: "Mushrooms" },
                   { v: 3 },
                ]
            },
            {
                c: [
                   { v: "Olives" },
                   { v: 31 }
                ]
            },
            {
                c: [
                   { v: "Zucchini" },
                   { v: 5 },
                ]
            }
        ]
    };
    $scope.chartObject.type = "PieChart";
    $scope.chartObject.options = {
        'title': 'How Much Pizza I Ate Last Night',
        pieSliceText: 'value'
    };

    $scope.chartObject.formatters = {
        number: [{
            columnNum: 1,
            prefix: '$'
        }]
    };
 
});

<script src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<body ng-app='chartApp' ng-controller="MainCtrl">
    <div google-chart chart="chartObject" style="width: 900px; height: 500px;"></div>
</body>

Currency format in google charts vs angular

1 Answers