FusionCharts Pareto chart code sample

A Pareto chart is a type of chart that combines the column visualization with the line visualization.

About this task

For more information about the FusionCharts Pareto custom visualization code sample on IBM Accelerator Catalog, see FusionCharts pareto.

The data values in a Pareto chart are represented by columns, which are arranged in descending order of magnitude. The cumulative total of these values is displayed by an upward curving line. Pareto charts are used for isolating the key causes of a problem. They can also be used for determining the key factors of success. The left vertical axis or the primary axis shows the frequency of occurrence, the cost, or other important units of measurement. The right vertical axis or the secondary axis shows the cumulative percentage of the total number of occurrences, the total cost, or the total of a specific unit of measurement.

Note: This sample custom visualization provides a way to show how to use a FusionCharts Pareto chart as a custom visualization in IBM® Cognos® Analytics. This sample can be used at no cost, but moving it into production would require a license from FusionCharts.
Note: This code sample is intended for an advanced custom visualization developer. It provides an opportunity for developers to extend their visualizations. If you are not a visualization developer, IBM Cognos Analytics comes with a full set of powerful visualizations that are ready to use.
Note: We have enabled a number of properties. You can enable more properties if the chart engine supports that.

FusionCharts Pareto charts are supported as of IBM Cognos Analytics 11.1.7

This custom visualization code sample provides a way to show how to use FusionCharts as custom visualization in IBM Cognos Analytics. This code sample explains how to integrate a FusionCharts Pareto chart but similar code can be used to integrate other FusionCharts.

There are code samples available for developers of custom visualizations. The code samples illustrate certain aspects of the customvis library and tools. The main focus of each sample is not the completeness of the visualization, but rather to demonstrate how specific features work.

To view the source code and packed bundle (.zip file) for the FusionCharts Pareto chart sample, go to this public GitHub repository. To download the files, browse to the root of this directory and click Clone or download.

For more information, see Custom visualizations code samples.

For more information about custom visualizations, see Developing custom visualizations. For an excellent tutorial to get you started, see Custom visualizations - tutorial.

There are three ways to use this sample custom visualization.
  • You can upload the packed bundle (.zip file).

    For more information, see Packaging the custom visualization.

  • You can package a sample with customvis pack and upload the bundle (zip file) to IBM Cognos Analytics

    For more information, see Packaging the custom visualization.

  • You can run any sample locally by running customvis start inside the folder that contains the sample. After that, you can use the Preview Vis in IBM Cognos Analytics Dashboard or Reporting to insert the custom visualization in your dashboard or report.

    For more information, see Using a D3 sample in your custom visualization.

The following steps demonstrate how to use the FusionCharts Pareto chart and populate it with data.

Procedure

  1. Create a dashboard and click the Visualization Change visualization icon icon in the toolbar.
  2. Click the Custom tab.
    If there are no custom visuals available, then you can add a custom visual by clicking the Add a custom visual Add a custom visual icon on the Custom tab.
  3. From the Custom visuals pane, select the FusionCharts Pareto visualization.
  4. Use the Customer Analysis sample data source from Team content > Samples > By industry > Insurance > Data.
  5. Create the FusionCharts Pareto visualization by dragging the following data items from the Customer Analysis sample data source in the Sources pane Data icon:
    • From the Customer Analysis table, drag State onto the Categories field.
    • From the Customer Analysis table, drag Customer Lifetime Value onto the Values field.

    This sample FusionCharts Pareto visualization displays data from a fictional insurance company.

    FusionCharts Pareto visualization