BCT Network Graph 14 | samples | Documentation

HTMLcopy

 
<button id="zoomInButton" onclick="zoomIn()">Zoom In</button>
<button id="zoomOutButton" onclick="zoomOut()">Zoom Out</button>
<button id="moveButton" onclick="move()">Move</button>
<label>x: <input id="xInput" value="50"></label>
<label>y: <input id="yInput" value="-50"></label>
<button id="fitButton" onclick="fit()">Fit to Container</button>
<div id="container"></div>

CSScopy

 
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
button {
    margin: 10px 0 0 10px;
}
label {
    display: inline-block;
    margin: 10px 0 0 10px;
}
input {
    width: 30px;
}
#fitButton {
    position: absolute;
    right: 10px;
}
#container {
    position: absolute;
    width: 100%;
    top: 35px;
    bottom: 0;
}

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
​
    // create data
    var data = {
      nodes: [
        {id: "Richard"},
        {id: "Larry"},
        {id: "Marta"},
        {id: "Jane"},
        {id: "Norma"},
        {id: "Frank"},
        {id: "Brett"},
        {id: "Tommy"}
      ],
      edges: [
        {from: "Richard", to: "Larry"},
        {from: "Richard", to: "Marta"},
        {from: "Larry",   to: "Marta"},
        {from: "Marta",   to: "Jane"},
        {from: "Jane",    to: "Norma"},
        {from: "Jane",    to: "Frank"},
        {from: "Jane",    to: "Brett"},
        {from: "Brett",   to: "Frank"}
      ]
    };
​
    // create a chart and set the data
    chart = anychart.graph(data);
​
    // prevent the default behavior of the chart
    chart.interactivity().enabled(false);
​
    // set the chart title
    chart.title("Network Graph: Navigation (Methods)");
​
    // set the container id
    chart.container("container");
​
    // initiate drawing the chart
    chart.draw();
});
​
// zoom the chart in
function zoomIn() {
  chart.zoomIn();  
}
​
// zoom the chart out
function zoomOut() {
  chart.zoomOut();  
}
​
// move the chart by given values
function move() {
  var x = document.getElementById("xInput").value;
  var y = document.getElementById("yInput").value;
  chart.move(x, y);  
}
​
// fit the chart to the container
function fit() {
  chart.fit();  
}

Sample meta

AnyChart Documentation