5

Displaying values in lakhs, crores instead of millions.

function formatIndianSuffix(num) {
    var x = parseInt(num).toString();
    var len = x.length;
    var formattedNum = "";
    if (len <= 3) {
        formattedNum = '₹' + Math.floor(x);
    } else if (len > 3 && len < 6) {
        formattedNum = '₹' + (roundOff(x / 1000)).toString() + ' K'
    } else if (len >= 6 && len < 8) {
        formattedNum = '₹' + (roundOff(x / 100000)).toString() + ' L'
    } else if (len >= 8) {
        formattedNum = '₹' + (roundOff(x / 10000000)).toString() + ' Cr'
    }
    return formattedNum;
}

I am using this function to format numbers, but how to use this in chart?

Merrily
  • 1,686
  • 10
  • 14
Ankush Bansal
  • 105
  • 4

2 Answers2

4

Full disclosure, I'm a member of the ZingChart team.

We do support functions for building your scale labels. Here is a working example of a similar idea.

var gFactor = 1.000;
var gFactorMultiplier = 1000;
var myConfig = {
  type: "bar", 
  scaleY:{
    "factor": gFactor, 
    "format":"formatMyLabels()",
    label:{
      text:"Size"
    }
  },
  plotarea:{
    margin: "dynamic"
  },
 series : [
  {
   values : [899,1024,1142,2267,3389,4425,5534,6667,7785]
  }
 ]
};

window.formatMyLabels = function(v) { 
  var localFactor = gFactor * gFactorMultiplier;
  switch(localFactor) {
    case 1000:
      if (v < 1000) {
        return v;
      } else if (v >= 1000 && v < 1000000) {
        return v/1000 + 'K'
      } else if (v >= 1000000) {
        return v/1000000 + 'M'
      }
      break;
    case 1024:
     if (v < 1024) { 
        return v + 'bps'; 
      } else if (v >= 1024) {
        return v/1024  + 'kbps'; 
      } 
      break;
  }
 
}

zingchart.render({ 
 id : 'myChart', 
 data : myConfig, 
 height: 400, 
 width: '100%' 
});
<!DOCTYPE html>
<html>
 <head>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>
  <script> ZC.MODULESDIR = 'https://cdn.zingchart.com/modules/';</script>
 <!--Inject End-->
 </head>
 <body>
  <div id='myChart'></div>
 </body>
</html>
nardecky
  • 2,623
  • 8
  • 18
-1

You can use the window.formatMyLabels example from @nardecky in conjunction with paisa.js to get what you want.

Sudhir Jonathan
  • 16,998
  • 13
  • 66
  • 90