PubChem Widgets


What are Widgets?back to top

PubChem Widgets are tools that provide a rapid way to display some commonly requested PubChem data views, such as tabular summaries of:

There are several different ways you can use widgets: Subsequent sections of this document describe the types of widgets available, provide examples of table-based widgets that display bioactivity outcomes, patents, and literature (PubMed), and provide complete instructions on how to use these table-based widgets.

Additional widgets (non-table-based) allow you to: display the classification of a PubChem compound, substance, or bioassay record; use a carousel to display a list of images or HTML elements in an animated way for a set of compounds or substances; or apply an autocomplete function in your web pages. (Separate files provide Classification widget help, Autocomplete widget help and Carousel widget help, because those tools are implemented in a slightly different way than the table-based widgets described in this file.)


How to use the widgets: back to top

format a URL to open a widget in a separate web page | insert widget directly in your own HTML page  |  open as a modal pop-up window  |  use share button to link to PubChem page that displays desired widget or embed widget as an iframe

Format a URL that opens a widget in a separate web page back to top

Base URL:back to top
http://pubchem.ncbi.nlm.nih.gov/widget/widget.cgi?
Parameters available:back to top
Parameter with default value Required Description
idtype Yes specifies what type of identifier you will input. The values can be either cid (for a PubChem Compound identifier) or sid (for a PubChem Substance identifier) for the BioActivity, Patent, or PubMed (literature) widgets. The bioactivity widget can also accept aid (for a PubChem BioAssay identifier) as an idtype. There is no default value for this input parameter, but you must choose between the values mentioned here.
id Yes integer that uniquely identifies the PubChem record of interest. For example, 2244 is the integer (CID) that uniquely identifies the PubChem Compound record for aspirin, and 2244 is the integer (SID) that uniquely identifies the PubChem Substance record for cytidylate. (The identifers are unique within a database, and the idtype parameter enables you to specify the desired database.)
gridtabletypeYesvalues can be pccassay (to display the BioActivity widget), patent (to display the Patent widget), or pubmed (to display the PubMed (literature) widget).
filter No This parameter is currently available only for the gridtabletype=pcassay. If the parameter is included in the URL (e.g., filter=true), then a set of filters (shown as bar graphs) will be displayed above the datatable, as shown in the sample bioactivity widget, enabling you to subset the data displayed in the table. If you click on a bar graph of interest, the table will be refreshed to display only the subset of data that corresponds to the filter you selected.
width No The default value is 100%. If desired, you can specify another value in pixels or as a percent of browser window width.
height No The default value is 340 pixels. If desired, you can specify another value in pixels.
title No If desired, you can specify a title for your widget, using the hexidecimal codes for space characters (%20) and any symbols you choose to include. For example, use %5B to display the left square bracket ([) and %5D to display the riht square bracket (]). A sample title string is:

title=Patent%20Table%20for%20Aspirin%20%5BPubChem%20CID%202244%5D

which will display the following title:

Patent Table for Aspirin [PubChem CID 2244]
helpurl No The value of this parameter is http://pubchem.ncbi.nlm.nih.gov/widget/docs/widget_help.html. It is associated with the help link  Help button that appears in upper right corner of a table-based widget  that appears in the upper right corner of a table-based widget. The help link always appears in that position, whether or not you include the "helpurl" parameter in your URL, and opens the Widgets Help document (i.e., this file).

Example URLs:back to top

Insert a PubChem Widget directly in your own HTML page by following 3 easy steps: back to top

  1. Include the PubChem javascript libaries and cascading style sheets in the <head> of your html page:
  2.       <script type='text/javascript'>Ext = {buildSettings:{"scopeResetCSS":true }};</script>
          <script type='text/javascript' src='//pubchem.ncbi.nlm.nih.gov/widget/extjs-4.1.1/ext-all.js'></script>
          <script type='text/javascript' src='//pubchem.ncbi.nlm.nih.gov/widget/1.0.2.1b/pubchem.widgets.js'></script>
          <link rel="stylesheet" type="text/css" href="//pubchem.ncbi.nlm.nih.gov/widget/extjs-4.1.1/resources/css/ext-all-gray-scoped.css">
          <link rel="stylesheet" type="text/css" href="//pubchem.ncbi.nlm.nih.gov/widget/1.0.2.1b/pubchem.widgets.css"">
    	
  3. Initialize the widget, setting desired parameters such as the height, width and title of the widget:
  4.       <script type='text/javascript'>
            Ext.onReady(function() {
              var grid = PubChem.widget.CreateGridTable({
                gridtabletype: 'patent',
                cid: 2244,
                renderTo: 'mydiv',
                width: 500,
                height: 300,
                title: 'Patent Table for Aspirin [PubChem CID 2244]',
                helpurl: 'http://pubchem.ncbi.nlm.nih.gov/widget/docs/widget_help.html'
              });
            });
          </script>
    	
    Additional parameters that are specific to each widget are discussed below. Note that we are initializing the widget when the page is ready to be rendered by using the Ext JS function onReady(). If you are using another javascript library, you may use that library's equivalent function.

     

    Alternatively, if you wish to display the widget in a modal popup window, use the function PubChem.widget.CreateGridModalWindow instead of PubChem.widget.CreateGridTable. Modal examples for the various types of widgets are provided below (e.g., modal bioactivity widget, modal patent widget, modal PubMed widget).

     

    For widgets that display data as a table ("table-based widgets"), you can use an optional  filter:true  parameter to display graphical filters, which enable you to subset the data. Currently, the graphical filters appear only in the bioactivity widget. For example:
          <script type='text/javascript'>
            Ext.onReady(function() {
              var grid = PubChem.widget.CreateGridTable({
                gridtabletype: 'pcassay',
                cid: 2244,
                renderTo: 'mydiv',
                filter:true,
                width: 500,
                height: 300,
                title: 'BioActivity Table for Aspirin [PubChem CID 2244]',
                helpurl: 'http://pubchem.ncbi.nlm.nih.gov/widget/docs/widget_help.html'
              });
            });
          </script>
    	
    (Note: If you include the  filter:true  parameter in table-based widgets other than the bioactivity widget, the parameter will be ignored at this time and the widget will simply appear in its default format.)

     

  5. Position the widget with an html div that has a unique id:
  6.       <div id="mydiv"></div>
    	
    The widget will be rendered inside of the div. Note that the id of the div must be specified by the renderTo argument in step #2.

Use the share button Share button that appears in upper right corner of a table-based widget back to top


Widgets are used in PubChem Compound and Substance summary pages. For example, they are used to display information about a small molecule's bioactivity, patents, and literature (PubMed). Anytime you see a widget that displays data as a table, you can use the share button  Share button that appears in upper right corner of a table-based widget  to either link to that widget in its own PubChem web page, or to embed the widget in your page as an iframe.

The share button  Share button that appears in upper right corner of a table-based widget  appears in the upper right corner of every table-based widget. It also appears as a more prominent link  Share button that appears in lower right corner of a table-based widget  in the lower right corner of the table, where you will see the icon beside the word "share." (The share option does not appear in other types of widgets, such as autocomplete, which do not display data as a table.)

Click on the share button Share button that appears in upper right corner of a table-based widget to open a "Bookmark or share" pop-up box, which provides two pieces of information:
  1. Link (URL) that can be used to open a PubChem page that displays the widget. back to top

    For example, the following URL will open a PubChem page displaying the widget that lists the patents associated with PubChem CID 2244 (aspirin):

    http://pubchem.ncbi.nlm.nih.gov/widget/widget.cgi?id=2244&idtype=cid&gridtabletype=patent


  2. HTML code that can be used to embed the widget in your page as an iframe. back to top

    For example, the following HTML code will embed an iframe diplaying the widget that lists the patents associated with PubChem CID 2244 (aspirin):

    <iframe src="http://pubchem.ncbi.nlm.nih.gov/widget/widget.cgi?id=2244&idtype=cid&gridtabletype=patent" frameBorder="0" style="width: 90%; height: 400px" ></iframe>

    The resulting iframe will look like the following (click on the share button  Share button that appears in upper right corner of a table-based widget  to try it out!):


Types of widgetsback to top

The following types of widgets are currently available:

Table-Based Widgetsback to top

Table-based widgets include the BioActivity concise summary, the Patent widget, and the PubMed widget. Each can display data several types of NCBI records as detailed below. All widgets share similar functionality: columns in the widget can be sorted by clicking on the column headers, data is paginated, and data can be downloaded in Excel compatible csv form by clicking on the icon of a disk in the upper right of the widget. (This file describes how to use the table-based widgets.)

BioActivity Concise Summary Widgetback to top

This widget contains information about BioAssay outcomes. It is selected by setting the gridtabletype parameter in step #2 to 'pcassay'.

The following example shows BioAssay outcomes for aspirin (CID 2244):
In this example, the cid parameter from step #2 is used to select the record type (cid) and record (2244) used to retrieve the data.

For the bioactivity widget, the following record types are supported as parameters in step #2:

 

A modal example:

Open the bioactivity widget as a modal popup window by using the function PubChem.widget.CreateGridModalWindow instead of PubChem.widget.CreateGridTable in step #2.

 

Patent Widgetback to top

This widget contains information about patents. It is selected by setting the gridtabletype parameter in step #2 to 'patent'. The following example shows patents for aspirin (CID 2244):
In this example, the cid parameter from step #2 is used to select the record type (cid) and record (2244) used to retrieve the data.

For the patent widget, the following record types are supported as parameters in step #2:

 

A modal example:

Open the patent widget as a modal popup window by using the function PubChem.widget.CreateGridModalWindow instead of PubChem.widget.CreateGridTable in step #2.

 

PubMed Widgetback to top

This widget contains information about PubMed articles. It is selected by setting the gridtabletype parameter in step #2 to 'pubmed'.

The following example shows pubmed articles for aspirin (CID 2244):
In this example, the cid parameter from step #2 is used to select the record type (cid) and record (2244) used to retrieve the data.

For the PubMed widget, the following record types are supported as parameters in step #2:

 

A modal example:

Open the PubMed widget as a modal popup window by using the function PubChem.widget.CreateGridModalWindow instead of PubChem.widget.CreateGridTable in step #2.

 

Additional Widgets (non-table-based)back to top

Additional widgets (non-table-based) allow you to: display the classification of a PubChem compound, substance, or bioassay record; use a carousel to display a list of images or HTML elements in an animated way for a set of compounds or substances; or apply an autocomplete function in your web pages. (Separate files provide Classification widget help, Autocomplete widget help and Carousel widget help, because those tools are implemented in a slightly different way than the table-based widgets described in this file.)

Classification Widgetback to top

The Classification widget is a tool enables you to display the classification of a PubChem Compound, Substance, or BioAssay of interest within your own web page. (As examples, see the classifications annotated on a PubChem compound record (aspirin), substance record (2-Methylbenzylamine), and assay record (GR-GFP Redistribution).) It is documented in a separate Classification Widget Help file because it is implemented slightly differently than the table-based widgets (bioactivity, patent, pubmed) described in this file. The methods used to annotate PubChem records with terms from available classification hierarchies are described in the main help document for the Classification Browser.

 

Carousel Widgetback to top

The Carousel widget is a tool that displays a list of images or HTML elements in an animated way, and is documented in a separate Carousel Widget Help file. The Carousel widget is developed using the javascript library ExtJS. The items displayed in the carousel can be HTML elements or ExtJS components, such as images of chemical structures, titles of PubMed references, thumbnails of 3D protein structures that bind to the chemicals, etc.

Two special purpose wrappers, which make us of the carousel widget, are also available. They make it easy to display the following types of PubChem data in your own web pages:
  1. "ChemicalList" wrapper allows you to input a list of PubChem Compounds (CIDs) or Substances (SIDs) of interest, and displays a carousel that shows the corresponding chemical structure thumbnails and synonyms.

  2. "RelatedCompounds" wrapper allows you to input a PubChem Compound (CID) of interest, and displays a carousel that shows chemical structure thumbnails of related compounds that have certain types of annotations, such as medication information, literature, 3D protein structures, bioactivities, and patents.
These carousels are used to display information in PubChem web pages, and you can now use them to display similar information directly in your HTML pages.

 

Autocomplete Widgetback to top

The Autocomplete widget is a tool that suggests a list of terms when you type input into a search field. It is documented in a separate Autocomplete Widget Help file because it can be implemented with either ExtJS or with jQuery, whereas the widgets documented above are implemented only with ExtJS. The Autocomplete Widget therefore uses a slightly different set of steps and options from those noted above. In addition, the Autocomplete widget can only be embedded into your web page; there is no option to open it as a layer on top of your web page.

 


Log of Changes to Widgetsback to top

09 APR 2013 The pubchem.widgets.js file has also been updated to version 1.0.2.1b, in order to accommodate improvements in the graphical filters and carousel widget, along with bug fixes. The updated javascript file can now be used by all of the various types of widgets.
05 APR 2013 A Classification Widget is now available. A brief description is above, and a separate Classification Widget Help file provides details about its use, along with examples.
21 MAR 2013 A Carousel Widget is now available. A brief description is above, and a separate Carousel Widget Help file provides details about its use, along with examples. The pubchem.widgets.js file has also been updated to version 1.0.2b, in order to accommodate the carousel widget, and can now be used by all of the various types of widgets.
10 DEC 2012 A new share button  Share button that appears in upper right corner of a table-based widget  now appears in widgets that display data as a table. It displays code that you can use to either link to that widget in its own PubChem web page, or to embed the widget in your page as an iframe.

As a result, there are now four ways you can use widgets:
  1. insert a widget directly in your page
  2. open a widget from your web page as a modal pop-up window
  3. link to a PubChem web page that displays the widget
  4. embed the widget in your page as an iframe
In addition, a new parameter is now available to display graphical filters, which enable you to subset the data. Currently, those filters appear only in the bioactivity widget.
08 NOV 2012 An Autocomplete Widget is now available. A brief description is above, and a separate Autocomplete Widget Help file provides details about its scope and use.
25 OCT 2012 Modal option added, which allows you to open widget on top of your web page (as a modal popup window) by using the function PubChem.widget.CreateGridModalWindow instead of PubChem.widget.CreateGridTable in step 2). This provides an alternative to opening a widget within your web page. See examples of: bioactivity modal widget, patent modal widget, PubMed modal widget.
01 OCT 2012 Initial release of PubChem Widgets

Revised 09 April 2013