Localization is important when considering the design of web charts that will be used by people in different countries. Beyond language and browsers, what should you do? ZingChart offers some in-chart features that provide more advanced options to localize online charts. By taking advantage of these features, you can offer a better user experience to the people looking at your charts.

Right-to-Left Text Support

In parts of the globe where people read from right to left, the “rtl”:true attribute is important. This is available for any text attribute, such as title, subtitle, source, series text, and legend item, just to name a few.

Decimal Separators

Not everyone in the world uses periods to denote decimal places. While ZingChart uses a period by default, you can change this in the graph object scale-x or scale-y. By changing the value for the decimals-separator attribute, you may use any string or character to replace the decimal.

Similarly, you can use periods to replace commas for thousands separators. You can set the character you’d like in the thousands-separator attribute. This helps localize charts for dozens of countries that use commas instead of periods in these cases.

Currency

We’ve got your symbols for localized currencies right here. Formats for values can be set to:

Plus, ZingChart can even detect if the currency symbol should go before or after the value.

Time Zones

ZingChart's has the ability to display time series data in local or UTC time. This way to localize online charts can be a lifesaver for getting users in different time zones to understand the same set of data. You can set the UTC attribute to “true” or “false” to toggle this on or off.

Maps

Maps are the fastest way for users to understand data specific to different locations.

Between continents, regions, and countries, we have most of the globe covered. Plus, we are constantly adding more maps to the library. Many country maps allow drill down to states and provinces. Don’t see the country you need? Get in touch with us about having it added.

Images

A fun way to include local flavor in charts is to include imagery. Images can be placed and styled in a variety of ways, so you have a great deal of flexibility in this area.

Localize the Context Menu

The locale render method option lets you change the labels used for various elements of a chart, including the context-menu, and the bug reporter menu. This can really improve usability and make your charts feel really localized. Within your JSON, but outside the graphset object, include “locale”:”MYLOCALE” in which MYLOCALE is the name used in your locale JavaScript object, which we will use to set the labels.

In the page, create a JavaScript object called zingchart.il8n.MYLOCALE={}. Within the braces you can customize the language used throughout different chart menus, date formats, days of the week, months of the year, and more. The bottom line? This lets you create multiple default locale objects, one for each of the different locations served by your charts. Here’s what to include:

  1. zingchart.i18n.MYLOCALE = {
  2. 'decimals-separator' : ',',
  3. 'thousands-separator' : '',
  4. 'menu-reload' : 'MYLOCALE - Reload',
  5. 'menu-print' : 'MYLOCALE - Print Chart',
  6. 'menu-viewaspng' : 'MYLOCALE - View As PNG',
  7. 'menu-viewasjpg' : 'MYLOCALE - View As JPG',
  8. 'menu-downloadpdf' : 'MYLOCALE - Download PDF',
  9. 'menu-downloadsvg' : 'MYLOCALE - Download SVG',
  10. 'menu-zoomin' : 'MYLOCALE - Zoom In',
  11. 'menu-zoomout' : 'MYLOCALE - Zoom Out',
  12. 'menu-viewall' : 'MYLOCALE - View All',
  13. 'menu-viewsource' : 'MYLOCALE - View Source',
  14. 'menu-bugreport' : 'MYLOCALE - Submit Bug',
  15. 'menu-switchto2d' : 'MYLOCALE - Switch To 2D',
  16. 'menu-switchto3d' : 'MYLOCALE - Switch To 3D',
  17. 'menu-switchtolin' : 'MYLOCALE - Show Linear Scale',
  18. 'menu-switchtolog' : 'MYLOCALE - Show Log Scale',
  19. 'menu-fullscreen' : 'MYLOCALE - Full Screen',
  20. 'menu-exitfullscreen' : 'MYLOCALE - Exit Full Screen',
  21. 'date-formats' : {
  22. 'msecond' : '%d %M %Y<br />%g:%i:%s %A<br />%q ms',
  23. 'second' : ' %M/%d, %Y<br />%g:%i:%s %A',
  24. 'minute' : '%d %M %Y<br />%g:%i %A',
  25. 'hour' : '%d %M %Y<br />%g %A',
  26. 'day' : '%d %M %Y',
  27. 'month' : '%M %Y',
  28. 'year' : '%Y'
  29. },
  30. 'days-short' : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  31. 'days-long' : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  32. 'months-short' : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dec'],
  33. 'months-long' : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Agosto', 'September', 'October', 'November', 'December'],
  34. 'sync-wait' : 'MYLOCALE - Wait...',
  35. 'progress-wait-long' : 'MYLOCALE - Wait. Loading...',
  36. 'progress-wait-short' : 'MYLOCALE - Wait...',
  37. 'progress-wait-mini' : 'MYLOCALE - ...',
  38. 'error-header' : 'MYLOCALE - An Error Has Occured',
  39. 'error-message' : 'MYLOCALE - Error Message:',
  40. 'error-close' : 'MYLOCALE - Close',
  41. 'bugreport-header' : 'MYLOCALE - Submit Bug Report',
  42. 'bugreport-senddata' : 'MYLOCALE - Send JSON Data',
  43. 'bugreport-sendcapture' : 'MYLOCALE - Send Graph Capture',
  44. 'bugreport-yourcomment' : 'MYLOCALE - Your Comment:',
  45. 'bugreport-jsondata' : 'MYLOCALE - JSON Data:',
  46. 'bugreport-youremail' : 'MYLOCALE - Your Email Address',
  47. 'bugreport-infoemail' : 'MYLOCALE - if you want to receive via email our reply to your problem',
  48. 'bugreport-emailmandatory' : 'MYLOCALE - Email address is mandatory...',
  49. 'bugreport-submit' : 'MYLOCALE - Submit',
  50. 'bugreport-cancel' : 'MYLOCALE - Cancel',
  51. 'bugreport-confirm' : 'MYLOCALE - Your bug report was sent. Thank you!',
  52. 'about-close' : 'MYLOCALE - Close',
  53. 'viewsource-jsonsource' : 'MYLOCALE - Parsed JSON:',
  54. 'viewsource-originalsource' : 'MYLOCALE - Original JSON:',
  55. 'viewsource-close' : 'MYLOCALE - Close',
  56. 'viewsource-apply' : 'MYLOCALE - Apply',
  57. 'viewimage-close' : 'MYLOCALE - Close'
  58. };

Show Us Your Localized Charts

Do you have some examples of online charts to which you have added localization? Share your links in the comments below.