ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
132 lines (116 loc) • 4.02 kB
HTML
<html>
<head>
<title>ccNetViz example for downloading graph image</title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="./libs/jquery.min.js"></script>
<script src="./libs/json_prettyprint.js"></script>
<script type="text/javascript" src="js/spectrum.js"></script>
<script src="../lib/ccNetViz.js"></script>
</head>
<body>
<div class="canvas-container">
<h3 class="title">Downloading Graph Image</h3>
<canvas id="container"></canvas>
<div class="toolbox">
<div class="item">
<a id="down_img"> Download </a>
</div>
</div>
<div class="description">
Press the button below the graph if you want to dowload it as an image.
<br />
More detailed information please visit the
<a href="https://helikarlab.github.io/ccNetViz/#doc"
>documentation page</a
>.
</div>
</div>
<header id="logo">
<a href="https://helikarlab.github.io/ccNetViz/">
<img src="images/logo.svg" />
</a>
</header>
<script>
function init() {
$('#showGraph').click(showGraph);
$.ajax({ url: 'data/graph-10-3.json', dataType: 'json' }).done(
dataLoaded
);
}
function dataLoaded(d) {
data = d;
showGraph();
}
function showGraph() {
var startTime = new Date();
var styles = {
background: {
color: 'rgb(255, 255, 255)',
},
node: {
minSize: 8, //minimum size of node representation in pixels, default: 6
maxSize: 16, //maximum size of node representation in pixels, default: 16
color: 'rgb(255, 0, 0)', //node color (combined with node image), default: "rgb(255, 255, 255)"
texture: 'images/circle.png', //node image
label: {
hideSize: 16,
color: 'rgb(120, 0, 0)', //label color, default: "rgb(120, 120, 120)"
},
},
edge: {
width: 2, //edge width in pixels, default: 1
color: 'rgb(204, 204, 204)',
arrow: {
minSize: 6, //minimum size of arrow in pixels, default: 6
maxSize: 12, //maximum size of arrow, default: 12
aspect: 2, //aspect of arrow image, default: 1
texture: 'images/arrow.png', //arrow image
hideSize: 2, //minimum size of arrow to be displayed
},
type: 'line',
},
};
var conf = {
styles: styles,
};
$('#confel')
.empty()
.append($('<pre />').html(library.json.prettyPrint(conf)));
var el = document.getElementById('container');
// After drawing keep save to the changes.
el.getContext('webgl', { preserveDrawingBuffer: true });
var graph = new ccNetViz(el, conf);
graph.set(data.nodes, data.edges, 'force').then(() => {
graph.draw();
});
$('#nodesCnt').text(data.nodes.length);
$('#edgesCnt').text(data.edges.length);
$('#renderedIn').text(
Math.round((new Date().getTime() - startTime.getTime()) * 10) / 10
);
}
/**
* The event handler for the link's onclick event.
*/
document.getElementById('down_img').addEventListener(
'click',
function() {
downloadCanvasToImage(this, 'container', 'graph.png');
},
false
);
/**
* Function that is called from the event handler for downloading the graph as an image
*/
function downloadCanvasToImage(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL('image/png');
link.download = filename;
window.location = document
.getElementById(canvasId)
.toDataURL('image/png');
}
$(init);
</script>
</body>
</html>