How to display formatted values in the graph

Question

How to display formatted values in the graph

Navigation

#1 by (0 votes)

0

I use the following library to generate the graphs:

I have the following function to format money with a semicolon (taken from a response here from the OS) that returns the value as type String :

Number.prototype.formatMoney = function(c, d, t){
    var n = this, 
        c = isNaN(c = Math.abs(c)) ? 2 : c, 
        d = d == undefined ? "." : d, 
        t = t == undefined ? "," : t, 
        s = n < 0 ? "-" : "", 
        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
        j = (j = i.length) > 3 ? j % 3 : 0;
       return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

And I have the following JavaScript code to populate the chart:

$(document).ready(
        function() {
            var dados = [ ];

            var valores_ajax = $.ajax({
                method: 'GET',
                url: '<c:url value="/link1/link2/link3" />',
                async: false,
                success: function(e){
                    var array_length = e.length;
                    for (var i=0; i < array_length; i++){
                        dados.push(formatOnlyNumber(e[i]));
                    }
                },
                error: function(e){
                    alert(e);
                }
            });

            var data = {
                labels : [ 'labels_vao_aqui1', 'labels_vao_aqui2' ],
                datasets : [ {
                    fillColor : "rgb(153, 237, 139)",
                    strokeColor : "rgb(74, 186, 88)",
                    pointColor : "rgb(74, 186, 88)",
                    pointStrokeColor : "#fff",
                    data : dados
                } ]
            }

            var options = {
                animation : true,
                responsive : true,
                margin : '2px',
                backgroundColor : '#FFFFFF'
            };

            var c = $('#idDaDiv');
            var ct = c.get(0).getContext('2d');
            var ctx = document.getElementById("nomeDaDiv")
                    .getContext("2d");

            new Chart(ctx).Bar(data, options);
        });

If I directly format the value within dados.push , it will fill the Array correctly, but the elements will be filled as type String and not as numerical type and thus the graph will be lost when passing the attribute data in the construction of Chart in line: new Chart(ctx).Bar(data, options); .

So, I would like to know if you do not have any attribute like data or label that can pass in the graph that correctly sets the bars of the graph with its values, but when you hover the mouse over the formatted values or another solution they would recommend for this.

So far it shows:

10000.00

Instead of:

10,000.00

javascript jquery ajax chartjs

asked by anonymous 27.10.2015 / 17:01

1 answer

Replace this Wordpress symbol (List of items) The constructor Service (URL, QName, WebServiceFeature []) is undefined

score 0 · Answer 1

The following solution was given however the post was removed, I am posting again since it helped me, it was the solution and thank:

Obs: The author of the answer if you want to post again here I delete my post to give you the best answer, when I was giving a +1 and better answer it was already removed. p>

Number.prototype.formatMoney = function (c, d, t) {
    var n = this,
        c = isNaN(c = Math.abs(c)) ? 2 : c,
        d = d == undefined ? "." : d,
        t = t == undefined ? "," : t,
        s = n < 0 ? "-" : "",
        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
        j = (j = i.length) > 3 ? j % 3 : 0;
    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

 var options = {
    animation: true,
    responsive: true,   
    tooltipTemplate:
        function (valuesObject) { return "Dia " + valuesObject.label + ": R$ " + valuesObject.value.formatMoney(2, ',', '.'); },
    multiTooltipTemplate:
        function (valuesObject) { return valuesObject.datasetLabel + ": R$ " + valuesObject.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); },
    scaleLabel:
        function (valuesObject) { return "R$ " + valuesObject.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
};



new Chart(indicadoresMes).Line(result, options);