I am creating graph using SIGMA.JS library.
Its getting drawn , but I am unable to draw edge label on the graphs.
I followed and tried to use Github library as mentioned in following thread :
show edge label in sigma.js
But As Its not much elaborate , I couldn't get through my problem.
I use following sample data in JSON.
{
"edges":
[{"source":"19",
"target":"3",
"id":"abc"}],
"nodes":[
{"label":"a1",
"x":-158,
"y":-171,
"id":"19",
"color":"rgb(49,230,186)",
"size":15},
{"label":"b1",
"x":112,
"y":-98,
"id":"3",
"color":"rgb(138,136,89)",
"size":19}]
};
How can I get this edge label using SIGMA.JS. Is it provided as default feature? If not , What steps can I take to get the same.
If needed, Suggestion on alternative JS library for Graphs is welcome.
You can use this plugin https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.renderers.edgeLabels.
There is enough info to draw label.
!important: set type as 'canvas' to renderer
Add the "label" key to each edge object.
Related
I cannot find a way to make showValues: '1' show the data plot values in a zoomline graphic with Fusion Charts.
You see and try it in this fiddle: http://jsfiddle.net/60oeahc1/4/
¿Is there a way to make it work for zoomline charts?
The thing is that with a line chart is working: http://jsfiddle.net/z0xutjhL/
As per your query, since zoomline features large data , using showValue would overlap the data value text which in turn will result in poor visualization. Hence, It will not be possible to use showValue here.
I am currently developing a web-based application for visualizing data. The app is fed with a json file,formatted like this:
var theData = {
"nodes":{
"IBM":{
"type":"Institution",
"properties":{
"founded_in":"1998",
"director":"whoever"
}
},
"Joseph":{
"type":"Employee",
"properties":{
"Nationality":"bangladeshi"
}
},
[...]
},
"edges":{
"Joseph-IBM":{
"labeled":"Works at"
},
[...]
}
}
NOTE: The json is not entirely.
This data is loaded into the application and it will show you:
The nodes are draggables alongside the entire screen and both the lines and the label of the relationships are moved accordingly.
What would I like to?
I would like to make the surface in which the graph "lays" movable and zoomable, so the UX can be significantly improved. The way I have seen is
by using a canvas. The problem I find, is that the canvas is the first layer and the elements that are inserted in cannot be neither hovered nor clickable (to add events, for example). I do know that those are not really problems, since there is a graph vis that uses (canvas), but I do not know how to solve it.
I am not asking you to give me the exact code (if you want, it would be much appreciated :)), but to help me in finding something to achieve a movable and zoomable surface!
I hope that everthing is clear & Thank you in advance for any help you can provide.
I really need help because I can't find a workaround for my problem.
I just need the labels to be under the graph, like this (the default is on top):
I know there is the generateLabels() function, but with this I lost the click and hide/show function that I wanted and have with the defaults labels.
UPDATE
I find a "workaround", in version 2.5.0 , line 6713 -> change 'top' to 'bottom'. I know is not the ideal solution, but it works and is just what I need.
I find a "workaround", in version 2.5.0 , line 6713 -> change 'top' to 'bottom'. I know is not the ideal solution, but it works and is just what I need.
code printscreen
As per my thinking you can put label below your pie chart using legendTemplate
Here is fiddle : fiddle
then you can change your legend visualization as per your need.
I've got some pie charts with nice external labels, and drawPaths set to true, but I've been unable to get the drawPaths to actually draw. I'm curious whether there could be something lurking in css that has them set in such a way that they aren't drawing. As add'l info, I am using dc.js version: '2.0.0-beta.32'
Code for one of the charts looks like this:
zoneChart
.width(300)
.height(250)
.dimension(zoneDim)
.group(pointsByZone)
.innerRadius(20)
.externalLabels(50)
.drawPaths(true)
.externalRadiusPadding(50);
Any thoughts would be appreciated. Thanks!
Is there a way to make a vertical line in the js graph library dygraph?
I am loading data and would like to put vertical lines like graphite does to show events
is there some special context to add vertical lines
You've probably figured this out by now, or stopped caring, but the way to do this is with a custom underlay (see http://dygraphs.com/tests/highlighted-region.html and http://dygraphs.com/tests/underlay-callback.html for examples). You provide an underlayCallback function when creating the graph, and it gets called with the canvas element, area (which helps with coordinate math), and a reference to the Dygraph object.
Here is a simple solution.
Use the crosshair demo (http://dygraphs.com/tests/crosshair.html) on the Dygraph site.
Once you disable the horizontal bar on the crosshair sample, you are getting a vertical bar.
g4.updateOptions({ pointClickCallback: function(event, p) {
var div_vertical_style="top:0px;left:"+g4.toDomCoords(p.xval,-20)[0]+"px;width:1px;height:"+g4.plotter_.area.h+";background-color:black;position:absolute;";
$("#graphdiv4").append("<div style="+div_vertical_style+"></div>")
}});
//my idea , add div .....