// Data Source

    var graphSource = Sintium.graphSource({
        url: "/simple_graph_data.json",
        keys: {
            nodes: "nodes",
            edges: "edges"
        },
        columns: {
            nodeId: "name",
            sourceId: "sourcename",
            targetId: "targetname"
        }
    });
    
    // Graph

    var graph = Sintium.graph({
        domId: "graph",
        source: graphSource,
        brushOn: true,
        nodeColorByColumn: "cat",
        nodeShapeByColumn: "cat",
        arrowHeadFromColumn: "head",
        arrowTailFromColumn: "tail",
        arrowSize: 1,
        crossfilterUpdateRate: 500,
        toolTip: true,
        engineSelect: true,
        layoutEngine: "d3v4force",
        layoutEngineOptions: {
            collisionRadius: 50,
            gravityStrength: 0.05,
            initialCharge: -1000
        }
    });

    // Charts

    var rowChart = Sintium.rowChart({
        domId: 'rows',
        dataSource: graphSource.edgeSource(),
        keyColumn: "sourcename",
        elasticX: true,
        colorScheme: Sintium.colorScheme.SPECTRAL
    });

    var pieChart = Sintium.pieChart({
        domId: 'pie-chart',
        dataSource: graphSource.nodeSource(),
        keyColumn: "cat",
        legend: true,
        labels: false,
        colorScheme: Sintium.colorScheme.HIGHCHART_DEFAULTS,
        responsive: false
    });

    // Widget Grid

    var grid = Sintium.widgetGrid({
        domId: "widget-grid"
    });

    grid.addWidget(pieChart, {
        title: "Node Category",
        x: 8,
        width: 4,
        height: 4
    });

    grid.addWidget(graph, {
        title: "Test Graph",
        x: 0,
        y: 0,
        width: 8,
        height: 8
    });

    grid.addWidget(rowChart, {
        title: "Edges from Node",
        x: 8,
        y: 4,
        width: 4,
        height: 4
    });

<div id="widget-grid" style="width: 100%; height: 650px;"></div>
<div id="pie-chart"></div>
<div id="rows"></div>
<div id="graph"></div>