I have a network that I create with vis.js, but it is too large in width to fit into the page container. The network works from left to right and contains steps for a specific process. When a person completes tasks, the server passes the new JSON entries to update the colors.
I cannot resize the container due to layout. When the network boots up, it makes the font incredibly small and unreadable. Is there a way to set the zoom level as an option to display only the current process step?
function draw() { test = null; // create a network var testContainer = document.getElementById('testing'); // create some nodes var width = testing.clientWidth; var nodes = [ {id: 1, x: 0, y: 1, label: 'Start', color: 'green', shape: 'circle'}, {id: 2, label: 'Step 2', shape: 'square'}, {id: 3, label: 'Step 3', shape: 'square'}, {id: 4, label: 'Step 4', shape: 'square'}, {id: 5, label: 'Step 5', shape: 'square'}, {id: 6, label: 'Step 6', shape: 'square'}, {id: 7, label: 'Step 7', shape: 'square'}, {id: 8, label: 'Step 8', shape: 'square'}, {id: 9, label: 'Step 9', shape: 'square'}, {id: 10, label: 'Step 10', shape: 'square'}, {id: 11, label: 'Step 11', shape: 'square'}, {id: 12, x: width * 2, y: 1, label: 'Success!', shape: 'circle'} ]; // create some edges var edges = [ {from: 1, to: 2, style: 'arrow', color: 'red', width: 1, length: 200}, // individual length definition is possible {from: 2, to: 3, style: 'arrow', width: 1, length: 200}, {from: 3, to: 4, style: 'arrow', width: 1, length: 200}, {from: 4, to: 5, style: 'arrow', width: 1, length: 200}, {from: 5, to: 6, style: 'arrow', width: 1, length: 200}, {from: 6, to: 7, style: 'arrow', width: 1, length: 200}, {from: 7, to: 8, style: 'arrow', width: 1, length: 200}, {from: 8, to: 9, style: 'arrow', width: 1, length: 200}, {from: 9, to: 10, style: 'arrow', width: 1, length: 200}, {from: 10, to: 11, style: 'arrow', width: 1, length: 200}, {from: 11, to: 12, style: 'arrow', width: 1, length: 200} ]; var testData = { nodes: nodes, edges: edges }; var testOptions = { width: '100%' }; var test = new vis.Network(testContainer, testData, testOptions); }