Go to top of page

Highcharts Demo

govCMS ships with a fixed set of modules which define the toolset for building applications. Developers do however have a good amount of freedom in the theme layer to bring sites to life.  We wanted to demonstrate that this was possible with govCMS by using a combination of Paragraphs, Highcharts and some glue code implemented in the theme layer. Editors are able to create new "Highcharts" Paragraphs, add CSV data to them and select a chart type. The result is a responsive chart visualizing that data.

Editors are able to add a chart by creating a new "Highcharts" paragraph. Data is included by pasting in a CSV into a textarea and defining a chart title and axis labels.

This functionality is going to be very handy for any kind of report containing data, including annual reports, infographic pages and the like.

Line Chart

"City","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec" "Tokyo",7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6 "New York",-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5 "Berlin",-0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0 "London",3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8

Area Chart

Country,1940,1941,1942,1943,1944,1945,1946,1947,1948,1949,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006 "USA",null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 "USSR/Russia",null, null, null, null, null, null, null, null, null, null,5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,21000, 20000, 19000, 18000, 18000, 17000, 16000

Bar Chart

Period,"Africa", "America", "Asia", "Europe", "Oceania" "Year 1800",107, 31, 635, 203, 2 "Year 1900",133, 156, 947, 408, 6 "Year 2012",1052, 954, 4250, 740, 38

Pie chart

Brand,Share "Microsoft Internet Explorer",56.33 "Chrome",24.03, "Firefox",10.38 "Safari",4.77 "Opera",0.91 "Proprietary or Undetectable", 0.2

Pie chart

Brand,Share "MSIE",56.33 "Chrome",24.03, "Firefox",10.38 "Safari",4.77 "Opera",0.91 "Undetectable", 0.2