Cognos Analytics

Using Inkscape to annotate schematics for use in IBM Cognos Analytics

By MARCO MAAS posted Fri December 20, 2019 02:52 AM

  

Using Inkscape to annotate schematics for use in IBM Cognos Analytics

Schematics are a visualization type that is able to render a user-defined scalable vector graphic (SVG) document (rendered as an image) against a dataset. Schematics are non-geographical maps that you can use in IBM Cognos Analytics.

The SVG needs to be annotated with certain parameters to link the SVG elements and the dataset values. More features are supported, such as a highlighting regions and the ability to work with SVG views.

You can use a text editor to annotate the SVG. For more information, see https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0com.ibm.swg.ba.cognos.dg_custom_vis.doc/ca_developingschematics_intro.html.

Workflow using Inkscape 

Inkscape is an open source SVG editor for Microsoft Windows, Apple Mac OS X, and Linux. You can download it from https://inkscape.org

You can open and SVG file in a text editor. When you open an SVG file in Inkscape, you will see the graphical representation. You can copy and paste the SVG information from this blog in a text editor and save the file as .svg.

Open an SVG in Inkscape

Open the following SVG in Inkscape

<?xml version="1.0" encoding="UTF-8"?>
<svg height="40" width="100" xmlns="http://www.w3.org/2000/svg">
   <g>
      <circle cx="10" cy="10" fill="#cd5c5c" r="10"/>
      <circle cx="30" cy="10" fill="#fa8072" r="10"/>
      <circle cx="50" cy="10" fill="#e9967a" r="10"/>
      <circle cx="70" cy="10" fill="#ffa07a" r="10"/>
      <circle cx="90" cy="10" fill="#dc143c" r="10"/>
   </g>
   <g>
      <circle cx="70" cy="30" fill="#adff2f" r="10"/>
      <circle cx="10" cy="30" fill="#ff0000" r="10"/>
      <circle cx="30" cy="30" fill="#b22222" r="10"/>
      <circle cx="50" cy="30" fill="#8b0000" r="10"/>
   </g>
</svg>

Explanation SVG elements:

  • circle cx = x position circle
  • circle cy = y position circle
  • r = radius circle

Inkscape displays the following:

 

Grouped circle annotation

In this example you will add two sets of grouped circles.

You will add title and desc attributes. The title and desc attributes are used to show a title and a mouse over description when you use a the svg in a schematic in IBM Cognos Analytics.

Schematics support Views that are defined in the SVG. Views are conceptually different than layers.

A layer is created when data is mapped to either the Region > Locations or Points > Locations slots. You can toggle layers on or off, which shows or hides the results of the data mapping.

When you author an SVG, you can create views. Views define groups of SVG elements where these elements are logically related to each other. For example, if you create a floor plan of a hospital, then you define Views for each hospital ward in the SVG. These views allow the user of the schematic to show or hide the views that they are interested in.



To annotate the SVG in Inkscape, click Edit > XML Editor.


In the XML Editor, you will see two SVG elements of type svg:g. Select the first and type data-cv-view into the Attribute Name input box and view_0 into the Attribute value text area, then click Set. Scroll the list of attributes to view the newly added class.

Note: In your SVG files you will see different generated IDs.

Do the same by adding an attribute of title with a value of view_0 title.

Do the same by adding an attribute of desc with a value of view_0 desc.


Do the same process by adding an attribute of title with a value of view_0 title.

Repeat this for the next svg:g element. Use values view_1,  view_1 title, and view_1 desc respectively.

Individual circle annotation

The data-cv-key attributes are added for mapping the elements of the SVG to the data source.

Follow a similar process to annotate each svg:circle child under the two svg:g elements by using the following keys:

view_0:
data-cv-key="A1"
data-cv-key="A2"
data-cv-key="A3"
data-cv-key="A4"
data-cv-key="A5"

view_1:
data-cv-key="B1"
data-cv-key="B2"
data-cv-key="B3"
data-cv-key="B4" 


The result is an SVG as per the following (all changes highlighted):

 

<?xml version="1.0" encoding="UTF-8"?>
<svg height="40" width="100" xmlns="http://www.w3.org/2000/svg">
     <g data-cv-view="view_0" desc="view_0 desc" title="view_0 title">
          <circle data-cv-key="A1" cx="10" cy="10" fill="#cd5c5c" r="10"/>
          <circle data-cv-key="A2" cx="30" cy="10" fill="#fa8072" r="10"/>
          <circle data-cv-key="A3" cx="50" cy="10" fill="#e9967a" r="10"/>
          <circle data-cv-key="A4" cx="70" cy="10" fill="#ffa07a" r="10"/>
          <circle data-cv-key="A5" cx="90" cy="10" fill="#dc143c" r="10"/>
     </g>
     <g data-cv-view="view_1" desc="view_1 desc" title="view_1 title">
          <circle data-cv-key="B1" cx="70" cy="30" fill="#adff2f" r="10"/>
          <circle data-cv-key="B2" cx="10" cy="30" fill="#ff0000" r="10"/>
          <circle data-cv-key="B3" cx="30" cy="30" fill="#b22222" r="10"/>
          <circle data-cv-key="B4" cx="50" cy="30" fill="#8b0000" r="10"/>
     </g>
</svg>

You can now use this SVG with the following example dataset (save it as a CSV):

Ref

cat

color

yesNo

size

A1

CatC

72

No

157

A2

CatF

36

Yes

793

A3

CatE

13

No

660

A4

CatC

22

Yes

309

A5

CatF

49

No

691

B1

CatD

16

No

460

B2

CatB

33

Yes

628

B3

CatE

78

No

755

B4

CatE

74

No

211


Copy and paste the data in a spreadsheet application and save the file.

Adding a schematic to a report

To add the schematic to a report, see
https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.ug_cr_rptstd.doc/t_import_schematic_report.html.


In our case it would look like this:



Adding points and regions to a schematic

After you have added your schematic to a report, you can add point and region data to your schematic.

For more information, see https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.ug_cr_rptstd.doc/t_schematic_report_custompointsregions.html.

If you create a report and use the following data (make sure to create a data module of it first) then you can drag and drop the following data on the data slots to see the Regions layer working:

  1. Drag Ref onto the Locations.
  2. Drag yesNo onto the Location color field.

To see the Points layer working, do the following:

  1. Select the Points layer from the menu.
  2. Drag Ref onto the Locations.
  3. Drag Size onto the Point size.
  4. Drag Color onto the Point color.
  5. Open the properties and set the Point size calculation to Custom.
  6. Set the following sizes:
    1. Default size: 10
    2. Maximum size: 5
    3. Minimum size: 8
    4. Static zero value size: 5
    5. Scaling factor: 1

Result:



More schematics examples are available on IBM Accelerator Catalog:
https://community.ibm.com/accelerators/?context=analytics&type=Schematic



#LearnCognosAnalytics
#home
#dataset
#datasets
4 comments
115 views

Permalink

Comments

Fri December 18, 2020 05:13 AM

satyanarayana bhamidipati,

Did you already have a look a the tutorial for schematics?:
https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.dg_custom_vis.doc/ca_developingschematics_intro.html

Part of the tutorial is a topic on how the create a schematic and upload the package.

Fri December 18, 2020 02:34 AM

Thanks for the reply Could you please let me know how to create schematic package.

Wed December 16, 2020 12:06 PM

Hello satyanarayana bhamidipati,

Did the error happen in this step?

https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.ug_cr_rptstd.doc/t_import_schematic_report.html

If that is the case, make sure to upload a schematic package and not just a zip file with svg files in it.

Wed December 16, 2020 11:04 AM

 @MARCO MAAS

when we are trying to load *.SVG file we are getting below error 

  • Failed to upload custom visualization - invalid visualization format
  • vgs-gal-1003 invalid visualization format

Could you please let us know how to resolve the issue