# Plot the Dgraph Output

**URL:** <https://discuss.dgraph.io/t/plot-the-dgraph-output/4756>\
**Category:** Dgraph\
**Created:** [July 11, 2019, 9:16am UTC](https://discuss.dgraph.io/t/plot-the-dgraph-output/4756 "2019-07-11T09:16:30Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![amandalmia14](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@amandalmia14](https://discuss.dgraph.io/u/amandalmia14)\
**Post date:** [July 11, 2019, 9:16am UTC](https://discuss.dgraph.io/t/plot-the-dgraph-output/4756/1 "2019-07-11T09:16:30Z")

</div>

Hi,

I am using Dgraph Server in order to fetch the output of the given query. I would like to know how to plot the graphs into my existing web-app. Is there any library which can consume the dgraph output and plot the graphs (similar to ratel)?

For fetching the data from the Dgraph server I am using PyDgraph.

Can anyone help me on this part.

@amanmangal

Thanks

---

<div class="post-metadata">

**Author:** ![MichelDiz](https://yyz1.discourse-cdn.com/flex007/user_avatar/discuss.dgraph.io/micheldiz/32/11873_2.png) [@MichelDiz](https://discuss.dgraph.io/u/MichelDiz)\
**Post date:** [July 11, 2019, 11:47am UTC](https://discuss.dgraph.io/t/plot-the-dgraph-output/4756/2 "2019-07-11T11:47:30Z")

</div>

There is no specific library for you to use to view graphs from Dgraph. Or you’ll need to create a graph view or look for an open source project. There is few projects out there in Github that you could use. Most projects you will need to treat the results before you use them. Even in Ratel we treat the data first.

---

<div class="post-metadata">

**Author:** ![amandalmia14](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@amandalmia14](https://discuss.dgraph.io/u/amandalmia14)\
**Post date:** [July 11, 2019, 12:31pm UTC](https://discuss.dgraph.io/t/plot-the-dgraph-output/4756/3 "2019-07-11T12:31:34Z")

</div>

> [@MichelDiz](#):
>
> There is few projects out there in Github

Can you please share up the links. I guess many people must have used it. It would be great of you share those links as well.

Appreciate your time.  
Thanks.

---

<div class="post-metadata">

**Author:** ![francesc](https://yyz1.discourse-cdn.com/flex007/user_avatar/discuss.dgraph.io/francesc/32/1757_2.png) [@francesc](https://discuss.dgraph.io/u/francesc)\
**Post date:** [July 11, 2019, 6:41pm UTC](https://discuss.dgraph.io/t/plot-the-dgraph-output/4756/4 "2019-07-11T18:41:21Z")

</div>

I think Ratel uses d3 ([https://d3js.org/](https://d3js.org/)) for the graph visualization but I’m sure @paulftw can confirm

---

<div class="post-metadata">

**Author:** ![paulftw](https://yyz1.discourse-cdn.com/flex007/user_avatar/discuss.dgraph.io/paulftw/32/1569_2.png) [@paulftw](https://discuss.dgraph.io/u/paulftw)\
**Post date:** [July 16, 2019, 4:12pm UTC](https://discuss.dgraph.io/t/plot-the-dgraph-output/4756/5 "2019-07-16T16:12:53Z")

</div>

Ratel is indeed using [d3js.org](http://d3js.org) for graph rendering.  
It’s most likely a slightly outdated overkill for your use case, but Ratel has long list of requirements.

Previously we used vis.js but that library is no longer maintained.

Sadly there aren’t many graph visualization libraries, or at least not as many options as for bar or line charts.

I’d look into [http://js.cytoscape.org/](http://js.cytoscape.org/) or `paperjs` if I were starting a visualization project from scratch.  
If you share specifics of the data you need to display I can try to think of a better alternative.  
Is it simply nodes and edges? Are there any regularities you need shown, what interactions do your users need? (selecting, dragging, adding/removing pieces). Do you know where your nodes must be placed on the page or would library need to decide that?

---

<div class="post-metadata">

**Author:** ![amandalmia14](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@amandalmia14](https://discuss.dgraph.io/u/amandalmia14)\
**Post date:** [July 18, 2019, 2:07pm UTC](https://discuss.dgraph.io/t/plot-the-dgraph-output/4756/6 "2019-07-18T14:07:33Z")

</div>

Thanks @paulftw. Actually for the nodes to display along with the edges which and graph library can do. I am more concert about the expanding of the nodes when we double click on it. I want that feature which is there in ratel-ui

Thanks

---

<div class="post-metadata">

**Author:** ![paulftw](https://yyz1.discourse-cdn.com/flex007/user_avatar/discuss.dgraph.io/paulftw/32/1569_2.png) [@paulftw](https://discuss.dgraph.io/u/paulftw)\
**Post date:** [July 25, 2019, 3:01pm UTC](https://discuss.dgraph.io/t/plot-the-dgraph-output/4756/7 "2019-07-25T15:01:51Z")

</div>

Cytoscape has [expand-collapse](https://rawgit.com/iVis-at-Bilkent/cytoscape.js-expand-collapse/master/demo-compounds-collapsed.html) and so [does d3js](https://bl.ocks.org/mbostock/1093130)  
In Ratel this code is quite dependent on our in-house graph parser: [handleExpandNode](https://github.com/dgraph-io/ratel/blob/master/client/src/components/FrameLayout/FrameSession.js#L77)
