How to graph data relations on ChartFactor community edition


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?


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.


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.


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
        .set('layout', 'none')
        .set('edgesInfo', edgesInfo)
        .set('nodesInfo', nodesInfo)

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.