#<3>Highcharts Localization plugin. This plugin used for localization Highcharts date and number and also could be extend as you need.

#

Installation

Installing this plugin is simple. just import Highchart plugin and jQuery as core modules and then first import jalai.js then import highcharts-localization.js

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="js/jalali.js"></script>
    <script src="js/highcharts-localization.js"></script>

By default persian date and number are include in highcarts-localization.js.for add new localization you should below following steps:

• Create a json config object for converting Gregorian timestamp to your local date(e.g : Persian date).

  Important notes

  • You need a function that called getDate that accept timestamp parameter and return following parameters as a json config object :

    return {
        date: date,
        hours: date.getHours(),
        day: date.getJalaliDay(),
        dayOfMonth: date.getJalaliDate(),
        month: date.getJalaliMonth(),
        fullYear: date.getJalaliFullYear()
    };
        

Example :

    var PersianLocalizationDate = {
        /**
         * Get a timestamp and return jalali date.
         * @param timestamp
         * @returns {{date: Date, hours: number, day: *, dayOfMonth: *, month: *, fullYear: *}}
         */
        getDate: function (timestamp) {
            var date = new Date(timestamp);
            return {
                date: date,
                hours: date.getHours(),
                day: date.getJalaliDay(),
                dayOfMonth: date.getJalaliDate(),
                month: date.getJalaliMonth(),
                fullYear: date.getJalaliFullYear()
            };
        }
    };

• Create following javascript config object and assign your localization json date converter (in our example PersianLocalizationDate) to date parameter.

Example :

    return {
         /**
          * @type {String} , An ISO 639-1 language code(e.g :fa)
          */
         lang: '',
         /**
          * @type {String} , An ISO 3166-1 language code(e.g: IR)
          */
         country: '',
         date: PersianLocalizationDate,
         i18n: {
             weekdays: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنج شنبه', 'جمعه'],
             months: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند']
         }
    };
    

• Finally set locale option to Highcharts global options by Highcharts.setOptions().

Final Example :

    var PersianLocalizationDate = {
        /**
         * Get a timestamp and return jalali date.
         * @param timestamp
         * @returns {{date: Date, hours: number, day: *, dayOfMonth: *, month: *, fullYear: *}}
         */
        getDate: function (timestamp) {
            var date = new Date(timestamp);
            return {
                date: date,
                hours: date.getHours(),
                day: date.getJalaliDay(),
                dayOfMonth: date.getJalaliDate(),
                month: date.getJalaliMonth(),
                fullYear: date.getJalaliFullYear()
            };
        }
    };

    Highcharts.setOptions({
        locale: {
            /**
             * @type {String} , An ISO 639-1 language code
             */
            lang: 'fa',
            /**
             * @type {String} , An ISO 3166-1 language code
             */
            country: 'IR',
            date: PersianLocalizationDate,
            i18n: {
                weekdays: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنج شنبه', 'جمعه'],
                months: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند']
            }
        }
    });

• Know you can use blow functions for localization date and number :
  • Highcharts.localizationDateFormat(dateFormat, timestamp) :
    Convert Gregorian date to your localization date, for example jalali date
  • Highcharts.localizationNumber (number) :
    Convert english number to persian and arabic number

See online example

- Basic Example - Time Series and zoomable

Enjoy Highcharts localization. Please contact me if there is any problem Thanks all.

Milad Jafary ([email protected])