charts-dynmaic
 [[include :whanethewhip:chart:dynamiccharts]] gives 

value1: '50'
value2: '300'
value3: '6000'
value4: '2500'
value5: '41'

 [[include :whanethewhip:chart:_template]] gives 

[[module Redirect destination="http://onx.wikidot.com/chart:dynamic-charts"]]

For a quick example of a working dynamic chart,  [[[http://whanethewhip.wikidot.com/chart:dynamiccharts/edit/true | click here]]]. The chart seen below is based on user input. Using [*http://www.wikidot.com/doc:data-forms Wikidot Data Forms], the data entered is attached to the [*http://code.google.com/apis/chart/ 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 options and customizations then refer to the [*http://code.google.com/apis/chart/ Google Chart API Documentation]. However to implement the API within Wikidot is easy.

[[=image http://chart.apis.google.com/chart?chxr=0,0,100&chxt=x&chbh=a&chs=500x220&cht=bhs&chco=4D89F9,C6D9FD&chd=t:%%form_data{value1}%%,%%form_data{value2}%%,%%form_data{value3}%%,%%form_data{value4}%%&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:

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

Go ahead and test this now. This page is a working live example of dynamic charts, [[[http://whanethewhip.wikidot.com/chart:dynamiccharts/edit/true | 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//
[[form]]
fields:
  value1:
    label: How old are you?
  value2:
    label: How many meals do you have per day?
  value3:
    label: How many times do you have sex per month?
  value4:
    label: How many hours daily do you spend on Wikidot?
  value5:
    label: Project Progress (Scaled from 1-100)
[[/form]]

[[div class="error-block"]]
Included page "labfooter" does not exist ([/labfooter/edit/true create it now])
[[/div]]

[[div class="error-block"]]
Included page "comments" does not exist ([/comments/edit/true create it now])
[[/div]]

standard - live "_template" used without any tricks and layout changes…