How to use Google Charts with 4D

According to neuroscientists, we respond better and faster to a visual form than any other type of representation. That’s why graphs and charts are clearly a key to a better understanding of data.

So if you’re looking to display bar charts, histograms, or pie charts which are modern and fully compatible with the leading browsers, but also more suitable for the way the human brain processes information, Google Charts is one possible answer. The available chart types in Google Charts is varied: from the classical bar/column/pie charts, Google Charts also offers elaborated graphs such as Treemap, Candlestick and Gauge charts.

This blog posts provides an example of a donut, map and bar chart. Each chart displays the population by country in South America. In the following database, you have the 4D method to retrieve the data as well as several HTML files to display the different charts.

Database example

Data format

This database is very simple. A single method, GetJsonData, is needed to return a JSON data array meeting the Google Chart specification.

In the three following chart examples, the data format is the same, as shown below:

{
   "Data":[
      ["Country", "Population"],
      ["Argentina", 43847277],
      ["Bolivia", 10888402],
      ["Brazil", 209567920],
      ["Chile", 18131850],
      ["Colombia", 48654392],
      ["Ecuador", 16385450],
      ["Gabon", 1763142],
      ["Guyana", 77061],
      ["Paraguay", 6725430],
      ["Peru", 31774225],
      ["Suriname", 54761],
      ["Uruguay", 3444071],
      ["Venezuela", 31518855]
   ]
}

Donut chart

You can find the donut chart example in the “donutChart.html” file in the WebFolder.

Please refer to the Pie chart documentation from Google Charts for more information.

Map chart

You can find the map chart example in the “geoChart.html” file in the WebFolder.

For more details, please refer to the Geo chart documentation from Google Charts.

Bar chart

You can find the example of a bar chart in the “barChart.html” file in the WebFolder.

For more details, please refer to the Bar chart documentation from Google Charts.