CODEWITHSUNDEEP
chartsformattingformatgoogle-visualization
Olaf Erlandsen
Olaf Erlandsen

Reputation: 6036

How to remove negative symbol on values Google Charts?

i have a column chart and work fine, but i want to allways show positive number, but i force negative number to "divide" bars on top and bottom.

He a example:

example

Here my code

google.load('visualization','1.1',{packages:['corechart']});
google.setOnLoadCallback(function(){
var GoogleChart=new google.visualization.ColumnChart(document.getElementById( 'chart' ));   
var data = google.visualization.arrayToDataTable([
    ["Age","Male","Female"],
    ["<15",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
    ["15-20",{"v":8.3333333333333,"f":"8,3333333333333%"},{"v":0,"f":"0%"}],
    ["20-25",{"v":75,"f":"75%"},{"v":-8.3333333333333,"f":"8,3333333333333%"}],
    ["25-30",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
    ["30-35",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
    ["35-40",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
    ["40-45",{"v":8.3333333333333,"f":"8,3333333333333%"},{"v":0,"f":"0%"}],
    ["45-50",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
    ["50-55",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
    ["55-60",{"v":0,"f":"0%"},{"v":0,"f":"0%"}],
    [">60",{"v":0,"f":"0%"},{"v":0,"f":"0%"}]
]);
new google.visualization.NumberFormat({"pattern":"#,##%"}).format(data, 1); 
new google.visualization.NumberFormat({"pattern":"#,##%"}).format(data, 2); 
var options ={
    "isStacked":true,
    "hAxis":{
        "title":"age"
    },
    "vAxis":{
        "title":"Percentage",
        "format":"#,##%",
        "viewWindowMode":"explicit",
        "viewWindow":{
            "min":-100,
            "max":100
        }
    }
};
GoogleChart.draw(data, options);

i dont know how to remove negative symbol("-"). Thanks

P.S: Google Charts 1.1

Upvotes: 1

Views: 1962

Answers (1)

davidkonrad
davidkonrad

Reputation: 85558

The google visualization pattern format is a subset of the ICU pattern set. By that you can specify subpatterns for both positive and negative numbers to avoid the minus sign (because if the negative subpattern is not specified, you will get the minus prefix by default) :

format: "#,##%;#,##%"

Unfortunetaly this does not work in visualization - it complains about "Too many percent/permills" - but since % is nothing but "Multiply by 100 and show as percentage" - then you can simply add ,00% as a string suffix instead :

vAxis:{
   format:"#,##',00%';#,##',00%'",
   ...
}

new google.visualization.NumberFormat({"pattern":"#,##',00%';#,##',00%'"}).format(data, 1); 
new google.visualization.NumberFormat({"pattern":"#,##',00%';#,##',00%'"}).format(data, 2);

Minus sign now removed from both the vAxis and tooltips.

demo -> http://jsfiddle.net/pcvtf7q9/

Upvotes: 1

Related Questions