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.
Related
I am trying to color each point on my scatterplot according to the continent it is on. I have my code below but I am unsure as to how I can reference the continent field for each entry, and then assign it to the color field in trace1.
I tried something such as below but no luck.
EDIT:: This has been answered -> Also, how can I pull from the github?
Here is my code below.
<!DOCTYPE html>
<html>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
<body>
<svg id="visualisation" width="1355" height="333"></svg>
<script src="https://cdn.plot.ly/plotly-2.11.1.min.js" charset="utf-8"></script>
<script>
d3.csv('https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/4_ThreeNum.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row)
{ return row[key]; });}
const asia = [];
const condition = unpack(rows, 'continent');
const j = 0;
for(let i = 0; i < condition.length;i++ ){
if(condition[i] === 'asia'){
asia[j] = condition[i];
j++;
}
}
console.log(asia[0]);
var trace1 = {
x:unpack(rows, 'lifeExp'), y: unpack(rows, 'gdpPercap'), z: unpack(rows, 'pop'),
mode: 'markers',
marker: {
size: 12,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5},
opacity: 0.8},
type: 'scatter3d'
};
var data = [trace1];
var layout = {
width: 1000,
height: 1000,
margin: {
l: 0,
r: 0,
b: 100,
t: 0
},
scene: {
xaxis: { title: asia[1] },
yaxis: { title: "Population" },
zaxis: { title: "GDP per cap" },
},
};
Plotly.newPlot('myDiv', data, layout);
});
</script>
</body>
</html>
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 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.
How can i get access to a dojox-chart and fetch it as a js-object?
In a normal dijit widget it works with registry.byId("id") but this doesnt work with a dojox-chart.
I've also tried it with dom.byId, but i need it as an object to call functions, not as a dom-node.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script>dojoConfig = {async: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
<script>
require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines", "dojox/charting/plot2d/Grid", "dojox/charting/themes/Claro", "dojo/ready"],
function(Chart, Default, Lines, Grid, theme, ready){
ready(function(){
var chart1 = new Chart("chartId");
chart1.setTheme(theme);
chart1.addPlot("default", {type: Lines});
chart1.addPlot("Grid", {type: "Grid"});
chart1.addAxis("x",{});
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Visits",[
{ x: 1, y: 200 },
{ x: 2, y: 185 },
{ x: 3, y: 100 },
{ x: 4, y: 110 },
{ x: 5, y: 130 },
{ x: 6, y: 70 },
{ x: 7, y: 30 },
{ x: 8, y: 200 }
]);
chart1.render();
});
});
require(["dojo/ready", "dijit/form/Button", "dojo/dom"], function(ready, Button, dom){
ready(function(){
var button = new Button({
label: "Change my label"
}, "buttonId");
});
});
function tryToAccess()
{
require(["dojo/ready", "dijit/registry", "dojo/dom"], function(ready, registry, dom){
ready(function(){
var button = registry.byId("buttonId");
console.log(button); /*returns an object*/
button.set("label","successfully changed!");
/*var chart = ????????????????; */
});
});
}
</script>
</head>
<body class="claro">
<button id="buttonId"></button>
<div id="chartId" style="height: 300px;"></div>
<!-- JUST 4 DEBUGGING -->
<button onClick="tryToAccess();">try to access</button>
</body>
</html>
dojox.charting.Chart is not a widget, try using dojox.charting.widget.Chart instead. I think registry.byId would work with that.
var chart1_widget = new Chart({}, "chartId");
var chart1 = chart1_widget.chart;
chart1.setTheme(theme);
...