I am a beginner in html and the joint.js library. I have this code and once I saved it as html on my laptop, it is suppose to draw 2 connected rectangles but nothing appears in the browser.
I downloaded many libraries and put them in the same folder that has the html page but nothing appear too.
What am I suppose to do?
Where can I put the libraries that I want to use in html code?
The libraries that I downloaded are:
backbone.js
core.js
geometry.js
joint.all.css
joint.all.js
joint.all.min.css
joint.all.min.js
joint.css
joint.dia.cell.js
joint.dia.element.js
joint.dia.graph.js
joint.dia.link.js
joint.dia.paper.js
joint.js
joint.min.css
joint.min.js
joint.shapes.devs.js
joint.shapes.devs.min.js
joint.shapes.erd.js
joint.shapes.erd.min.js
joint.shapes.fsa.js
joint.shapes.fsa.min.js
joint.shapes.org.js
joint.shapes.org.min.js
jquery.js
jquery.sortElements.js
lodash.js
raphael-min.js
raphael.js
vectorizer.js
<link rel="stylesheet" type="text/css" href="joint.css" />
<script type="text/javascript" src="joint.js" ></script>
<script type="text/javascript">
$(function() {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
})
</script>
<div id="myholder" >
</div>
Thanks to all of you ..
The program is working now after I changed the source of the libraries to be website URLs. If I use the once that I downloaded on my computer it does not work again :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src= "http://denknix.com/astro/lib/joint/www/build/joint.all.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jointjs.com/downloads/joint.css" />
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>
<script type="text/javascript">
$(function() {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
})
</script>
<title>Test</title>
</head>
<body>
<div id="myholder" >
</div>
</body></html>
Note that you don't need the following two files in your example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src= "http://denknix.com/astro/lib/joint/www/build/joint.all.min.js"></script>
This is because jQuery is already included in joint.js and the other joint.all.min.js is a very old version of JointJS (0.4).
You only need the other two files that you have correctly included:
<link rel="stylesheet" type="text/css" href="http://www.jointjs.com/downloads/joint.css" />
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>
The problem must lie in how you reference those files once download them to your computer.
Related
Hello I'm trying to execute Hello world application using JointJS library as given in: http://www.jointjs.com/tutorial#hello-world
I have downloaded joint.js(1.0.2) and joint.css files, copied the code given in HelloWorld tutorial in html file, and accessed it from the Chrome browser but it's not working as shown in the tutorial.
Console.error: Uncaught TypeError: this.addCell is not a function
html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>diagram</title>
<link rel="stylesheet" href="node_modules/joint/joint.min.css">
<body>
<div id="diaHolder">
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/lodash/lodash.min.js"></script>
<script src="node_modules/backbone/backbone-min.js"></script>
<script src="node_modules/joint/joint.min.js"></script>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#diaHolder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</body>
</html>
check versions of dependencies, especial Lodash. JointJS it's not compatible with version 4.x
jQuery: 2.2.4
Lodash: 3.10.1
Backbone: 1.3.3
Just throwing this out there but do you have a starting html tag?
I am going thorough the jointjs tutorial, in particular HelloWorld (http://www.jointjs.com/tutorial#hello-world). The basic example works fine except for the fact that the space in text: 'my box', results in the strange character. However, adding another small paper as suggested in the tutorial does not work, I do not get 2 working papers as indicated in the tutorial. The suggested addition is
var paperSmall = new joint.dia.Paper({
el: $('#myholder-small'),
width: 600,
height: 100,
model: graph,
gridSize: 1
});
paperSmall.scale(.5);
paperSmall.$el.css('pointer-events', 'none');
How to combine the addition with the main code? The main code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="backbone.js"></script>
<script src="joint.js"></script>
</head>
<body>
<div id="myholder"></div>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</body>
</html>
Somehow the tutorial does not specify that the second Paper should be associated with another div in HTML:
<div id="myholder-small"></div>
How I can set another color for the grid lines in chart?
I use his example:
<!doctype>
<head>
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
<link type="text/css" rel="stylesheet" href="css/extensions.css">
<script src="../vendor/d3.v3.js"></script>
<script src="../rickshaw.js"></script>
</head>
<body>
<!-- <div id="content">
<div id="chart"></div>
</div>
-->
<style>
#chart {
position: relative;
left: 40px;
}
#y_axis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}
#x_axis {
position: relative;
left: 40px;
height: 40px;
}
</style>
<div id="chart_container">
<div id="y_axis"></div>
<div id="chart"></div>
<div id="x_axis"></div>
</div>
<script>
var tv = 250;
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'line',
series: new Rickshaw.Series.FixedDuration([{ name: 'one',color: "#30c020"}], undefined, {
timeInterval: tv,
maxDataPoints: 100,
timeBase: new Date().getTime() / 1000
})
} );
///
var y_ticks = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: (function(d) { return d+"%";}) ,
element: document.getElementById('y_axis')
} );
var xmark = 0;
var format = function(n) {
var map = {
0: 'zero',
1: 'first',
2: 'second',
3: 'third',
4: 'fourth'
};
return '|';
}
var yformat = function(n) {
console.log('yformat0: '+n);
var nn = n+'%';
return nn;
}
var x_ticks = new Rickshaw.Graph.Axis.X( {
graph: graph,
orientation: 'bottom',
element: document.getElementById('x_axis'),
pixelsPerTick: 200,
tickFormat: format
} );
graph.render();
var i = 0;
var iv = setInterval( function() {
var data = { one: Math.floor(Math.random() * 40) + 120 };
graph.series.addData(data);
graph.render();
}, tv );
</script>
</body>
Richshaw provides some nice color palettes.
Look at palette.color() in the above code snippet. It will suggest nice color for every data series. if you want to know more palettes, you can find in its wiki page.
var palette = new Rickshaw.Color.Palette({scheme: 'munin'});
var graph = new Rickshaw.Graph({
element: your_dom_element,
renderer: "line",
interpolation: "linear",
series: [{
name: "series 1",
data: your_data_array,
scale: your_scale,
color: palette.color()
}, {
name: "series 2",
data: your_data_array,
scale: your_scale,
color: palette.color()
}]
});
For example I managed to set Y axis by using following CSS
.rickshaw_graph .y_ticks text {
fill: white;
}
You can also set stroke: stroke: white;
x axis is easier:
.rickshaw_graph .x_tick .title {
color: white;
}
I created this based on their tut http://jointjs.com/tutorial
<html>
<head>
<title></title>
</head>
<body>
<div id="myholder" >
</div>
<link rel="stylesheet" type="text/css" href="joint.css">
<script type="text/javascript" src="joint.js"></script>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
</script>
</body>
</html>
But I can't see anything and no error console. If I moved include at the end, I get error joint unknown.
Why ?
You forgot to add the created rectangles and the link to your graph.
Add this line at the end of your script.
graph.addCells([rect, rect2, link]);
Hope this helps.
I'm struggling to output a line chart from my CSV file, I get the graph but not data in the graph, could someone please tell me what is wrong with the code below?
The data in the CSV is formatted like so:
26-04-2012 09:10,0
26-04-2012 09:20,0
26-04-2012 09:30,0
26-04-2012 09:40,0
26-04-2012 09:50,0
26-04-2012 10:00,1
26-04-2012 10:10,1
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="../../js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var c = [];
var d = [];
$.get('test.csv', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
c.push(items[0]);
d.push(parseInt(items[1]));
});
});
var options = {
chart: {
renderTo: 'chart',
defaultSeriesType: 'line'
},
title: {
text: 'reading'
},
xAxis: {
title: {
text: 'Date Measurement'
},
categories: c
},
yAxis: {
title: {
text: 'reading'
}
},
series: [{
data: d
}]
};
var chart = new Highcharts.Chart(options);
});
</script>
</head>
<body>
<div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
The problem is that the $.get call will return immediately and as a result you will create the chart before the test.csv is downloaded (containing no data at all).
The callback function that you pass to $.get will run when the file is downloaded so placing the creation of the chart there would solve the problem.
The chart is loaded with no data because the csv file is loaded after the chart, because the get request takes time to receive a response. The following will load the data from your file and display the chart after the file loads.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="../../js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var c = [];
var d = [];
var options = {
chart: {
renderTo: 'chart',
defaultSeriesType: 'line'
},
title: {
text: 'reading'
},
xAxis: {
title: {
text: 'Date Measurement'
},
categories: c
},
yAxis: {
title: {
text: 'reading'
}
},
series: [{
data: d
}]
};
var jqxhr = $.get('test.csv', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
c.push(items[0]);
d.push(parseInt(items[1]));
})
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>