I have an app with angular and I need to use this library http://www.jointjs.com/, So I downloaded the joint.min.js and joint.min.css and placed their routes in the index.html but I don't know what to put in the app.js to inject it and I keep getting injection error from angular. Is it possible that this is not the way to do it? I googled a lot but didn't find any approach. I will appreciate any help, thanks in advance!
If you want to render a Jointjs diagram in your angular application, then that is pretty easy to do. In my case I encapsulated the Jointjs code inside an angular directive and passed in the Jointjs graph object. The (simplified) directive looks like this:
(function () {
'use strict';
var app = angular.module('app');
app.directive('jointDiagram', [function () {
var directive = {
link: link,
restrict: 'E',
scope: {
height: '=',
width: '=',
gridSize: '=',
graph: '=',
}
};
return directive;
function link(scope, element, attrs) {
var diagram = newDiagram(scope.height, scope.width, scope.gridSize, scope.graph, element[0];
//add event handlers to interact with the diagram
diagram.on('cell:pointerclick', function (cellView, evt, x, y) {
//your logic here e.g. select the element
});
diagram.on('blank:pointerclick', function (evt, x, y) {
// your logic here e.g. unselect the element by clicking on a blank part of the diagram
});
diagram.on('link:options', function (evt, cellView, x, y) {
// your logic here: e.g. select a link by its options tool
});
}
function newDiagram(height, width, gridSize, graph, targetElement) {
var paper = new joint.dia.Paper({
el: targetElement,
width: width,
height: height,
gridSize: gridSize,
model: graph,
});
return paper;
}
}]);
})();
If you need to interact with your model through the diagram, use the Jointjs event handlers and hook them up to functions on your scope in the directive (as shown in the code above).
To use this in your view:
<joint-diagram graph="vm.graph" width="800" height="600" grid-size="1" />
In my case I create the graph in the first case by using the Jointjs graph.fromJSON function from my controller (strictly speaking, this is in a data service component that is called from my controller) and then just add this to the scope.
function getDiagram() {
return datacontext.getDiagram($routeParams.diagramId).then(function (data) {
vm.graph.fromJSON(JSON.parse(diagramJson));
});
}
This approach works OK for adding and removing elements and links from the diagram and for dragging things around. Your controller code just works on the graph object and all the updates to the diagram rendering are handled by Jointjs.
function addCircle(x, y, label) {
var cell = new joint.shapes.basic.Circle({
position: { x: x, y: y },
size: { width: 100, height: 100 },
attrs: { text: { text: label } }
});
graph.addCell(cell);
return cell;
};
Jointjs is a great library, but it is based on Backbone.js for databinding. The only problem I have found is that it doesn't play particularly well with angular in cases where you want to edit diagram element properties (e.g. the contained text) using angular. For example, I have a properties pane (an angular view) that is used to edit the selected diagram element properties.
I made a hacky workaround for this that I am too ashamed to put on SO ;o) I'm still learning about angular/joint/backbone so hope to have a better approach by the time I finish my project. If I do, I'll post it here. Maybe someone more expert than me could already do better though - I'd be glad to see a better approach posted here.
Overall, this directive works as an approach, but it feels like a superficial integration between Angular and Jointjs. Essentially the directive creates an "island of jointjs" inside the angular application. I would like to find a more "angular native" way of doing this, but maybe that would require a re-write of Jointjs to use angular instead of backbone...
P.s. If you already have jquery in your application, you can get a version of joint that excludes jquery from the Jointjs download page:
http://www.jointjs.com/download
Found a great GitHub repo that tries to do just what your asking. If its not exactly what you wanted its still a great inspiration source!
Related
I am using the Dabeng Orgchart library, but I would like to customize the nodes, specifically creating a diamond instead of the squares they have in most examples. I have seen the createNode method, and I have found various CSS for creating a diamond but I can't figure out how to integrate it in dabeng org chart. What I want to do is display a diamond if some conditions are met, and the default square shapes if others are met. I have searched the web, but no example for changing the shape.
I am currently using the nodeTemplate attribute for the orgchart. Example:
var oc = $('#container').orgchart({
...
'nodeTemplate': orgTemplate,
...
});
In your orgtemplate function, data is whatever you have included in your orgchart data (in the example it would be name and title). You can stuff this object with other flags. For example, I have a chart in which I create new nodes and allow users to enter data into the node before committing it to the graph. I have a flag in my data object for data.isSaved to tell my template whether or not this node is saved or not. If it is saved, I have inline html checks (in AngularJS using ngIf's and the like, if you're familiar with AngularJS at all) to change the template based on the data.
In VanillaJS, you can just return pure HTML without the $compile and all that attached to pump in your own node template. You could actually do your check within the function for example:
function orgTemplate(data) {
if(data.isDiamond) {
return '<div class="diamond">...</div>';
} else {
return '<div class="square">...</div>';
}
}
I'm using AngularJS in my website so I define new scopes and use angular directives to make it more expandable. This is for reference for anyone else who stumbles upon this. My orgTemplate function is defined below.
function orgTemplate(data) {
var newScope = $scope.$new(true);
newScope.data = data;
return ( $compile('<div data-ng-include="\'.../template.html\'"></div>')(newScope));
}
Here's the orgChart Github as I'm sure you've browsed many times. If you look at the bottom you will see the nodeTemplate attribute definition I mention above. Hope this helps!
Side Note: I have had some trouble with styling when using custom templates, especially when defining different graph directions (i.e. 'l2r').
You can now customize your own node structure or shape with option "ndoeTemplate":
var nodeTemplate = function(data) {
return `
<span class="office">${data.office}</span>
<div class="title">${data.name}</div>
<div class="content">${data.title}</div>
`;
}
var oc = $('#chart-container').orgchart({
'data' : ds,
'nodeTemplate': nodeTemplate
});
Feel free to play around with this demo.
I would suggest you to use getorgchart instead it is highly customizable
http://www.getorgchart.com/Demos/Create-Your-Own-Theme-4
First, I am fairly unfamiliar with javascript and its library d3.js, but I am familiar with R. Creating dashboards using Shiny has been fun and easy (thanks to stackoverflow). Now I want to expand it by connect d3 elements to it.
I'm looking for information sources on how to actually bind javascript to Shiny (R dashboard) and explain what is actually going on.
Background:
I did the tutorial on js and jquery on w3schools and learned (a bit) about d3 using Scott Murray's book (Interactive Data visualization for the web). I hoped this would be enough to make me understand the examples and explanation concerning how to build custom input/output bindings on the Shiny website:
http://shiny.rstudio.com/articles/building-inputs.html
But unfortunately I don't and I can't seem to find any examples which are in minimal working code. Many examples on github are to complex for me to dissect, most probably because of my little experience with javascript. Here is an examples of custom input binding with javascript:
https://github.com/jcheng5/shiny-js-examples/tree/master/input
Here is an example of an input & output binding I try to unfold:
<script src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript">
(function(){
// Probably not idiomatic javascript.
this.countValue=0;
// BEGIN: FUNCTION
updateView = function(message) {
var svg = d3.select(".d3io").select("svg")
svg.append("text")
.transition()
.attr("x",message[0])
.attr("y",message[1])
.text(countValue)
.each("end",function(){
if(countValue<100) {
countValue+=1;
$(".d3io").trigger("change");
}
})
}
// END: FUNCTION
//BEGIN: OUTPUT BINDING
var d3OutputBinding = new Shiny.OutputBinding();
$.extend(d3OutputBinding, {
find: function(scope) {
return $(scope).find(".d3io");
},
renderError: function(el,error) {
console.log("Foe");
},
renderValue: function(el,data) {
updateView(data);
console.log("Friend");
}
});
Shiny.outputBindings.register(d3OutputBinding);
//END: OUTPUT BINDING
//BEGIN: INPUT BINDING
var d3InputBinding = new Shiny.InputBinding();
$.extend(d3InputBinding, {
find: function(scope) {
return $(scope).find(".d3io");
},
getValue: function(el) {
return countValue;
},
subscribe: function(el, callback) {
$(el).on("change.d3InputBinding", function(e) {
callback();
});
}
});
Shiny.inputBindings.register(d3InputBinding);
//END: OUTPUT BINDING
})()
</script>
Where "d3io" is a div element in the ui, updateView() is a function. Here is the ui:
#UI
library(shiny)
d3IO <- function(inputoutputID) {
div(id=inputoutputID,class=inputoutputID,tag("svg","")) #; eerst zat ; erbij, maar werkt blijkbaar ook zonder
}
# Define UI for shiny d3 chatter application
shinyUI(pageWithSidebar(
# Application title
headerPanel("D3 Javascript chatter",
"Demo of how to create D3 I/O and cumulative data transfer"),
sidebarPanel(
tags$p("This widget is a demonstration of how to wire shiny direct to javascript, without any input elements."),
tags$p("Each time a transition ends, the client asks the server for another packet of information, and adds it
to the existing set"),
tags$p("I can't claim this is likely to be idiomatic javascript, because I'm a novice, but it allows d3 apps
to do progressive rendering. In real use, a more complex request/response protocol will probably be
required. -AlexBBrown")
),
mainPanel(
includeHTML("d3widget.js"),
d3IO("d3io") #Creates div element that d3 selects
)
))
Here is the server file:
# SERVER
library(shiny)
# Define server logic required to respond to d3 requests
shinyServer(function(input, output) {
# Generate a plot of the requested variable against mpg and only
# include outliers if requested
output$d3io <- reactive(function() {
if (is.null(input$d3io)) {
0;
} else {
list(rnorm(1)*400+200,rnorm(1)*400+200);
}
})
})
Specific questions:
1) The server.r seems to get input called "d3io" (input$d3io) since this is not defined in ui.r, I reasoned it must come from the javascript file. Which element does it actually refer to?
2) I have trouble understanding the custom binding part:
var d3OutputBinding = new Shiny.OutputBinding();
$.extend(d3OutputBinding, {
find: function(scope) {
return $(scope).find(".d3io");
},
renderError: function(el,error) {
console.log("Foe");
},
renderValue: function(el,data) {
updateView(data);
console.log("Friend");
}
});
Shiny.outputBindings.register(d3OutputBinding);
My understanding is:
Create a new shiny outputbinding, first find the class .d3io (div element), if error then write to console "Foe" (is this special code?), if not error then renderValue using the function updateView using data (Where does it receive this value from?) and write to console "Friend". Finally register output.
Hope you guys can help! I'm creating a document with the steps on "The necessary steps to learn how to implement javascript into shiny when you don't know any javascript", I would love that!:)
Cheers,
Long
Hi Sweetbabyjesus (so fun to say). You had two questions:
1) The server.r seems to get input called "d3io" (input$d3io) since this is not defined in ui.r, I reasoned it must come from the javascript file. Which element does it actually refer to?
That phrase input$d3io has the following components:
input is a parameter passed into the function - it's a list that
stores the current values of all the widgets in the app.
$ is the member selector.
d3io refers to the content of the div element with that id
('d3IO("d3io")') in the mainPanel of the UI.
2) I have trouble understanding the custom binding part:
var d3OutputBinding = new Shiny.OutputBinding();
That's right, this creates an instance of Shiny.OutputBinding and assigns it to the variable d3OutputBinding.
$.extend(d3OutputBinding, {
find: function(scope) {
return $(scope).find(".d3io");
},
renderError: function(el,error) {
console.log("Foe");
},
renderValue: function(el,data) {
updateView(data);
console.log("Friend");
}
});
This code extends the behaviour of d3OutputBinding with three functions called find, renderError and renderValue. Those three functions are required for a Shiny.OutputBinding.
find is the key because it returns a list of elements that should be passed into the two render functions via their el parameter. Notice it's returning elements whose css class is "d3io" - that's the same div mentioned earlier.
Note that extend() is a function of jQuery javascript library, and the $ in this context is an alias for the jQuery object.
Shiny.outputBindings.register(d3OutputBinding);
Lets Shiny know that this newly configured object should be put to use now.
Cheers, Nick
I'm going to take a step back and assume you want the amazing results D3 is capable of, but aren't necessarily tied to D3. Essentially, I'll be answering this question:
What are the necessary steps to learn how to implement JavaScript into Shiny when you don't know any JavaScript?
While D3 is amazingly powerful, it's also notoriously difficult to master - even for many folks who are quite comfortable with JavaScript. While I love D3 and use it almost every day, I'd recommend against it in this case. Instead, there's library called Plotly, which uses D3 in the background, but is built specifically for the scientific community and data scientists, so it's very friendly to the R community.
They have a thorough tutorial for connecting to Shiny and even have a ggplot2 converter if you're already familiar with that syntax, as many in the R world are. Unless your needs are very unusual, Plotly will likely serve your needs just as well as writing directly in D3, with a much more friendly learning curve.
Are you familiar with the rCharts package? It can work pretty well with Shiny and most of the output options are based on D3 variants. Two examples.
Very busy with work, I haven't had the chance to post it. Note that this is a workaround using the customMessageHandler (and I'm not using custom input/output binding). Here goes:
Objective: Send data from data frame to create a D3JS tree using customMessageHandler.
Path: I've managed to send data in data.frame format to a d3js tree. After you click the actionbutton, it changes the data in the data frame to JSON format, then sends it to the js file which creates the tree. The data of the tree is hard-coded on "server.r".
Where's the code? On my github!
https://github.com/SweetBabyJesus/shiny-d3js-simple-binding
Original: I created a tree algorithm based on CHAID to create insights from large datasets. People can upload their csv to the dashboard which then spits out the d3js tree:) The code is somewhat lengthy, therefore I cut it down for you and created a minimal code example.
Hope you like it.
Cheers,
Long
Bit of a short question, but wondering why this is happening:
In the example posted below, there are two SVG elements, each containing a directive assigned to a element. The first directive doesn't use a template, and is the setup I currently use to assign actions to paths.
The second directive is what I was trying to do in order to clean up my code a bit, but it won't be drawn.
I googled a bit around, and read there is a difference between SVG & DOM nodes? But since both ng-repeat's are working, I'm a bit puzzled on what is going on.
Link to plunkr: http://plnkr.co/edit/cok6O58SOUyaGHG5Jtu5?p=preview
angular.module('app', []).controller("AppCtrl", function($scope) {
$scope.items = [1,2,3,4];
}).directive('svgPathNoReplace', function() {
return {
restrict: 'A',
scope: true,
link: function(scope, element, attrs) {
}
}
}).directive('svgPathReplace', function() {
return {
restrict: 'A',
replace: true,
template: '<path id="1" d="M 85.750001,0 C 38.393651,0 0,39.02444 0,87.15625 c 0,48.13181 38.393651,87.1875 85.750001,87.1875 C 133.10635,174.34375 171.5,135.28806 171.5,87.15625 171.5,39.02444 133.10635,0 85.750001,0 z m 0,1.5 C 132.28206,1.5 170,39.8217 170,87.15625 c 0,47.33455 -37.71794,85.6875 -84.249999,85.6875 C 39.217941,172.84375 1.5,134.4908 1.5,87.15625 1.5,39.8217 39.217941,1.5 85.750001,1.5 z" '+
'style="stroke:#000000;stroke-width:1px;"></path>'
}
});
The most current beta (1.3) allows another property on the directive called type where you can specify svg content now.
ie.
return {
restrict : 'AE',
type : 'svg',
template : '<path></path>'
link : function (..)
}
Your initial research was correct -- in AngularJS, templates are rendered as DOM nodes, not SVG nodes. This means the directive's template is rendering your <path> tag as a "dummy" non-standard HTML tag that does nothing.
In other words, although HTML normally recognizes path nodes as non-standard nodes, it's preconfigured to know how to handle them using SVG. But when HTML sees a non-standard DOM node rendered by the template (which in this example just happens to be named path), it doesn't recognize it and therefore does nothing. Think of it as trying to use <foo></foo>.
However, this doesn't mean the ng-repeat directive won't work on the custom DOM node, since it doesn't care what type of node (i.e., standard or custom) it is repeating.
Updated Plunker
The above example solves your problem by manually creating the HTML node using the directive's link function instead of its template key. The helper function creates the path node in a way that can be recognized by SVG, which eliminates the need to use a template.
My answer is inspired by this solution.
I'm trying to make a blurred background efect with angular on a div, something like the image above, for this i'm using blur.js and everything work fine with jquery but the real question is this posible with angularjs, and what is the best way?
I'm really newbie with angular
thanks in advance
here another example of using blurjs http://www.designedbyaturtle.co.uk/2013/blur-a-background-image/
SOLVED (with help of gtramontina):
you can download the code here demo-blurjs-angular
The result (with my images)
This demo contain a issue (that is really of blur.js) like Edd Turtle mention on his post
Important Note: This technique doesn’t work with local files and has to run through a server, likewise if the background is hosted on the Amazon S3 service you will need to enable cross-domain calls (CORS)..
I suggest you create a directive, restricted to attribute maybe, and have that applying your effect.
Something like this (not tested - and assuming you've included, in this order, jquery, blur.js, then angular;
angular.module('myApp', []).
directive('blurred', function () {
var directive = { restrict: 'A' };
directive.compile = function compile (tElement) {
// taken from blur.js homepage
tElement.blurjs({
source: 'body',
radius: 7,
overlay: 'rgba(255,255,255,0.4)'
});
};
return directive;
});
Then use it:
<p blurred>lorem ipsum</p>
The point with the order I mentioned above, is that if you include jquery before angular, then angular uses it to wrap its dom elements, otherwise it'll use jqlite.
You need to write a angularjs directive for blur.js. Here is an example of how to write a directive for a query plugin:
http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/
I am trying to embed a RaphaelJS paper into qooxdoo widget. RaphaelJS is a SVG drawing library for JavaScript, and it needs to bind to a HTML <div> prior to any drawing.
For that, I call new qx.ui.embed.Html("<div id='raphael'></div>") and add it to my widget. After that, I should initialize Raphael by passing the div ID to it.
Problem is that <div id='raphael'> is not committed to the DOM model (i.e., no real DOM element is created) right after qx.ui.embed.Html() constructor call. The DOM element creation is indeed deferred until the widget is painted to the screen. I've managed to catch an appear event for the widget, and, after that, element's existence is guaranteed, and I can initialize Raphael library and do some drawing.
This approach assumes that I have to run all my application logic from within that appear event handler, which is probably not what I want. Is there any other way to get a widget in its ready-for-drawing state in the main application flow?
What you could do is create your own widget RaphaelWidget.js:
qx.Class.define("myApp.RaphaelWidget",
{
extend : qx.ui.core.Widget,
construct : function()
{
this.base(arguments);
this.addListener("appear", this._onAppear, this);
},
members :
{
/**
* Overwritten from qx.ui.core.Widget.
*/
_createContentElement : function()
{
return new qx.html.Element("div", {
overflowX: "hidden",
overflowY: "hidden",
border: "1px solid #aaa" // just for debugging
}, {"id": "canvas-raphael"});
},
_onAppear : function()
{
var paper = new Raphael(document.getElementById('canvas-raphael'), 250, 250);
var circle = paper.circle(100, 100, 80);
}
}
});
And then do for example in your Application.js:
var raphael = new myApp.RaphaelWidget();
raphael.setWidth(250);
raphael.setHeight(250);
this.getRoot().add(raphael);
Now you can develop your Raphael specific code in this new widget class.
Forcing rendering/DOM manipulation actions is called "flushing" in qooxdoo. E.g. the qx.html.Element from Richard's solution has a .flush() method. You might want to try this, or search the API documentation for the term 'flush'.
That being said flushing is a last resort, and shouldn't be used excessively as this would severely degrade performance. You shouldn't shy away from asynchronous programming when you are doing JavaScript. Even your "main" method is a callback, called from the qooxdoo runtime at some point in time.
There are several qooxdoo contributions that integrate third-party libraries the likes of Rafael. For a more idiomatic solution of doing this see e.g. QxDyGraphs (part. the __addCanvas method), a contrib that integrates the Dygraphs JS library.