FusionCharts API-Methods: fomatNumber

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the formatNumber() method -->
<div id="indicatorDiv">Method Name: <strong>formatNumber()</strong>    
    <p>Formats input numbers based on the formatting configuration passed. The function can be called globally on the FusionCharts object or on a specific instance of FusionCharts Suite XT.</p>
    <p>Enter a number in the text box shown below and click <strong>Format Number</strong>.</p>
   <div class="text-center">   	 
   	    <p>
   	    	<input type="text" id="number" placeholder="Enter a number here." />
   	    	<button id="format">Format Number</button>
   	    </p>   	    
   	    <div id="format_message">The formatted number : <span id="msg"></span></div>
   </div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
strong{
  font-weight: bold;
}

.text-center {
  text-align: center;
}

p {
  margin: 10px auto;
}

.mb-20 {
  margin-bottom: 20px;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#format {
    font-size: 13px;
    padding: 10px;
}
#format_message {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#number {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
    padding: 10px;
}

JavaScript

/*
 * @description
 * The formatNumber() method formats input numbers based on the formatting configuration passed. The function can be called globally on the FusionCharts object or on a specific instance of FusionCharts Suite XT.
 * @param {Number} number: Number to be formatted
 * @param {String} type: When called globally on the FusionCharts object, the function applies the configuration settings to all numbers on the chart. This parameter selectively formats numbers based on chart elements, by taking yaxisvalues, xaxisvalues, and datalabels as values.Default: datalabels
 * @param {Object} config: Optional number formatting attributes to override the default number formatting options of a chart.
 While calling formatNumber on the FusionCharts object, this becomes the second parameter.

*/
function format() {
    var number = document.getElementById("number").value;
    var msg = document.getElementById("msg");
    msg.innerHTML = FusionCharts.formatNumber(number, {
        "numberPrefix": "$"
    });

}
document.getElementById("format").addEventListener("click", format);