From OpenTutorials
Jump to: navigation, search

Slideshow Pie Chart Plugin (about 10 minutes)

Tutorial Sources
Tutorial Curators Mike Smoot

Google Pie Chart Plugin

Biological Use Case: Present experimental data as a Pie Chart overlaid on nodes in a network.


Install GoogleChartFunctions Plugin

Begin by installing the GoogleChartFunctions plugin from the Plugin Manager.

  • Start Cytoscape
  • Select "Plugins->Manage Plugins"
  • Select the "Other" folder within the "Available for Install" folder in the Plugin Manager window.
  • Find the "GoogleChartFunctions" plugin. Select the highest version of the plugin (i.e. most up-to-date)
  • Click the "Install" button in the Plugin Manager.

The GoogleChartsFunctions plugin should now be installed. This plugin provides a variety of functions that the attribute editor can interpret. We will use one of these functions to create the pie chart image.

Load the Data

Pie charts can be applied to any network as long as the proper attributes exist. For this tutorial we'll load a simple network and two simple attribute files to demonstrate the format of the data.

  • Save this network File:Pie-chart-network.sif to a local file and load it in Cytoscape.
    • Click "File->Import->Network (Mulitple File Types)...
    • Select the file "pie-chart-network.sif"
  • You should now see a simple four node network loaded.
  • Save these two node attributes (File:Pie-chart-node-data.na, File:Pie-chart-node-labels.na) files to your local computer and load them in Cytoscape.
    • Click "File->Import->Node Attributes"
    • Select the file "pie-chart-node-data.na"
    • Click "File->Import->Node Attributes"
    • Select the file "pie-chart-node-labels.na"
  • You should now see two new attributes "pie-data" and "pie-labels" loaded in attribute browser.

The three files just loaded are:

  • pie-chart-network.sif
A pp B
B pp C
C pp D
C pp A
  • pie-chart-node-data.na
A = (10.0::50.0::30.0::10.0)
B = (15.0::15.0::20.0::50.0)
C = (70.0::10.0::10.0::10.0)
D = (20.0::30.0::40.0::10.0)
  • pie-chart-node-labels.na
A = (Exp 1::Exp 2::Exp 3::Exp 4)
B = (Exp 1::Exp 2::Exp 3::Exp 4)
C = (Exp 1::Exp 2::Exp 3::Exp 4)
D = (Exp 1::Exp 2::Exp 3::Exp 4)

It is important to understand the format of the node attribute files. Most Google Chart functions operate on List attributes. To create a list attribute, the file must be formatted in the Cytoscape Attribute format for lists. This looks like:

nodeName1 = (value1::value2::value3)
nodeName2 = (value1::value4::value5)

Where "attrName" represents the name of the attribute, "nodeName" is the node identifier used to map the attribute data onto nodes in the network. The list of values is represented by "(value1::value2::value3)", which means all of the values are surrounded by a pair of parentheses and the individual values are delimited by two colons (::). More information can be found in the [Cytoscape Manual]

The data values for the "pie-data" are whole numbers that are interpreted as percentages. While the example here lists values that sum to 100, the plugin will still work if your data do not. However, if your data sum to a small number (e.g. 5), then Google Charts will return an empty graphic. It's best to keep the numbers summing to something close to 100.

At this point, your Cytoscape session should look something like the image below, with a simple network loaded along with list attribute data associated with each of the nodes.


Create The Chart URL

The Google Charts API, when sent data, produces a chart image at a URL. In Cytoscape rather than downloading this image, we load it directly from the URL that Google generates. So the next step is to create a URL pointing to a chart from out data. To do this we first create an attribute to hold the url and then use a function to gather the other data and create the URL. The steps are as follows:

  • Make sure at least one node in your network is selected by clicking on a node.
  • In the "Data Panel" click on the "Create New Attribute" icon (Pie-chart-new-attribute.png).
  • Choose "String Attribute" from the pop-up menu.
  • Name your attribute "pie-url".
  • Now click on a cell in the table browser under the "pie-url" column.
  • Now click the "Function Builder" icon (Pie-chart-function.png).
    • Within the Function Builder select the "GPIECHART" from the list of available functions. This should begin building the function statement. (If you don't see the GPIECHART function, it means that the GoogleChartFunctions plugin was not properly installed.)
    • Next select the "pie-labels" attribute as the Next Argument and click the "Add" button. This should add the "pie-labels" attribute to the function statement.
    • Next select the "pie-data" attribute as the Next Argument and click the "Add" button.
    • The function now has the necessary data needed to generate a pie. Other arguments like title, width, and height can also be specified, but we won't show those here.
    • Before creating the function, we will choose how to apply the function. In this case, we would like a pie chart to appear on every node, so we will select "Entire Attribute" from "Apply To:" combo box.
    • Finally press the "OK" button.

You should now see the "pie-label" attribute populated with a URL for each node. You can right click on one of the URL cells in the table browser and select "Open this URL in a browser" to see image that gets created.

Map the Image to the Node

In this step we will map the URL attribute just created to each node using the VizMapper.

  • Select the VizMapper Panel from the Control Panel on the left.
  • From the list of visual properties, select one of the "Node Custom Graphics" options (any should work).
  • For the Node Custom Graphics choose the "pie-url" attribute that you just created as the attribute to use for the mapping.
  • Next choose "Passthrough Mapping" as the mapping type.
  • You should now see pie charts displayed on your nodes!



  • Problem: The pie chart image looks lopsided.
    • To fix this problem you'll need to adjust the VizMapper default dependencies.
    • Click on the "Defaults" network button in the VizMapper.
    • Select the "Dependencies" tab.
    • Uncheck the "Synchronize Custom Graphics Size to Node Size" box.
  • Problem: The pie charts are huge!
    • The default image size for the pie charts are 400 by 200, which we've found to be a reasonable resolution.
    • Simply move the nodes apart to space things as desired.
    • If you have a lot of nodes, use the "Layout->Scale" tool to adjust node spacing.