Integration API: charts with live data

charte.ca integration API comes handy when you want your published chart to display up-to-date information and you do not have the luxury of logging in to the editor, tweaking the data and re-publishing the chart manually every time the data changes. Consider the following P/E ratio vs. Price to book bubble chart that we want to be updated every hour:

charte.ca number formatting

Users want to have the ability to tweak number formatting. No, users need this feature. Just imagine having labels like "1382323332" and "1340152688" on a diagram comparing Chinese and Indian population. Or imagine a US GDP chart with a "$20000000000000" mark on the vertical axis. Or imagine that your audience wants to see negative amounts of some specific currency: "-£349.3300".

charte.ca supports number formatting for axis marks, data labels and callouts:

Since the rules of number formatting can be complicated, we decided not to invent our own mechanism for it. We just use the standard instead: ECMAScript Internationalization API Specification. It's a long specification, but the part that we are interested in boils down to this Mozilla document. This document defines how Javascript developers can specify the locale and formatting options when converting numbers to strings. For example, an object that enables Japanese yen formatting can be instantiated as follows:

new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });

and it can produce strings like "￥123,457". charte.ca does not provide any programming platform for chart creators, but it allows to pass the locale 'ja-JP' and the option object { style: 'currency', currency: 'JPY' } as additional parameters to the {value} keyword used in axis marks, data labels and callouts. The convention is to extend the "value" keyword with a semicolon followed by the number format specification:

NumberFormat:{locale:'<desired locale>', options:<desired options>}

For example:

{value;NumberFormat:{locale:'en', options:{useGrouping: true }}} will produce numbers with comma as a thousands separator

{value;NumberFormat:{locale:'en-US',options: style:'currency',currency:'GBP',minimumFractionDigits:4}}} will produce British pound amounts with 4 digits after decimal point.

In the example below, the callout format

{series}: {value;NumberFormat:{locale:'en', options:{useGrouping: true }}}

is specified, which makes the callout for the "0-4" age group with value 1453708 to be formatted as "0-4: 1,453,708":

Comparative histogram charts: population by age group

Great news: charte.ca now supports comparative histograms. This kind of charts comes  handy when you want to compare two or more groups of series side-by-side. In most cases, this type of charts is used to draw a population pyramid, but it has other uses as well.

The following chart shows country population by age group, for multiple years, comparing male and female population.

This post discusses comparative histogram creation process step-by-step.