Interactive Charts using Google Visualization API: Examples

This post describes the use of the tool posted here. The latest changes are found here.

---

This post will be updated with examples on how to utilize this tool to build various charts. I will add examples upon request. If you have a smashing chart or a special trick, please send it to me and i will post the images here.

---

Combo chart

The chart:

The list:

The configuration:

The reason for using “chartArea.left:50″ is to align the chart left so that the legend is not truncated.

NOTE: The “Column index” used when setting up the series is one notch down from the index shown to the left of the columns. This has to do with the series only applying to the numeric columns.

---

How to put multiple charts in one page

Here is a few screenshots showing how to put multiple charts in one page.

You must ensure that the CEWP holding the code is placed below all containers.

---

Motion chart

The chart:

The list:

The configuration:

---

URL filter

This filter is applied in the “Custom CAML” section like this:
The configuration:

Use the FieldInternalName of your field – my field is named “Status”.

The URL:

The chart:

Manual filter setup filter

This is used to filter on “Single line of text” columns. This filter is applied in the “Custom CAML” section like this:
The configuration:

To get the CAML, select the checkbox “Create a filter field above the chart using”, select “manual filter setup” and then click “Build CAML from selected filters”. You need to know the FieldInternalName of the field and insert it in the placeholder in the CAML.

The list:

The chart:

Grouped by choice column value

I got a request from Michael:

Hello,
Im trying to chart a Calendar, i created a Column called “Category” (its a drop-down box with the categories)
Now i want to create a chart that:
– is a bar chart
– the h axis is “created by”
– the v axis is a the sum of a column that calculate the hours between end and starttime of events (allready solved this with a formular)
– the Bars are grouped by the Creator
– the chart is stacked (allready done)
– the stacked bars show the name of the category
– for each category a specified colour

Here are some screenshots of the list fields

The “Time” field calculates the difference between start and end:

The Category field is a plain choice field:

The series in the chart are made up by one calculated column per choice in the “Category” field:

Make one for each category.

The configuration:

The chart:

---

Please make requests, and i will post examples to the best of my knowledge.

Alexander