63 Replies Latest reply: Nov 3, 2017 2:08 PM by Ralf Becher RSS

    Visualization of Graph Data

    Ralf Becher

      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

        • Re: Visualization of Graph Data
          Ralf Becher

          Hi all,

           

          this is an overhauled version of the extension. I've changed the labeling and added nodes color control for better visualization.

           

          GraphDracula03.png

          - Ralf

          • Re: Visualization of Graph Data
            Ralf Becher

            Now I have developed another graph extension based on Sigma.js (www.sigmajs.org). This is a first version you can play with:

             

            SigmaGraphExtension.jpg

            The graph drawing is much faster now. However it is more complicated to get a useful graph layout. I'm still working on this.

             

            - Ralf

              • Re: Visualization of Graph Data
                T M

                Hi There Ralf. May I ask you for a favor, please? Would you mind listing the version of the Neo4J software you are using to get your SigmaGraph App (2/17/14) to function properly? I would really love to see this app in action.

                 

                For my part, I downloaded the zipped Cineast data, your QV SigmaGraph qvw and SigmaGraph.qar, the Neo4j Server (2.0.1) and the corresponding Neo4J JDBC Drivers. After trial and error (version compatibility errors), I set allow_store_upgrade=true in the neo4j.properties file and removed the '?' symbols from the queries in the QV Script to get the data to load without errors. Everything loaded - except for the Actor/Director list box. So, I am not able to view the graph. Any ideas? Have you tried your QV Sigma App with the newer Neo4J releases?

                 

                Thanks in advance, Tai.

                  • Re: Visualization of Graph Data
                    Ralf Becher

                    Hi Tai,

                     

                    indeed, the LOAD script part was developed with an older Neo4j version, I guess it was v1.7. I need to overhaul it a bit.. However, if you download the QVW file and install the extension you will not need to reload the data. You can just see how the SigmaGraph.qar extension will work.

                     

                    If you're really interested to use our JDBC Connector to retrieve data from Neo4j v2 we have to setup a test case. Just drop me a line: ralf.becher@tiq-solutions.de

                     

                    - Ralf

                • Re: Visualization of Graph Data

                  Dear Ralf,

                   

                  Apologies for my naivety but pl help me out. I want to know if the SigmaGraph.qar is an extension to QlikView that I can use for visualization in a new QlikView chart with a neo4J data. Or is it specific to this example that you have loaded. If so can you pl tell us how to do similar for the ones we wish to do.

                   

                  Sorry once again for the trouble and naivety.

                   

                  Regards,

                  Karthik

                    • Re: Visualization of Graph Data
                      Ralf Becher

                      Dear Karthik,

                       

                      yes, SigmaGraph.qar is an object extension you can use in QlikView, for free. You can adapt the example to your data. That means you have to set the extension dimensions and measures to your fields in the properties dialog.

                       

                      Regarding Neo4j data, the example uses our product JDBC Connector to connect Neo4j graph database and to execute Cypher queries to retrieve data from nodes and edges of the graph.

                       

                      Regards,

                      Ralf

                    • Re: Visualization of Graph Data
                      chandini G

                      Hi Ralf,

                        can you help me how to create org chart in Qlikview.Actually i create org chart but orgchart saparate data based on dashes like chandini-janakiram saparate into chandini and janakiram but i want to saparate pipeline related data like chandini|janakiram into chandini and janakiram.

                      please help me...

                      regards,

                      chandini

                      • Re: Visualization of Graph Data

                        Hello,

                         

                        When I'm tring to import the parent node I'm getting this warning:

                        Capture.PNG.png

                         

                        Also, I cannot select text columns as parentnode/childnode...

                        That is why I selected the IDs (numbers).

                        I'm having 18 million lines to import (18 millions association between nodes )

                        There are about 2 million nodes

                         

                        Does that means that I reached the limits of the extension?

                        What are the limits of the extension?

                         

                        thank you!

                         

                        Alina GHERMAN

                          • Re: Visualization of Graph Data
                            Ralf Becher

                            Hi Alina,

                            a QlikView extension cannot handle this amount of data. The Graph Dracula v2 extension has a data window of 2000 rows (see PageHeight in Definition.xml). It would not make any sense to display more nodes and relations. However, it should also work with IDs as parent/child node.

                            - Ralf

                          • Re: Visualization of Graph Data
                            Vinay Shinde

                            Hi Ralf,

                             

                            Wondering, is there any user license and copyright related legal issues for using the Qlik extension objects?

                             

                            Thanks,

                              • Re: Visualization of Graph Data
                                Ralf Becher

                                Hi Vinay,

                                 

                                I guess not. The website graphdracula.net says:

                                 

                                "The code is released under the MIT license, so commercial use is not a problem."

                                 

                                The extensions I created and published here (and on GitHub) are free of use as long as there is no special license file stating anything else.

                                 

                                - Ralf

                                  • Re: Visualization of Graph Data
                                    Pedro Lopes

                                    Hi Ralf,

                                     

                                     

                                    I need help with my extension cloudmade. Sorry to response in this msg, but i can't send a private msg for you.

                                     

                                     

                                    So, my question is when drag and drop a cloudmade extension in a qv screen and select all var (lat,log, Measurement and API Key (aac19a54d98c7bbc44380c80c9bdf99d), i don't have the image of map but all the markers is in there.

                                     

                                     

                                    see de image:

                                     

                                    What kind of problems i have here?

                                    It's about a cloudmade API?

                                     

                                    Thanks in advance.

                                     

                                    Best Regards,

                                     

                                    Pedro Lopes

                                      • Re: Visualization of Graph Data
                                        Ralf Becher

                                        Hi Pedro,

                                         

                                        this API doesn't work anymore. You should switch to Leaflet or OpenLayers. I started to work on a new and similar extension implementing OpenLayers on top of OpenStreetMap but it's far away from being done. Do not have much spare time yet to finish..

                                         

                                        - Ralf

                                  • Re: Visualization of Graph Data

                                    Hi Ralf, im using the Graph Dracula V2 extension and i would like to change the relation label font size. Is that possible?

                                    Thank you!

                                      • Re: Visualization of Graph Data
                                        Ralf Becher

                                        Hi Gabriel,

                                         

                                        you can change font-size in property label-style in script.js line 143:

                                         

                                        "label-style": { "font-size": 12 }

                                         

                                        - Ralf

                                          • Re: Visualization of Graph Data

                                            Thank you very much! That's exactly what I needed.

                                            • Re: Visualization of Graph Data

                                              Is there a way to change label colours ?

                                              I'v tried to change it via CSS,  but i cant do it.

                                               

                                              Any help ?

                                                • Re: Visualization of Graph Data
                                                  Ralf Becher

                                                  Hi Telmo,

                                                   

                                                  since this is SVG you need to use the "fill" attribute like in this example:

                                                   

                                                  g.addEdge(row[0].text, row[1].text, {

                                                      directed: true,

                                                      label: relLabel ? row[4].text.replace("\\n", "\n") : '',

                                                      "stroke": edgeColor ? row[9].text : '#aaaaaa',

                                                      "label-style": { "font-size": 12, "fill": "blue" }

                                                  });

                                                   

                                                  Dracul.PNG

                                                   

                                                  - Ralf

                                                    • Re: Visualization of Graph Data

                                                      It works with edges. Thanks.

                                                      But i'm having dificulties put it to work on PARENT and CHILD nodes. Any clue ?

                                                       

                                                      nodes.push(g.addNode(row[0].text, {

                                                                                  label: parentLabel ? row[2].text.replace("\\n", "\n") : null,

                                                                                  size: parentSize ? row[5].data : 30,

                                                                                  tooltip: parentTooltip ? row[10].text.replace("\\n", "\r\n") : null,

                                                                                  stroke: (parentColor) ? row[7].text : 'rgb(100,100,100)',

                                                                                  fill: (parentColor) ? row[7].text : 'rgb(100,100,100)',

                                                                                  column: 0,

                                                                                  "label-style": { "font-size": 12, "fill": "green" }

                                                                              }));

                                                       

                                                      It look like something is changing label-style or some kind o attribute at draw runtime.

                                                        • Re: Visualization of Graph Data
                                                          Ralf Becher

                                                          You can create a node render function. Within this you can change anything for the node's ellipse and text:

                                                           

                                                          var render = function(r, n) {

                                                              var set = r.set().

                                                                  push(r.ellipse(n.point[0], n.point[1], n.size * 1.5, n.size).attr({fill: n.fill, stroke: n.stroke, "stroke-width": 2})).

                                                                  push(r.text(n.point[0], n.point[1] + n.size * 1.5, n.label || n.id).attr(n["label-style"]));

                                                              return set;

                                                          };

                                                           

                                                          for (var i = 0, k = _this.Data.Rows.length; i < k; i++) {

                                                              var row = _this.Data.Rows[i];

                                                              if (row[1].value || false) {

                                                                  g.addNode(row[1].text, {

                                                                      label: childLabel ? row[3].text.replace("\\n", "\n") : null,

                                                                      size: childSize ? row[6].data : 30,

                                                                      tooltip: childTooltip ? row[11].text.replace("\\n", "\r\n") : null,

                                                                      stroke: (childColor) ? row[8].text : 'rgb(100,100,100)',

                                                                      fill: (childColor) ? row[8].text : 'rgb(100,100,100)',

                                                                      "label-style": { "font-size": 9, "fill": (childColor) ? row[8].text : 'rgb(100,100,100)' },

                                                                      render: render,

                                                                      column: 1

                                                                  });

                                                              }

                                                           

                                                              if (row[0].value || false) {

                                                                  g.addNode(row[0].text, {

                                                                      label: parentLabel ? row[2].text.replace("\\n", "\n") : null,

                                                                      size: parentSize ? row[5].data : 30,

                                                                      tooltip: parentTooltip ? row[10].text.replace("\\n", "\r\n") : null,

                                                                      stroke: (parentColor) ? row[7].text : 'rgb(100,100,100)',

                                                                      fill: (parentColor) ? row[7].text : 'rgb(100,100,100)',

                                                                      "label-style": { "font-size": 9, "fill": (parentColor) ? row[7].text : 'rgb(100,100,100)' },

                                                                      render: render,

                                                                      column: 0

                                                                  });

                                                              }

                                                           

                                                              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") : '',

                                                                      stroke: edgeColor ? row[9].text : '#aaaaaa',

                                                                      "label-style": { "font-size": 9, "fill": edgeColor ? row[9].text : '#aaaaaa' }

                                                                  });

                                                               

                                                              }

                                                          };

                                                           

                                                          Dracul2.PNG

                                                          Nice feature indeed.. Will add this to the exentsion.

                                                • Re: Visualization of Graph Data
                                                  Vishal Jada

                                                  Hi All,

                                                   

                                                  I'm very interested in visualizing network data. So this extension has provided the 1st steps in doing that - Thanks Ralf for that. I'm curious if there is way to adjust the nodes in such a that it uses the entire chart area. In the below screenshot you will notice all the whitespace. If the extensions is able to use the whitespace then the network as a whole is more readable. Can you let me know if such a functionality already exists in this extension? if no how can i make it available.

                                                   

                                                  Thanks
                                                  V

                                                    • Re: Visualization of Graph Data
                                                      Ralf Becher

                                                      Hi V,

                                                       

                                                      I guess this issue is related to the two existing unconnected nodes that fill the upper left space. Usually it uses a filled circle / ellipse inside the available space (see first 3 screenshots in this thread). Could be possible to tweak around inside the Graph Dracula lib but this would be a profesional service I could offer..

                                                       

                                                      - Ralf

                                                    • Re: Visualization of Graph Data
                                                      Peter Kearney

                                                      Hi Ralf

                                                       

                                                      Thanks for the post, its been very helpfull. Is there any way that we could show the strength of the connections, for example the varying the size of the tooltips based on the number of conections?

                                                       

                                                      Thanks

                                                       

                                                      Peter

                                                        • Re: Visualization of Graph Data
                                                          Ralf Becher

                                                          Hi Peter,

                                                           

                                                          could be possible. But it's part of a customizing with professional services.. For a real project I would choose the visualization library first related to the requirements and the given features. In the meantime I've build graph visualizations also with d3.js, sigma.js, graphviz and vis.js. Every lib has its strengths and weaks.

                                                           

                                                          - Ralf

                                                        • Re: Visualization of Graph Data
                                                          Karl Pover

                                                          Hi Ralph,

                                                          Is there any way to select multiple nodes so that I can focus on a certain cluster?

                                                           

                                                          Thanks, Karl

                                                            • Re: Visualization of Graph Data
                                                              Ralf Becher

                                                              Hi Karl,

                                                               

                                                              there is but probably not the way you need it. My recent work is focussing more on the vis.js network chart where things are more easy to implement. But it's still complex and also data related. To make it right, I suggest a customizing or project work.

                                                               

                                                              - Ralf

                                                                • Re: Visualization of Graph Data
                                                                  Karl Pover

                                                                  That would be a great addition.  For now I used both charts to analyze cross-selling between customers belonging to the same segment that is predefined in the database.  The sigma chart looks like it is the best option for that type of analysis.  The dracula chart looks like a great way to show how customers are grouped by their purchase behavior instead of by their predefined segmentation, but I know the user is going to want to be able to select those nodes that are clustered together.  We'll see what the user thinks.

                                                                   

                                                                  Great extensions, great job Ralf.

                                                                   

                                                                  Best, Karl

                                                                    • Re: Visualization of Graph Data
                                                                      Ralf Becher

                                                                      Could you send me a screenshot? Would like to see your use case and how you did it.

                                                                       

                                                                      With my new Sigma.js and Vis.js Qlik Sense extensions I'm running a different data model and JavaScript aggregations where I can process selection of connected 1st and 2nd level nodes. There are also graph algorithms I could use to combine strong connected nodes or else. There is a lot more we could do here but as I said it's very use case / data related. And a lot of work..

                                                                       

                                                                      - Ralf

                                                                        • Re: Visualization of Graph Data
                                                                          Winprins Tambunan

                                                                          Hi Ralf,

                                                                           

                                                                          Do you working graph data with Qlik Sense? Because i really need an example about this visualization, the extension and the data sample, do you have any? Thank you

                                                                           

                                                                          Regards

                                                                           

                                                                          Win

                                                                            • Re: Visualization of Graph Data
                                                                              Ralf Becher

                                                                              Hi Winprins,

                                                                               

                                                                              I have a few working examples and extensions for Qlik Sense, too. I showed some at conferences like Qonnections this year and several Neo4j meetups.

                                                                               

                                                                              However, this is all use case oriented and I do not have published these exapmles so far. To get a successful working implementation you need to work it out in a project context. That's why I do not post much examples anymore. Because I wouldn't find any sleep answering all questions and requests about..

                                                                               

                                                                              Just involve the right people into the project to make things work..

                                                                               

                                                                              Best,

                                                                              Ralf

                                                                    • Re: Visualization of Graph Data
                                                                      Peter Kearney

                                                                      Hi Ralf

                                                                       

                                                                      This questions relates to one of your other builds (Icon Graph).  What is it that I put in the Node Type prefixes that will allow me to change the style of the node?

                                                                       

                                                                      Thanks

                                                                       

                                                                      Peter

                                                                      • Re: Visualization of Graph Data
                                                                        priyanka passi

                                                                        Hi Ralf,

                                                                         

                                                                        Thanks for the wonderful extension!!!

                                                                         

                                                                        Just curious to know, Can we have multiple node in Dracula chart.

                                                                        Suppose I have 4 Level hierarchical data  Level1,Level2,Level3,Level4.

                                                                         

                                                                        so, If I click on Level1,my Parent Node will be Level1 and child would be Level2.

                                                                        If I further click on Level2, my Parent Node will be Level2 and child node would be Level3, and so on.

                                                                        Can I have level by level drill down of data.

                                                                         

                                                                        Thanks in Advance.

                                                                          • Re: Visualization of Graph Data
                                                                            Ralf Becher

                                                                            Hi Priyanka,

                                                                             

                                                                            this is not possible. A graph is not a hierarchy. Although, a hierarchy is a special graph ;-)

                                                                             

                                                                            At least for visualization you could concatenate load all relations into the adjacency list Node1->Node2:

                                                                             

                                                                            AdjList:
                                                                            Load Level1 as Node1, Level2 as Node2, ..;
                                                                            concatenate
                                                                            Load Level2 as Node1, Level3 as Node2, ..;
                                                                            concatenate
                                                                            Load Level3 as Node1, Level4 as Node2, ..;
                                                                            

                                                                             

                                                                            - Ralf

                                                                          • Re: Visualization of Graph Data
                                                                            Niharika P

                                                                            Hi,

                                                                            Is there any way that the chart remains in a same position? Actually I see that whenever I refresh the Dashboard, the position of the bubbles change

                                                                            • Re: Visualization of Graph Data
                                                                              Ashish Palkar

                                                                              Hi

                                                                               

                                                                              Do we have anything similar for Qlik Sense?

                                                                               

                                                                              Thanks for your help..