CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Santosh Shelke
Santosh Shelke

Reputation: 582

Show total in short format in google chart candle

I want to show numbers in short format in google chart.
Ex. 1,300,000 is '1.3M'
Here is the snippet... 

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(unCoveredProducts);
function unCoveredProducts() {
    var data = google.visualization.arrayToDataTable([
        ['Element', '', { role: 'style' }],
        ['> 60 Days', 1300000, '#005073'],
        ['45 - 60 Days', 850000, '#006b96'],
        ['30 - 45 Days', 500000, '#017CAD'],
        ['15 - 30 Days', 300000, 'color: #00b1dd'],
        ['< 15 Days', 100000, 'color: #00bceb'],
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
        {
            calc: 'stringify',
            sourceColumn: 1,
            type: 'string',
            role: 'annotation'
        },
        2]);

    var options = {
        width: 345,
        height: 280,
        'chartArea': { 'width': '70%', 'height': '100%' },
        bar: { groupWidth: '80%' },
        legend: { position: 'none' },
        hAxis: { textPosition: 'none' },
        vAxis: { format: 'sort' }
    };

    var chart = new google.visualization.BarChart(
    document.getElementById('unCoveredProducts'));

    chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="unCoveredProducts"></div>

Upvotes: 1

Views: 55

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

use the NumberFormat class... 

var formatShort = new google.visualization.NumberFormat({
  pattern: 'short'
});
formatShort.format(data, 1);

see following working snippet... 

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(unCoveredProducts);
function unCoveredProducts() {
    var data = google.visualization.arrayToDataTable([
        ['Element', '', { role: 'style' }],
        ['> 60 Days', 1300000, '#005073'],
        ['45 - 60 Days', 850000, '#006b96'],
        ['30 - 45 Days', 500000, '#017CAD'],
        ['15 - 30 Days', 300000, 'color: #00b1dd'],
        ['< 15 Days', 100000, 'color: #00bceb'],
    ]);

    var formatShort = new google.visualization.NumberFormat({
      pattern: 'short'
    });
    formatShort.format(data, 1);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
        {
            calc: 'stringify',
            sourceColumn: 1,
            type: 'string',
            role: 'annotation'
        },
        2]);

    var options = {
        width: 345,
        height: 280,
        'chartArea': { 'width': '70%', 'height': '100%' },
        bar: { groupWidth: '80%' },
        legend: { position: 'none' },
        hAxis: { textPosition: 'none' },
        vAxis: { format: 'sort' }
    };

    var chart = new google.visualization.BarChart(
    document.getElementById('unCoveredProducts'));

    chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="unCoveredProducts"></div>

Upvotes: 1

Related Questions