To visualize a node graph Sigma.js looks fantastic. I tried some examples but can't get my graph to display. I used example code and tried to plug in my .gexf file, but nothing displays. This is what I took from the Sigma.js example :
function init() {
// Instanciate sigma.js and customize rendering :
var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
defaultLabelColor: '#fff',
defaultLabelSize: 14,
defaultLabelBGColor: '#fff',
defaultLabelHoverColor: '#000',
labelThreshold: 6,
defaultEdgeType: 'curve'
}).graphProperties({
minNodeSize: 0.5,
maxNodeSize: 5,
minEdgeSize: 1,
maxEdgeSize: 1
}).mouseProperties({
maxRatio: 32
});
// Parse a GEXF encoded file to fill the graph
// (requires "sigma.parseGexf.js" to be included)
sigInst.parseGexf('donornet.gexf');
// Draw the graph :
sigInst.draw();
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
} else {
window.onload = init;
}
I replaced the .gexf file with my own donornet.gexf file and saved it as donornet.js. I then used code from this example (from Max De Marzi), which I replaced with my donornet.js file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Donornet and Sigma.js Example</title>
<script type="text/javascript" src="sigma.min.js"></script>
<script type="text/javascript" src="sigma.parseGexf.js"></script>
<script type="text/javascript" src="sigma.forceatlas2.js"></script>
<link type="text/css" rel="stylesheet" href="neo_sigma.css"/>
</head>
<body>
<h1>Donornet and Sigma.js Example</h1>
<div class="buttons-container">
<button class="btn" id="stop-layout">Stop Layout</button>
<button class="btn" id="rescale-graph">Rescale Graph</button>
</div>
<div class="span12 sigma-parent" id="sigma-example-parent">
<div class="sigma-expand" id="sigma-example"></div>
</div>
<script type="text/javascript" src="donornet.js"></script>
</body>
</html>
All files are in the same folder. parseGexf.js is in the same folder as donornet.js and donornet.gexf.
You don't have to save .gexf file as a .js file. Just leave it as a gexf file and upload it into the script's folder. Remove the line with <script src="donornet.js">. Try to run again. If it doesn't work, also remove the buttons div. Check out the source on http://noduslabs.com/socialplayer/smmrussia/
Related
I downloaded an awesome JQuery scripts/plugin and I am trying to get the script incorporated into my project. I want to be able to share data or value from JQuery in the Head section of the HTML file to the Javascript in the Body of HTML file. I've tried different ways after reading up many threads and forums and stackoverflow questions but none seem to help me. I keep getting X function is not defined. Have a look at this sample code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="/socket.io/socket.io.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<title>Testing</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/vendor/raphael-min.js"></script>
<script src="/RGraph/libraries/RGraph.svg.common.core.js" ></script>
<script src="/RGraph/libraries/RGraph.svg.line.js" ></script>
<script src="/RGraph/demos/demos.js" ></script>
<script>
$(document).ready(function(){
var socket = io();
socket.on('sensor_values',function(msg){
line.update(msg[0].value); //<------- This function is defined in the Javascript below
});
});
</script>
</head>
<body>
<div style="width: 750px; height: 300px" id="chart-container"></div>
<script>
iteration = 0;
data = [];
labels = [
'','','','','','','','','','',
'','','','','','','','','',''
];
line = new RGraph.SVG.Line({
id: 'chart-container',
data: [data],
options: {
marginInner: 0,
title: 'GasBoss Demo Chart',
xaxisLabels: labels,
xaxisColor: '#aaa',
yaxis: false,
backgroundGridColor: '#eee',
backgroundGridVlines: false,
backgroundGridBorder: false,
colors: ['#00c','#c00'],
linewidth: 1,
tickmarksStyle: 'filledcircle'
}
}).draw();
function update (svalue) //<-------this is the function I am trying to call in the JQuery code above
{
if (iteration === 0) {
line.originalData[0] = RGraph.SVG.arrayPad([],20);
}
line.originalData[0].push(svalue);
line.originalData[0].shift();
line.properties.xaxisLabels.push(iteration + 1)
line.properties.xaxisLabels.shift();
RGraph.SVG.redraw();
iteration++;
}
</script>
</body>
</html>
When start typing the function name in the JQuery section, it pops up a context menu with the name of the function for me to select. That means to me that JQuery is able to see all the functions and variables from within Javascript code, but it still raises Update is not a function. Why? and how do you share or pass data between JQuery and Javascript as described above in their respective place within the HTML file.
I want to put multiple gauge charts in a div, but I'm not sure how to do this.
Here's index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>U.S. presidential vote, 1972-2016, by race</title>
<!-- Load c3.css -->
<link href="css/c3.min.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="js/c3.min.js"></script>
<script type="text/javascript">
var dataDir = "vote-by-race";
d3.csv(dataDir+"/white.csv").then(function(data){
data.forEach(function(d,i){
var chartDiv = document.createElement("div");
chartDiv.id = "chart"+i;
chartDiv.setAttribute("display","inline-block");
document.getElementById("charts-container").appendChild(chartDiv);
var chart = c3.generate({
data: {
json: d
},
type: "gauge",
bindto: '#'+chartDiv.id
});
});
});
</script>
</head>
<body>
<div id="charts-container"></div>
</body>
</html>
Here's the CSV I'm working with.
YEAR,DEMOCRAT,REPUBLICAN,OTHER
1972,32,66,2
1976,47,52,1
1980,35,56,9
1984,35,64,1
1988,40,59,1
1992,39,40,21
1996,43,46,11
2000,42,54,4
2004,41,58,1
2008,43,55,2
2012,39,59,2
2016,37,58,5
But when I open the HTML file in a browser, I see this.
How do I make a gauge chart for each row of data? I want each gauge chart (each year) to show the portions for Dems, GOP, and other.
I am trying to write a short code to capture the signature via a tablet screen on a webpage. However, I can't get the area up that captures that signature.
The code I am using, which I have borrowed from other places that do work is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Simon's Timesheet Signature Capture Test Page</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
<link href="/usr/share/javascript/jquery/jquery.signature.css" rel="stylesheet">
<style>
body > iframe { display: none; }
.kbw-signature { width: 400px; height: 200px; }
</style>
<!--[if IE]>
<script src="js/excanvas.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/usr/share/javascript/jquery/jquery.signature.js"></script>
<script>
$(function() {
$('#sig').signature();
$('#clear').click(function() {
$('#sig').signature('clear');
});
$('#json').click(function() {
alert($('#sig').signature('toJSON'));
});
$('#svg').click(function() {
alert($('#sig').signature('toSVG'));
});
});
</script>
</head>
<body>
<h1>jQuery UI Signature Basics v18.5.2018</h1>
<p>This page demonstrates the very basics of the
jQuery UI Signature plugin.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the documentation reference page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;"><button id="clear">Clear</button>
<button id="json">To JSON</button> <button id="svg">To SVG</button></p>
</body>
</html>
I suspect it has something to do with the links to jquery, unless somebody can see something else glaringly obvious. (I am quite new to this)
Is anyone able to put me in the right direction?
Thanks.
Try this ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Simon's Timesheet Signature Capture Test Page</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css"
rel="stylesheet">
<link href="../js/jquery.signature.css" rel="stylesheet">
<style>
body > iframe {
display: none;
}
.kbw-signature {
width: 400px;
height: 200px;
}
</style>
<!--[if IE]>
<script src="../js/excanvas.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="../js/jquery.signature.js"></script>
<script src="../js/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<h1>jQuery UI Signature Basics v18.5.2018</h1>
<p>This page demonstrates the very basics of the
jQuery UI Signature plugin.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the documentation reference page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;">
<button id="clear">Clear</button>
<button id="json">To JSON</button>
<button id="svg">To SVG</button>
</p>
<script>
$(document).ready(function () {
$('#sig').signature();
$('#clear').click(function () {
$('#sig').signature('clear');
});
$('#json').click(function () {
alert($('#sig').signature('toJSON'));
});
$('#svg').click(function () {
alert($('#sig').signature('toSVG'));
});
});
</script>
</body>
</html>
There's a couple of things. I've changed the googleapi call to https instead of http. This helps with browsers that are tetchy with mixed content.
The code for the signature is now also at the bottom, so this should make sure the #sig div is there before the code that attaches itself to it is. This is also helped by the document ready function.
Ignore my ../js/ for the signatures. That's just where I put it. See my comment above about viewing page source to see if the file is actually available.
I'm just starting out in Javascript, and I'm trying to put my scripts in a separate file. They work just fine when they're in the html file, but as soon as I move them to their own separate file it stops working.
Here's my html file:
<!DOCTYPE html>
<head>
<meta lang = "en">
<link rel="stylesheet" type="text/css" href="css/mainStyle.css">
<script src="js/script1.js"></script>
<title>Web Dev Practice</title>
</head>
<body>
<h1>First JavaScript Example</h1>
<button type="button" onclick="changeText()">ClickMe!</button>
<p id="demo">This is just a test.</p>
</br>
</br>
<h1>Second JavaScript Example</h1>
<img id="lightBulb" onclick="changeImage()" src="res/img/pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn it on or off.</p>
</body>
</html>
And here's my js file:
<script>
function changeText(){
var string_first = "This is just a test.";
var string_second = "Woah, it actually works!";
if(document.getElementById("demo").innerHTML == string_first){
document.getElementById("demo").innerHTML = string_second;
} else{
document.getElementById("demo").innerHTML = string_first;
}
}
<script>
function changeImage(){
var image = document.getElementById('lightBulb');
if(image.src.match("bulbon")){
image.src = "res/img/pic_bulboff.gif";
}
else{
image.src = "res/img/pic_bulbon.gif";
}
}
</script>
The <script> tags are html things, not javascript, so you don't need (and can't have) them in your external files. What browser are you using? Many have a built in console that can help you see what errors, if any, your page is throwing.
i want to use tinymce editor but my final html file must not contain any links to any sources or css files.
i mean there must not be any references to external resources, it should be embedded in one html
(all js files and css files)
performance is not important and the target browser is ie11 only.
i do not want any
<script src=".."> or
<link rel="stylesheet" type="css" href="..">
i want that
<script>
function tinymce..
</script>
same as style info also should be in this html without any reference to outside.
due to the limits of native browsers on java applictions (djbrowser), i can deploy one one file, i do not go
deeply into technical details of ie11 with dj.
is that possible? or any method? because when i copy paste tiny_mce.js directly into the html it fails. The reason may be dynamically created scripts which are made by document.write.
my test cases:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- DO NOT CHANGE TITE -->
<title>Editor</title>
<link rel="stylesheet" type="text/css" href="tiny_mce/themes/advanced/skins/default/ui.css">
<link rel="stylesheet" type="text/css" href="tiny_mce/themes/advanced/skins/default/content.css">
<style>
.mce-widget.mce-tooltip { display : none !important; }
</style>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/table/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/contextmenu/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/paste/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/themes/advanced/editor_template.js"></script>
<script type="text/javascript" src="tiny_mce/langs/en.js"></script>
<script type="text/javascript" src="tiny_mce/themes/advanced/langs/en.js"></script>
<script type="text/javascript">
function init() {
// Check that tinymce exists
if (typeof tinyMCE === 'undefined') {
alert("tinymce.js is missing");
return;
}
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "lists,style,linespace",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,listbox",
theme_advanced_buttons2 : "cut,copy,paste,|,outdent,indent,|,forecolor,backcolor",
theme_advanced_toolbar_align : "left",
theme_advanced_toolbar_location : "top",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : "true"
});
}
// Sets content
function JH_setData(html) {
try {
var oEditor = tinyMCE.activeEditor;
oEditor.setContent(html);
//Check whether decoding needed
//oEditor.setContent(decodeURIComponent(html));
} catch(e) {
//alert('exception occured' + e.description + ' ' + e.message);
return 'FAIL';
}
return 'OK';
}
// Gets the content
function JH_getData() {
var oEditor = tinyMCE.activeEditor;
var val = oEditor.getContent();
return val;
}
function setContent() {
JH_setData('test content');
}
function getContent() {
var content = JH_getData();
alert('content:' + content);
}
</script>
</head>
<body onLoad="init();">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%;height:100%"></textarea>
<input type=button class="button_fu_class" style="position:absolute;top:30px;left:600px;width:80px;height:23px" value="SetContent" onClick="javascript:setContent();">
<input type=button class="button_fu_class" style="position:absolute;top:30px;left:700px;width:80px;height:23px" value="GetContent" onClick="javascript:getContent();">
</body>
</html>
works, but if i copy pase the tiny_mce.sc into a script block whole page fails.
if i replace
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
with
<script type="text/javascript">
//content of tiny_mce.js
(function(d){var a=/^\s*|\s*$.....
</script>
it fails