Custom visualizations code samples

There are code samples available for developers of custom visualizations.

The code samples found provided have the purpose of illustrating certain aspects of the customvis library and tools. This means that the main focus of each sample is not completeness of the visualization, showing how certain things work. Each sample is fully documented and tested and can be made publicly available.

Note: If there is no internet connection in your environment, (e.g. Intranet, restricted environment) then the visualization will fail.

Before you deploy the custom visualization, you must package it.

For more information, see Packaging the custom visualization.

Note: If you receive a script error for https://d3js.org..., it is most likely caused by a missing external dependency on D3. It can be downloaded from the first URL specified in the error.

Location of the samples

You can find the custom visualization samples here: https://github.com/IBM/ca_customvis/tree/master/code-samples/11.1.x.

Weather

  • Render a single, non-optional, formatted data value.
  • Show how to include static images.
  • Make a sizeable visualization using svg viewBox.
  • Use of color, number and boolean properties.

Ternary

  • Render elements on a position in an equilateral triangle.
  • Enable or disable properties based on the value of another property.
  • Change render behaviour for small size visualizations.
  • Apply highlight and selection styling.
  • Store text in a resource file for possible translation.
  • Use an external javascript library ('RBush' for label overlapping).
  • Separate render logic from data handling as a coding pattern.
  • Memory efficient rendering with accessor functions for calculations.
  • Use UpdateInfo.reason for render optimization.

Scatter

  • Render a simple scatter plot chart.
  • Provide UI-language aware text.
  • Use various types of properties in the visualization.
  • Update property status based on the value of another property.
  • Customize the legend.
  • Use an optional slot.

Overlay bar

  • Render a simple bar chart with overlaid bars.
  • Embed a static image in a visualization.
  • Highlight and selection decorations.
  • Make modifications to palette colors.

Quadrant

  • Render a more advanced scatter visualization.
  • Use animation in charts.
  • Render axis titles.
  • Highlight and selection decorations (raise elements).
  • Use custom data domains for the x-axis and y-axis.

Sankey

  • Use a third party library for calculations.
  • Highlight and selection decorations by color and font.
  • Implement custom hit testing for tooltips, highlights and selections.
Note: IBM will provide support if these assets do not work as described for the product version(s) identified. However, we are unable to provide custom support for you such as adding features or troubleshooting environmental issues. These will be logged in our system as future Feature requests. These examples were created for advanced custom visualization developers. They are code samples with specific requirements and do not include all the features/interactivity/properties of an out-of-the-box Cognos visualization. They are intended to provide a baseline for developers to extend their visualizations. Any modifications you make are not supported by IBM. If you are not an advanced visualization developer, Cognos Analytics already delivers a full set of fully-featured and powerful visualizations that are ready to use.