Google Charts and Graphs

I am going to start posting tutorials and tips on our blog for your benefit of upcoming features for Deki Wiki 1.8.3.

The tutorial today is about the Google Charts and Graphs Deki Wiki extension.

Google Charts and graphs allow you to take comma separated values and display them in a variety of different ways.

Line Chart

The Line Chart script allows you to insert values into the following script to have a line chart display on your page:
{{ google.linechart( … ) }}

The line chart has the following values that can be changed:

1. Width and height ex: 400, 200
2. Chart values – This is the dataset that you want to plot on the chart ex: [[10,20,30,50,40],[40,50,30,20,10]]
3. Legends (optional) – This is what you can name the data sets ex: ['fake','real']
4. Colors (optional) – These are the colors of the lines ex: [ 'ff0000', '0000ff' ]

Here are the above example values inserted into the script.

{{ google.linechart(400, 200, [ [ 10, 20, 30, 50, 40 ], [ 40, 50, 30, 20, 10 ] ], [ 'fake', 'real' ], [ 'ff0000', '0000ff' ]) }}

This is what it looks like:

Bar Charts

If you want your data to be displayed as a bar chart then we will swap out the linechart in the beginning of the script with barchart

Also you can toggle with the horizonal/vertical aspect of the chart along with if the bars are next to each other or stacked using true and false values.

true,true = Vertical and stacked
true,false = Vertical and next to each other
false, true = Horizontal and stacked
false, false = Horizontal and next to each other

Here are examples of the barchart scripts with sample images below.

{{ google.barchart(400, 200, [ [ 10, 20, 30, 50, 40 ], [ 40, 50, 30, 20, 10 ] ], [ 'fake', 'real' ], [ 'ff0000', '0000ff' ], true, false) }}

{{ google.barchart(400, 200, [ [ 10, 20, 30, 50, 40 ], [ 40, 50, 30, 20, 10 ] ], [ 'fake', 'real' ], [ 'ff0000', '0000ff' ], false, true) }}

Pie Charts

Piecharts are a little different because it only requires one dataset and the last parameter is a boolean: True means that the pie chart will display in 3D and False means it will be displayed in 2D. Here are the values that are different:

labels (optional) – This is the same as Legend in Line and Bar chart ex: [ 'you', 'him', 'me' ]
colors (optional) – These are the colors of the lines (I use _ to keep the default colors)
threed (optional) – draw 3D chart default: true

Below are sample scripts with sample images below them.

{{ google.piechart(400, 200, [ 10, 20, 30 ], [ 'you', 'him', 'me' ], _, true) }}

{{ google.piechart(400, 200, [ 10, 20, 30 ], [ 'you', 'him', 'me' ], _, false) }}

The Google Charts integration allows you to create pages that include dynamic charts that pertain to the content on the page, allowing you to create professional looking wiki pages for projects or presentations. Deki Wiki has numerous extensions that allow you to create dynamic pages that improve the visual appearance of your content. Let me know what other extensions you would like to see samples for.