Search code examples
javascriptchartsnumber-formattingzingchart

Is it possible to display values in Indian System in ZingChart?

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?

Solution

  • 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>