How to graph data relations on ChartFactor community edition

#1

Hi folks, I need to represent data relations (people and resources with their designations). I have seen the Networks Charts live demos but I don’t find this module on the downloaded files. Is there a way to use these charts on the community edition?

#2

hi @bob I think you can take a look at the Graph Demo, the Graph chart is not so powerful as the Network Chart but can work for you and in the february release we will deliver a new visualization for the Community Edition called Sankey Diagram that can be very useful for that use case to.

#3

Hi @dario I started working with the Graph chart and I can control the styles of the nodes and edges. More specifically, I can control the size of nodes through a min and max value, and for edges I can control the width, curveness and opacity. However, where can I control the color of the nodes and links? Also, I don’t like the force animation, I think that is distractive. Can I provide a layout myself? Thanks.

#4

The size and color of the nodes and the color of the links are driven by the attribute “value” of the data related to them and you can provide a custom layout to the graph filling the attributes x and y of the nodes and setting the layout to none, for example, imagine that we go to create a Graph from static data:

let data = {
  nodes: [{
    label: 'jquery',
    y: -404.26147,
    x: -739.36383,
    id: 'jquery',
    value: 4.7252817
  }, ... {
    label: 'backbone',
    y: -862.7517,
    x: -134.2215,
    id: 'backbone',
    value: 6.1554675
  }],
  edges: [{
    source: 'jquery',
    target: 'jsdom',
    value: 10
  }, ... {
    source: 'jquery',
    target: 'xmlhttprequest',
    value: 1
  }]
};

var edgesInfo = {
        'width': 0.6,
        'curveness': 0.2,
        'opacity': 0.7
    };
    var nodesInfo = {
        'min': 0.1,
        'max': 60
    };

    var chart = cf
        .create()
        .graph('Graph')
        .element('chart')
        .set('layout', 'none')
        .set('edgesInfo', edgesInfo)
        .set('nodesInfo', nodesInfo)
        .data(data)
        .execute();

In previous example the node jquery go to be smaller and colored less “strong” that backbone and the link jquery -> jsdom go to be colored more “strong” than jquery -> xmlhttprequest. Let me know if this answers your question.