Sam Sam - 2 years ago 167
Javascript Question

jqplot - date axis renderer : internationalization

I use jqplot, and I have date into my x-axis.

I use the DateAxisRenderer plugin but I want to translate the date to my current locale.

For example, for english

Jan 2012
Feb 2012...

and for french

Jan 2012
Fév 2012...

Any ideas?

Answer Source

A bit of explanation

jqPlot uses jsDate internally:

jsDate has built-in localization support and locale detection. This capability, however, is limited to a few ,pre-configured languages, on internal regional table (see 2.).

1. For the lucky ones

Since in my version of jqPlot (v1.0.4) the French language is included in this table (maybe a gift from the authors) all you have to do is simply setting the lang attribute on your <html> tag:

<html lang="fr">

Et voilà...

2. Foreigners

If you want to add your own missing language at runtime you can use these instructions:

    // Add a new localization
    $.jsDate.regional['it'] = {
        monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'],
        monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'],
        dayNames: ['Domenica','Lunedi','Martedi','Mercoledi','Giovedi','Venerdi','Sabato'],
        dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'],
        formatString: '%d-%m-%Y %H:%M:%S'
    // Do not forget to call

Do not forget to call $.jsDate.regional.getLocale() to refresh internal settings and to set the <html> tag accordingly.

Mine looks like:

<html lang="it">

That's all...

If you aren't able to control the markup for the html tag, you can set it with

document.documentElement.setAttribute('lang', 'it');

It doesn't work to set lang of an intermediate element, like a surrounding div.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download