Dynamic Charts

For a quick example of a working dynamic chart, click here. The chart seen below is based on user input. Using Wikidot Data Forms, the data entered is attached to the Google Chart API. There are tons of options for using the Google Chart API and this guide cannot fully prepare you for that so if you are looking for display and customization options then refer to the Google Chart API Documentation. However to implement the API within Wikidot is easy.

chart?chxr=0,0,100&chxt=x&chbh=a&chs=500x220&cht=bhs&chco=4D89F9,C6D9FD&chd=t:32,4,20,3&cht=p3&chl=Your+Age|Meals|Sex|Wikidot+Hours

How to make a dynamic chart

In this example I'm going to create a progress chart. This chart will display a visual representation of the progress made for any given project. The first thing I did was browse around the Google Chart API documentation to find a chart I liked. Then I created a simple chart to use as my template. With the Google Chart API, a finished chart is simply a URL:

http://chart.apis.google.com/chart?chs=200x125&cht=gom&chd=t:45&chco=FFFFFF,000000

Note the portion that reads &chd=t:45. This is the value attached to the chart. So for example, 45 would represent 45% complete in a progress chart. In order to make this a dynamic chart, you would need the replace the number 45 with the chunk of data collected using Wikidot Data Forms, for my chart I've given it the name value5, that alters the URL to look like this.

http://chart.apis.google.com/chart?chs=200x125&cht=gom&chd=t:%%form_data{value5}%%&chco=FFFFFF,000000

The next part is easy. Since the chart is seen as an image, all that is left is to plug the image onto the page:

[[=image http://chart.apis.google.com/chart?chs=200x125&cht=gom&chd=t:%%form_data{value5}%%&chco=FFFFFF,000000]]

This results in:

chart?chs=200x125&cht=gom&chd=t:67&chco=FFFFFF,000000

Project Progress

Go ahead and test this now. This page is a working live example of dynamic charts, just click here and alter the values for each of the options present. The first 4 options are for the 3D pie chart and the final option is for the progress chart.

Usage

Chart usage is limited only by your imagination. Charts could depend on tags (iftags) and can also be included within list pages. Combining Wikidot Data Forms with listpages could be fun as well as calling data from an entire Wikidot category in order to chart the results.




Original Data Entered

How old are you? 32
How many meals do you have per day? 4
How many times do you have sex per month? 20
How many hours daily do you spend on Wikidot? 3
Project Progress (Scaled from 1-100) 67