Formatting Strings

Many widgets have options that specify format strings used to format numbers and dates for display. For the most part, the format strings follow the format used in .NET. For example:

'n2' formats numbers with thousand separators and two decimal places
'c0' formats numbers with a currency sign, thousand separators and zero decimal places
'p0' formats percentages with zero decimal places
'd' formats short dates
'D' formats long dates

Here is an example that shows formatting strings in use with wijbarchart. See the underlined portions of the code.

Format Numeric Values Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijbarchart").wijbarchart({ axis:{ y:{annoFormatString:"p0"} }, chartLabelFormatString: "p0", hint:{ content: function(){ return this.data.label + '\n ' + Globalize.format(this.y, "p0") + ''; } }, seriesList: [{ label: "2012 Auto Sales", legendEntry: true, data: { x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'], y: [.05, .04, .21, .27, .1, .24] } }], }); }); </script>

Format Numeric Values Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijbarchart").wijbarchart({
            axis:{
                y:{annoFormatString:"p0"}
            },
            chartLabelFormatString: "p0",
            hint:{
                content: function(){
                    return this.data.label + '\n ' +  Globalize.format(this.y, "p0") + '';
                }
            },
            seriesList: [{
                label: "2012 Auto Sales",
                legendEntry: true,
                data: { 
                    x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'], 
                    y: [.05, .04, .21, .27, .1, .24] 
                }
            }],
        });
    });
</script>

In most cases, the details of how formatting is applied depends on the culture setting, either the server's culture, or the culture you specify using Localization and Globalization. In the examples below, we assume a culture setting of en-US.

Numeric Formatting

Format Character (not case sensitive)	Description	Sample Code	Results
c	Applies currency formatting with the default thousands separators and number of decimal spaces for the culture, or you can specify the number of decimal spaces.	dataFormatString: "c" dataFormatString: "c3"	$12.34 $1.234
d	Applies decimal formatting to integers using, by default, the minimum number of digits without leading zeros, or you can specify the precision so that leading zeros are added.	chartLabelFormatString: "d" chartLabelFormatString: "d5"	1234 01234
e	Applies scientific e notation formatting to numeric values with 6 decimal spaces by default, or you can specify the number of decimal spaces.	formatString: "e" formatString: "e2"	1.052033E+003 1.05e+003
f	Applies fixed formatting to numeric values with no thousands separators, and 2 decimal spaces by default, or you can specify the number of decimal spaces for rounding.	formatString: "f" formatString: "f3"	1234.57 1234.567
g	Applies general formatting to numeric values (fixed, or for very large numbers, scientific notation). You can specify the number of significant digits for rounding.	formatString: "g" formatString: "g2"	123.456 120
n	Applies number formatting with a default thousands separator and rounding to two decimal spaces, or you can specify the number of decimal spaces.	dataFormatString: "n" dataFormatString: "n4"	1,234.57 1.234.5670
p	Applies percentage formatting to numeric values with 2 decimal spaces by default, or you can specify the number of decimal spaces.	titleFormat: "p" titleFormat: "p0"	100.00% 100%
r	Applies round-trip formatting to Single, Double, or BigInteger values so that numeric values converted to a string parse back to the same numeric value.	annoFormatString: "r"	3.1415926535897931
x	Applies hexadecimal formatting to integer values using upper or lower case depending on the case of your format character, and you can specify the number of digits to display.	formatString: "X" formatString: "x4:	7B 007b

Date Time Formatting

Format Character (case sensitive)	Description	Sample Code	Results
d	Applies short date formatting.	formatString: "d"	7/14/2014
D	Applies long date formatting.	formatString: "D"	Monday, July 14, 2014
f	Applies full date and short time formatting.	formatString: "f"	Monday, July 14, 2014 1:45 PM
F	Applies full date and long time formatting.	formatString: "F"	Monday, July 14, 2014 1:45:30 PM
g	Applies general date and short time formatting.	formatString: "g"	7/14/2014 1:45 PM
G	Applies general date and long time formatting.	formatString: "G"	7/14/2014 1:45:30 PM
M or m	Applies month and day formatting.	formatString: "M"	July 14
O or o	Applies round-trip date and time formatting so that date values converted to a string parse back to the same date value.	formatString: "O"	2014-07-14T13:45:30.0900000
R or r	Applies RFC1123 formatting. For more information, see MSDN DateTimeFormatInfo RFC1123	formatString: "R"	Mon, 14 Jul 2014 20:45:30 GMT
s	Applies sortable date and time formatting.	formatString: "s"	2014-07-14T13:45:30
t	Applies short time formatting.	formatString: "t"	1:45 PM
T	Applies long time formatting.	formatString: "T"	1:45:30 PM
u	Applies universal sortable date and time formatting.	formatString: "u"	2014-07-14 13:45:30Z
U	Applies universal full date and long time formatting.	formatString: "U"	Monday, July 14, 2014 1:45:30 PM
Y or y	Applies year and month formatting.	formatString: "Y" formatString: "y"	July, 2014

Wijmo uses jQuery globalize to format numbers and dates, you can find more information about jQuery globalize here:

http://www.ibm.com/developerworks/opensource/library/os-jquerynewpart1/index.html
http://weblogs.asp.net/scottgu/archive/2010/06/10/jquery-globalization-plugin-from-microsoft.aspx