I'm trying to use Sigma.js. I'm really not a Javascript person but I can't get this to do even the most basic of things.
In the developer console I get the following -
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
Is that what is causing my problem or is there something wrong with my bit of HTML/ Javascript?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="Sigmas Graph Example">
<meta name="author" content="Dave">
<script type="text/javascript" src="sigma.min.js"></script>
</head>
<body>
<script>
function myFunction()
{
var sigRoot = document.getElementById('sig');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
label: 'Hello',
color: '#ff0000'
}).addNode('world',{
label: 'World !',
color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', myFunction, false);
} else {
window.onload = myFunction;
}
</script>
<div id="sig"></div>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Thanks
Yes, there are a few tricks to getting the sigma rendering canvas initialized.
A few things to note:
You add edges and nodes to the "graph" attribute of the sigma instance, not the instance itself.
You need to specify an x and y for each node.
Each node is a javascript object which should have and 'id', 'x', and 'y', and optionally 'color', and optionally other data associated with the node.
Similarly for edges, each edge should have an 'id', 'source', and 'target'
After adding edges and/or nodes, you need to call sigInst.refresh(), not draw()
There are myriad options you can set with an "options" object when creating the instance.
You need to set the size of the target div, or else you won't be able to see anything (at least on Chrome).
So, here is a working version based on your script above. You will also note in the docs there are other methods for bulk import of nodes and edges, such as graph.read().
<div id="sig" style="width: 800px; height: 600px;"></div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var settings = {
defaultNodeColor: '#ec5148',
defaulLabelColor: '#99f',
defaultEdgeColor: '#aaa',
edgeColor: "default",
labelSizeRatio: "1",
labelThreshold: 1,
};
var sigInst = new sigma({
container: 'sig',
settings: settings
});
sigInst.graph.addNode({
id: 'hello',
label: 'Hello',
color: '#ff0000',
size: 5,
x:0,
y:0
});
sigInst.graph.addNode({
id: 'world',
label: 'World !',
color: '#00ff00',
size: 10,
x:1,
y:1
});
sigInst.graph.addEdge({
id: "helloworld",
source: "hello",
target: "world",
});
sigInst.refresh();
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', myFunction, false);
} else {
window.onload = myFunction;
}
</script>
Hope that helps.
Related
This is my problem:
I was playing with ECharts JavaScript library, I wanted to retrieve the image data (I know there is a save as image toolbox). When I try to access the function getDataUrl, or getConnectedDataUrl, I get the following error:
"myChart.getDataUrl is not a function"
But when I try to do the same on the browser (or Firebug) console, I get the info I want. When I call get_data() on the console also get the error I mention before. I'm confused.
What am I doing wrong?
There is the example code:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button type="button" onclick="get_data()">holi</button>
<div id="main" style="width:400px;height:300px;"></div>
<script src="echarts.min.js"></script>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'Test'
},
tooltip: {},
legend: {
data:['Cosas']
},
xAxis: {
data: ["asdf","qwerty","lol"]
},
yAxis: {},
series: [{
name: 'Cosas',
type: 'bar',
data: [1, 3, 5]
}],
toolbox: {
show : true,
feature : {
mark : {show: false},
saveAsImage : {show: true, title: "save"}
}
}
};
// use configuration item and data specified to show chart
myChart.setOption(option);
function get_data(){
return myChart.getConnectedDataUrl();
};
</script>
</body>
</html>
You just misspelled the function names. They are called getDataURL() and getConnectedDataURL() (with uppercase URL).
I'm simply trying to generate a chart using RGraph so that I can begin using SQL to manipulate the graph. However, the issue i'm having is that it isn't showing the basic graph at all. Anyone know where i'm going wrong here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Charts</title>
<script src="JAVASCRIPT/RGraph.common.core.js"></script>
<script src="JAVASCRIPT/RGraph.bar.js"></script>
</head>
<body>
<canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
<script>
window.onload = function ()
{
var bar = new RGraph.Bar({
id:'cvs1',
data: [4,5,3,8,4,9,6,5,3],
options: {
backgroundGridDashed: true,
labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
title: 'A dashed background grid',
strokestyle: 'rgba(0,0,0,0)',
textAccessible: true
}
}).draw();
};
</script>
</body>
</html>
Browser Error
Uncaught TypeError: Cannot read property 'getContext' of null
RGraph.Bar # RGraph.bar.js:28
window.onload # Charts.php:17
I tested your code. Nothing wrong with it, but it seems to be very dependent on which version of RGraph you're using. Try downloading the latest version of RGraph and extracting the contents (or just the two files you need) under 'libraries' to your 'JAVASCRIPT' folder.
Here's some updated code (a few property names have changed since this was asked).
bar = new RGraph.Bar({
id:'cvs1',
data: [4,5,3,8,4,9,6,5,3],
options: {
backgroundGridDashed: true,
xaxisLabels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
title: 'A dashed background grid',
colorsStroke: 'transparent'
// textAccessible: true // Defaults to true anyway
}
}).draw();
I have code for a simple bar chart using c3.js:
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
url: 'data/output.csv'
type: 'bar'
}
});
</script>
</body>
</html>
The file output.csv looks like this:
A,B,C,D
25,50,75,100
And the graph ends up looking like this:
which is all of the data in one group.
What I'd want to do is producing the following, without hard coding the data, but rather, getting it from the CSV file like the first example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
onclick: function(e) { console.log(ylist[e.x]);a = this;}
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
</script>
</body>
</html>
which would give a graph that looks like this:
Here is a jFiddle link.
My main issue is not knowing if there is a way to split the CSV file into categories, since it seems like c3.js will always put a CSV file into a time series.
C3 uses the first line in your csv as a header line and then returns a set of objects like {A:25},{B:50} which C3 will find difficult/impossible to use in the way you'd like.
Instead parse the csv outside the chart using D3's parseRows function. Then prepend a row descriptor which C3 can use to know which bit of the file does what.
https://jsfiddle.net/bm57gye5/2/
// This is a separate bit of html which is explained below
<pre id="data">
A,B,C,D
25,50,75,100
</pre>
// Actual javascript
var unparsedData = d3.select("pre#data").text();
var data = d3.csv.parseRows( unparsedData );
data[0].splice (0,0,"Letter");
data[1].splice (0,0,"Data");
console.log ("data", data);
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
columns: data,
x: "Letter",
type: 'bar',
onclick: function(e) { console.log(ylist[e.x]);a = this;}
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
To access the csv from a url (in the jsfiddle I just reference the data as part of the html) to feed into csv.parseRows you'll need to use d3.text and a callback as so:
d3.text("data/output.csv", function(unparsedData)
{
var data = d3.csv.parseRows(unparsedData);
... parsing / c3 chart generation continues on here as above ...
}
I am trying to do simple operations with dojo datagrid before I move on to complicated ones. However, I am now stuck at saving to store. I am using the code in the browser and the players data in a .json file, for convenience, I put all in the source code for now.
When I refresh the browser, the data I just saved is not updated to the json file. Why is it so? And how do I fix it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
.dojoxGrid table { margin: 0; }
html, body { width: 100%; height: 100%; margin: 0; }
</style>
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
// our test data store for this example:
var store = new dojo.data.ItemFileWriteStore({
//url: 'players.json'
data: {
label: 'pId',
items: [{"Player":"Wayne Gretzky","Games":"1487","Points":"2857","PPG":"1.92"},
{"Player":"Mark Messier","Games":"1756","Points":"1887","PPG":"1.07"},
{"Player":"Gordie Howe","Games":"1767","Points":"1850","PPG":"1.04"},
{"Player":"Ron Francies","Games":"1731","Points":"1798","PPG":"1.03"},
{"Player":"Marcel Dionne","Games":"1348","Points":"1771","PPG":"1.31"},
{"Player":"Steve Yzerman","Games":"1514","Points":"1755","PPG":"1.16"},
{"Player":"Mario Lemieux","Games":"915","Points":"1723","PPG":"1.88"},
{"Player":"Joe Sakic","Games":"1378","Points":"1641","PPG":"1.19"},
{"Player":"Jaromir Jagr","Games":"1273","Points":"1599","PPG":"1.25"},
{"Player":"Phil Esposito","Games":"1282","Points":"1590","PPG":"1.24"}]}
});
// set the layout structure:
var layout = [{
field: 'Player',
name: 'Player',
width: '200px',
styles:"text-align:center;"
},
{
field: 'Games',
name: 'Games Played',
width: '50px',
styles:"text-align:center;"
},
{
field: 'Points',
name: 'Points',
width: '50px',
styles:"text-align:center;"
},
{
field: 'PPG',
name: 'Points Per Game',
width: '50px',
styles:"text-align:center;"
}];
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {
Player: '*'
},
store: store,
clientSort: true,
rowSelector: '20px',
structure: layout
},
document.createElement('div'));
// append the new grid to the div "gridContainer":
dojo.byId("gridContainer").appendChild(grid.domNode);
// Call startup, in order to render the grid:
grid.startup();
//dojo.forEach(grid.structure, function(itemData, index, list){
//itemData.editable = true;
//});
var btnAdd = new dijit.form.Button({
label: "Add",
onClick: function(){
grid.store.newItem({
Player: "Someone",
Games: "1000",
Points: "1000",
PPG: "1.0"
});
}
}, "btnAdd");
var btnRemove = new dijit.form.Button({
label: "Remove",
onClick: function(){
var items = grid.selection.getSelected();
if(items.length){
dojo.forEach(items, function(selectedItem){
if(selectedItem !== null){
grid.store.deleteItem(selectedItem);
}
});
}
}
}, "btnRemove");
var btnSave = new dijit.form.Button({
label: "Save",
onClick: function(){
grid.store.save({onComplete: saveDone, onError: saveFailed});
}
}, "btnSave");
});
function saveDone(){
alert("Done saving.");
}
function saveFailed(){
alert("Save failed.");
}
</script>
</head>
<body class=" tundra">
<button id="btnAdd" type="button"></button>
<button id="btnRemove" type="button"></button>
<button id="btnSave" type="button"></button>
<br />
<div id="gridContainer" style="width: 100%; height: 100%;"></div>
</body>
</html>
The source code is also here: http://jsfiddle.net/cDCWk/
You need to implement something server side to handle the .save() part of dojo.data.ItemFileWriteStore as explained here.
I have modified your source code, in order for it to be a bit easier to deal with: http://jsfiddle.net/kitsonk/cDCWk/1/
Also, personally, implementing something server-side for ItemFileWriteStore might be a bit silly when you can far more easily integrate the Grid with the dojox.data.JsonRestStore or the new dojo.store.JsonRest.
I want to simply be able to click a button and execute some ExtJS code for testing, but this ExtJS code gives me the error this.el is null. What do I have to do to get this code to work?
main.js:
Ext.onReady(function() {
var button = new Ext.Button('button-div', {
text: 'hello',
handler: function() {
alert('pressed');
}
});
viewport = new Ext.Viewport({
layout: 'border',
items: [ button ]
});
viewport.doLayout();
});
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext/ext-all-debug.js">
</script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
</body>
</html>
Working Code:
Thanks for the pointer #Mchl, it now works with this code:
Ext.onReady(function() {
var button = new Ext.Button({
text: "Click this",
handler: function() {
alert('pressed');
}
});
var regionContent = new Ext.Panel({
region: 'center',
padding:'10',
autoScroll: true,
items: [ button ]
});
viewport = new Ext.Viewport({
layout: 'border',
items: [ regionContent ]
});
viewport.doLayout();
});
You're using a layout: 'border' which makes your viewport use Ext.layout.BorderLayout. In the documentation for this layout you'll find this note:
Any container using the BorderLayout must have a child item with
region:'center'. The child item in the
center region will always be resized
to fill the remaining space not used
by the other regions in the layout.