I am trying vis.js and have been using the example which can be found here:
http://visjs.org/docs/network/
I used exact the same html-setup which is like this:
<html>
<head>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: nodes,
edges: edges
};
var options = {};
// initialize your network!
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
Javascript and Css are present.
When testing the file in Firefox or Chrome no Graphics nothing is happening. What is wrong here?
Changing
<script type="text/javascript" src="../../dist/vis.js"></script>
to
<script type="text/javascript" src="../../dist/vis.min.js"></script>
solved the problem.
Related
I am trying to animate a plotly chart using the UpdateMenu's animate method.
I can't get it to animate back to the original trace.
In the example below, I can change the chart to trace 2. But it does not go back to trace 1.
Here is a code example of my problem
//myPlot = document.getElementById('chart')
var trace1 = {
x: [1],
y: [1],
type: 'scatter',
mode: 'markers',
name: 'Trace 1',
}
var trace2 = {
x: [.5],
y: [.5],
type: 'scatter',
mode: 'markers',
name: 'Trace 2',
}
var frames = [{
name: 'trace 1',
data: [trace1]
},
{
name: 'trace 2',
data: [trace2]
}
]
console.log(frames)
var layout = {
yaxis: {
range: [0, 2]
},
xaxis: {
range: [0, 2]
},
updatemenus: [{
buttons: [{
method: 'animate',
args: [
['trace 1']
],
label: 'One'
},
{
method: 'animate',
args: [
['trace 2']
],
label: 'Two'
}
]
}]
}
Plotly.newPlot("chart", [trace1], layout).then(function() {
Plotly.addFrames('chart', frames);
});
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Media Bias</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="static/css/Index_Style.css">
-->
</head>
<div Id='chart'>
</div>
and a modified code example of their working sample.
In the working sample, you can change between the three traces using the drop down.
For some reason you can't put the trace in the list for data (inside the frames variable). You need to set the data x and y values manually.
//myPlot = document.getElementById('chart')
var trace1 = {
x: [1],
y: [1],
type: 'scatter',
mode: 'markers',
name: 'Trace 1',
}
var trace2 = {
x: [.5],
y: [.5],
type: 'scatter',
mode: 'markers',
name: 'Trace 2',
}
var frames = [{
name: 'trace 1',
data: [{
x: trace1.x,
y: trace1.y
}]
},
{
name: 'trace 2',
data: [{
x: trace2.x,
y: trace2.y
}]
}
]
//console.log(frames)
var layout = {
yaxis: {
range: [0, 2]
},
xaxis: {
range: [0, 2]
},
updatemenus: [{
buttons: [{
method: 'animate',
args: [
['trace 1']
],
label: 'One'
},
{
method: 'animate',
args: [
['trace 2']
],
label: 'Two'
}
]
}]
}
Plotly.newPlot("chart", [trace1], layout).then(function() {
Plotly.addFrames('chart', frames);
});
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Media Bias</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="static/css/Index_Style.css">
-->
</head>
<div Id='chart'>
</div>
How do I set a node's position in vis.js?
I want to initially position at least one node manually.
I know that a node has the options x and y. I set both, and also tried variations of layout options (randomSeed, improvedLayout, hierarchical), the node was never placed where I set it.
Here's the simple network I defined:
nodes = new vis.DataSet([
{id: 1, shape: 'circularImage', image: DIR + '1_circle', label:"1", x: 200, y: 100},
{id: 2, shape: 'circularImage', image: DIR + '2_circle', label:"2"},
{id: 3, shape: 'circularImage', image: DIR + '3_circle', label:"3"},
]);
edges = [
{id: "01-03", from: 1, to: 3, length: 300, label: '1 - 3'},
{id: "02-03", from: 2, to: 3},
];
var container = document.getElementById('graphcontainer');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
borderWidth: 4,
size: 30,
color: {
border: '#222222',
background: '#666666'
},
font:{
color:'#000000'
}
},
edges: {
color: 'lightgray'
},
//layout: {randomSeed:0}
//layout: {hierarchical: true}
layout: {
randomSeed: undefined,
improvedLayout:true,
hierarchical: {
enabled:false,
levelSeparation: 150,
direction: 'UD', // UD, DU, LR, RL
sortMethod: 'hubsize' // hubsize, directed
}
}
};
network = new vis.Network(container, data, options);
The node is placed, but not at the point I set (200,100), but at another position.
I haven't found an example for explicitly setting a node's position on the vis.js page. Could someone please provide one? Thanks!
You can indeed set a fixed position for a node by setting its x and y properties, and yes, this feature works and is not broken.
The x and y position of a node does not mean a position in pixels on the screen, but is a fixed position in the Networks coordinate system. When you move and zoom in the Network, the fixed items will move and zoom too, but they will always keep the same position relative to each other. It's like your home town has a fixed location (long, lat) on earth, but you can still zoom and move your town in Google Maps.
EDIT: To achieve what you want, you can fix zooming and moving, and adjust the viewport such that it matches the pixels of the HTML canvas, here is a demo:
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'x=200, y=200', x: 200, y: 200},
{id: 2, label: 'node 2', x: 0, y: 0},
{id: 3, label: 'node 3', x: 0, y: 400},
{id: 4, label: 'node 4', x: 400, y: 400},
{id: 5, label: 'node 5', x: 400, y: 0}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2, label: 'to x=0, y=0'},
{from: 1, to: 3, label: 'to x=0, y=400'},
{from: 1, to: 4, label: 'to x=400, y=400'},
{from: 1, to: 5, label: 'to x=400, y=0'}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var width = 400;
var height = 400;
var options = {
width: width + 'px',
height: height + 'px',
nodes: {
shape: 'dot'
},
edges: {
smooth: false
},
physics: false,
interaction: {
dragNodes: false,// do not allow dragging nodes
zoomView: false, // do not allow zooming
dragView: false // do not allow dragging
}
};
var network = new vis.Network(container, data, options);
// Set the coordinate system of Network such that it exactly
// matches the actual pixels of the HTML canvas on screen
// this must correspond with the width and height set for
// the networks container element.
network.moveTo({
position: {x: 0, y: 0},
offset: {x: -width/2, y: -height/2},
scale: 1,
})
#mynetwork {
border: 1px solid black;
background: white;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css" rel="stylesheet" type="text/css" />
<p>The following network has a fixed scale and position, such that the networks viewport exactly matches the pixels of the HTML canvas.</p>
<div id="mynetwork"></div>
Documentation says that nodes positioned by the layout algorithm
When using the hierarchical layout, either the x or y position is set
by the layout engine depending on the type of view
You can put they in to explicit points but I would not recommend this - it's not the correct way for the work with the graphs - better review your task - maybe you do not need graphs (or your do not need to put points in to exactly position).
Anyway - if you really want to put in to some position then you need to use random layout with the fixed option set to true or physic option set to false
var DIR = 'http://cupofting.com/wp-content/uploads/2013/10/';
nodes = new vis.DataSet([
{id: 1, shape: 'circularImage', image: DIR + '1-circle.jpg', label:"1", x:0, y:0},
{id: 2, shape: 'circularImage', image: DIR + '2-circle.jpg', label:"2", x:100, y:0},
{id: 3, shape: 'circularImage', image: DIR + '3-circle.jpg', label:"3", x:0, y:100},
]);
edges = [
{id: "01-03", from: 1, to: 3, length: 300, label: '1 - 3'},
{id: "02-03", from: 2, to: 3},
];
var container = document.getElementById('graphcontainer');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics:{
stabilization: true,
},
nodes: {
borderWidth: 4,
size: 10,
//fixed:true,
physics:false,
color: {
border: '#222222',
background: '#666666'
},
font:{
color:'#000000'
}
},
edges: {
color: 'lightgray'
},
layout: {randomSeed:0}
};
network = new vis.Network(container, data, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<div id="graphcontainer" style="border: 1px solid red; width:300px; height:300px; "> </div>
:) I just did this for the first time this morning. X = 0 and Y = 0 for a graph start centered, not at the top left of the canvas. There is a fixed attribute of the node that you can set to true for both x and y on a node with its x and y values set and have other nodes use physics in relation to it.
Look at the full options tab on page
http://visjs.org/docs/network/nodes.html#
and you'll see this piece:
fixed: {
x:false,
y:false
},
I'm using VIS to build a graph, but there is a problem. If I create simple hierarchical graph: with 3 vertices and 3 edges one edge is not visible (It is hiding behind two others and vertex).
Using smoothCurves with diagonalCross type is part of solution - graph looks fine, but after moving vertices. Directly after page is loaded edge is not visible. Is it possible to fix it?
Heres my code:
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="vis.js"></script>
<link rel="stylesheet" type="text/css" href="vis.css">
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1', level:0},
{id: 2, label: 'Node 2', level:1},
{id: 4, label: 'Node 4', level:2}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 4},
{from: 2, to: 4}
];
// create a network
var container = document.getElementById('mynetwork');
var data= {
nodes: nodes,
edges: edges,
};
var options = {
width: '900px',
height: '900px',
edges:
{
style: 'arrow'
},
dragNetwork: true,
navigation: true,
keyboard: true,
<!-- dragNodes: false, -->
hierarchicalLayout: {enabled:true}
};
var network = new vis.Network(container, data, options);
var type = "diagonalCross";
network.setOptions({smoothCurves:{type:type}});
</script>
</body>
</html>
It is important to use hierarchical view for me.
I think the HTML styled comment inside javascript prevents browser to understand your code. Simply remove the comment and refresh your browser. Like this:
var options = {
width: '900px',
height: '900px',
edges: {
style: 'arrow'
},
dragNetwork: true,
navigation: true,
keyboard: true,
// <!-- dragNodes: false, -->
hierarchicalLayout: {enabled:true}
};
Ok so I am trying to make a basic bar chart using highcharts and I am trying to use data that is contained in a QuickBase database, I have managed to pull the data from the server, I used an API call and have the data using this
http://pastebin.com/fJry1jA8
<!Doctype html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.src.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.src.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.src.js"></script>
<script>
var dbidApplication = "-EDITED OUT-";
var dbidTable = "-EDITED OUT-";
var apptoken = "-EDITED OUT-";
$.ajaxSetup({data: {apptoken: apptoken}});
var promise1 = $.get(dbidApplication , {
a: "dbpage",
pagename: "chart.html"
});
var promise2 = $.get(dbidTable, {
act: "API_GenResultsTable",
query: "{14.EX.'_FID_9}",
clist: "7.24.25.26.27.28.29.30.31.32.33.34.35.36.37",
jsa: 1,
options: "num-1",
});
$.when(promise1, promise2).then(function(chartArgs, dataArgs) {
var chart = chartArgs[0];
var markup = new Highcharts.Chart(chart, qdb_data);
console.log(markup);
});
</script>
<div id="container" style="width:100%; height:400px;"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
renderTo: 'container',
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>
I've looked up examples of what people have told me, but now I am confused between being told I need to parse,pluck,get,and a list of other things that I have no clue what to look into so I can actually use this data, but I am looking for an explanation of whats actually going on also (I really don't find it helpful to see a bunch of code where half of it I don't understand because I haven't learned to that yet, its rather depressing)
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I use google visualization api!
I know that All Google visualization constructs accept an instance of the Javascript object google.visualization.DataTable, which can be instantiated in one of two ways.
So I use the second way in which my data table in constructed with JSON of a certain structure and using specific attributes.
The problem is as you see I want to add a specific number of rows using for cycle and when I try to do this it gives me the mentioned above error
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script>
function drawVisualization()
{
var data = new google.visualization.DataTable
(
{
cols: [
{id: 'task', label: 'Task', type: 'string'},
{id: 'hours', label: 'Hours per Day', type: 'number'},
{id: 'E', label: 'Action', type: 'string'}
],
for (i=0;i<3;i++)
{
rows: [
{c:[{v: 'Work'}, {v: 5}, {v: '<input type="button" value="my button" onclick="alert(\'I was clicked!\');"/>'}]},
{c:[{v: 'Eat'}, {v: 2}]}
]
}
}
);
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="table"></div>
</body>
</html>
Your syntax is not valid. You will need to construct the object step-by-step, first the static part, then add the rest with the for loop:
var rawData = {
cols: [
{id: 'task', label: 'Task', type: 'string'},
{id: 'hours', label: 'Hours per Day', type: 'number'},
{id: 'E', label: 'Action', type: 'string'}
],
rows: []
};
for (var i = 0; i < 3; i++) {
rawData.rows.push({
c:[{v: 'Work'}, {v: 5}, {v: '<input type="button" value="my button" onclick="alert(\'I was clicked!\');"/>'}]
});
rawData.rows.push({
c:[{v: 'Eat'}, {v: 2}, {v: ''}]
});
}
var data = new google.visualization.DataTable(rawData);