Skip to main content
Announcements
Qlik Connect 2025: 3 days of full immersion in data, analytics, and AI. May 13-15 | Orlando, FL: Learn More
cancel
Showing results for 
Search instead for 
Did you mean: 
rbecher
MVP
MVP

Visualization of Graph Data

Hi all,

I started to develop an extension for graph visualization based on the Graph Dracula Library, using Raphael: http://www.graphdracula.net

This seems to be an interesting topic. First of all, what is the best data representation of graph data in a relational QlikView world? Second, there are a lot of limitations using those JavaScript libs. I've tried some before (D3.js etc.) but Dracula seems to have the simplest interface for my use case.

What is your opinion?

- Ralf

GraphDracula01.png

GraphDracula02.png

Astrato.io Head of R&D
88 Replies
rafael5958
Creator
Creator

Hi @rbecher  and all, how can I change the graphic to show lines in different positions when it goes to same circles ?? Like in the example:

rows.png

Thank you.

rbecher
MVP
MVP
Author

This is possible if you have the right layout implementation.

rbecher_0-1593354184293.png

 

Astrato.io Head of R&D
rafael5958
Creator
Creator

Thank you for your reply.

I see you are using qliksense. Im trying to do this with your extension based on the Graph Dracula Library.

rbecher
MVP
MVP
Author

Yep, it’s open source so go and build..

Astrato.io Head of R&D
rafael5958
Creator
Creator

Hi @rbecher .

Could you tell me what am i doing wrong?
I'm trying to define relation label color in an expression.

In Definition.xml Im doing:

 

<Dimension Label="Parentnode" Initial="Parent" TargetName="Dimension Name"  Width="700px" />
	<Dimension Label="Childnode" Initial="Child" TargetName="Dimension Name"  Width="600px" />
  <Measurement Label="Parent Label" Initial="Parent_Label"/>
  <Measurement Label="Child Label" Initial="Child_Label"/>
  <Measurement Label="Relation Label" Initial=""/>
  <Measurement Label="Parent Size" Initial=""/>
  <Measurement Label="Child Size" Initial=""/>
  <Measurement Label="Parent Color" Initial=""/>
  <Measurement Label="Child Color" Initial=""/>
  <Measurement Label="Edge Color" Initial=""/>
  <Measurement Label="Parent Tooltip" Initial=""/>
  <Measurement Label="Child Tooltip" Initial=""/>
  <Measurement Label="Relation Color" Initial=""/>
 
  
  
  <Initiate Name="Caption.Text" Value="Graph Dracula v2"/>
  <Initiate Name="Chart.Expression.0.0.Definition" Value="" />
  <Initiate Name="Chart.Expression.1.0.Definition" Value="" />
  <Initiate Name="Chart.Expression.2.0.Definition" Value="" />
  <Initiate Name="Chart.Expression.3.0.Definition" Value="10" />
  <Initiate Name="Chart.Expression.4.0.Definition" Value="10" />
  <Initiate Name="Chart.Expression.5.0.Definition" Value="color(1)" />
  <Initiate Name="Chart.Expression.6.0.Definition" Value="color(2)" />
  <Initiate Name="Chart.Expression.7.0.Definition" Value="rgb(200,200,200)" />
  <Initiate Name="Chart.Expression.8.0.Definition" Value="'Tooltip'" />
  <Initiate Name="Chart.Expression.9.0.Definition" Value="'Tooltip'" />
  <Initiate Name="Chart.Expression.10.0.Definition" Value="rgb(200,200,200)" />

 

In script.js:

 

 var parentLabel = _this.Data.HeaderRows[0][2].text || false,
                    childLabel = _this.Data.HeaderRows[0][3].text || false,
                    relLabel = _this.Data.HeaderRows[0][4].text || false,
                    parentSize = _this.Data.HeaderRows[0][5].text || false,
                    childSize = _this.Data.HeaderRows[0][6].text || false,
                    parentColor = _this.Data.HeaderRows[0][7].text || false,
                    childColor = _this.Data.HeaderRows[0][8].text || false,
                    edgeColor = _this.Data.HeaderRows[0][9].text || false,
                    parentTooltip = _this.Data.HeaderRows[0][10].text || false,
                    childTooltip = _this.Data.HeaderRows[0][11].text || false
					relcolor = _this.Data.HeaderRows[0][12].text || false
                ;
				.
				.
				.
				.
				 if ((row[0].value || false) && (row[1].value || false)) {
                        g.addEdge(row[0].text, row[1].text, {
                            directed: true,
                            label: relLabel ? row[4].text.replace("\\n", "\n") : '',
                            //callback: function (edge) { if (edge.label || false) edge.toBack();},
                            "stroke": edgeColor ? row[9].text : '#aaaaaa',
                            "label-style": { "font-size": 8, "fill": (relcolor) ? row[12].text : '#aaaaaa'}
							
                        });
                       
                    }

 

But Im getting a blank graphic.

 

Thank you.

rafael5958
Creator
Creator

Changeing the dracula_graffle.js I could handle two edge labels without overlapping.

 

 /* setting label */
		 if(x4<=x3) {
		  style && style.label
			  && (edge.label && edge.label.attr({x:(x1+x4)/2+15, y:(y1+y4)/2-15})
				  || (edge.label = selfRef.text((x1+x4)/2+15, (y1+y4)/2-15, style.label)
					.attr({fill: "#000", "font-size": style["font-size"] || "12px"})));
		  style && style.label && style["label-style"] && edge.label
			&& edge.label.attr(style["label-style"]);
		  style && style.callback && style.callback(edge);
		}  else{
			style && style.label
			  && (edge.label && edge.label.attr({x:(x1+x4)/2-15, y:(y1+y4)/2+15})
				  || (edge.label = selfRef.text((x1+x4)/2-15, (y1+y4)/2+15, style.label)
					.attr({fill: "#000", "font-size": style["font-size"] || "12px"})));
		  style && style.label && style["label-style"] && edge.label
			&& edge.label.attr(style["label-style"]);
		  style && style.callback && style.callback(edge);
		} 

 

 

imgan.png

rafael5958
Creator
Creator

How can I put a break line when parent/child labels are too long?

aniruddha_sinha
Contributor II
Contributor II

HI @rbecher 

Hope you are well. 

Could you please suggest if this works in Qlik sense version May2023 (patch 13) or above ?

Many Thanks

Ani

Vegar
MVP
MVP

@aniruddha_sinha 

This is/was a QlikView extension and not compatible with any version of Qlik Sense.

 

If you need to visualize a network of nodes in Qlik Sense, then maybe the visualization bundled Network chart can be interesting to have a look at.