Format All Numeric Values

Building on the Quick Start example, you can change the formatting of the numeric values for the axis labels, chart labels, and tooltips.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which does the following:

Sets the following three labels to use p0 formatting (percentage with no decimals):
- Y axis annotation labels
- Labels for each bar in the chart (chartLabelFormatString)
- Data labels within the hint option
Creates a series with the following properties:
- Tooltips display with "2012 Auto Sales" and the data value when you mouse over each bar.
- A legend displays.
- The X axis displays major auto manufacturers.
- The Y axis displays the percentage of increase in sales over the previous year.

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>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
Save your HTML file and open it in a browser. The chart appears like the one in the image below, with all of the numeric data values formatted to show percentages.

Widgets

BarChart Quick Start

Reference

wijbarchart API

axis Option

chartLabelFormatString Option

hint Option

seriesList Option