Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I need a flow chart library, that can help me to create a flow chart as shown below in React.
Would really appreciate if a link for similar demo is added.
You can use https://github.com/projectstorm/react-diagrams, here is the link to its demo.
The view of the implementation looks very similar to the one you mentioned in the pic given. Also since it says it's customizable, you can make it look like according to your requirements
Syncfusion have support to create a diagram with custom shapes , Label and Port to Port Connection in React. Please find the online samples of Syncfusion Diagram. We have created flow diagram which is similar to the provided screenshot.
Please refer to the sample from the below link:
Sample link: https://codesandbox.io/s/wkvjjopv18
You can also create a label for the node or connector by using annotation property. Please find the below link for how to add label to the node or connector
Link: https://ej2.syncfusion.com/react/documentation/diagram/labels#create-annotation
There aren't many flow and diagram libraries out there that have been specifically built for React. You should also be looking for generic solutions that integrate well with React.
If this is in a commercial context and/or your requirements are non-trivial, be sure to check out yFiles for HTML, which should be able to help you achieve all of the requirements I can see in your sample diagram:
You can customize the design and look of your visualization to match exactly your requirements
You can use automatic layout algorithms to dynamically arrange the items according to the structure of the data, without having the user to place items manually
You can add as many labels, ports (connectors at nodes), to nodes and edges.
You may customize the interactions, e.g. to disallow the creation of invalid structures in your diagram type
It is a white-label solution that can be embedded into any JavaScript application.
The library helps you create a react diagramming component and also comes with a React Diagram Integration Demo. This allows you to use all the features in a React powered application. See this full diagram editor app for a complex demo that shows many of the features of the library.
Disclaimer: I work for the company that creates the library above. I do not represent my employer on SO, though. Answers, questions, and opinions are my own.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I'm looking for good frontend "template engine" of some sort. I've spent 2 days researching. I've looked into Polymer (by Google), Reactjs (by Facebook), Skatejs (by Atlassian), Rivet (used by Dell) and Angularjs directives (by Google).
Now, I need some help.
Desired features:
data binding (one or two directional)
parsing custom elements, ex: <my-element></my-element> that output some predefined html
the custom elements should have the ability to wrap around nested elements, ex: <my-element><h1>My title</h1></my-element> that output the predifed html with the nested tag at the specified location inside that html (similar to webcomponents and Polymer)
minimum abstraction and no new syntax if possible (except some mustache-like templating may be)
a bonus would be html imports
Additionally:
should be stable
should be simple to use, simply drop in (not-in-the-way), not requiring some certain app structure
should do just template-engine things (bad example: Angular does abstract things too much, also include some jquery-like thing, etc)
My findings so far:
I found that Polymer is unstable with the shadow-dom and not working properly without it. Reactjs defines its own language which is unnecessary for me, react also requires nested components to be react components again, and don't allow to be html (limitation due to the custom language). Skatejs doesn't have data binding. Rivet has unstable custom elements and no ability to wrap nested elements. Angular directives are introducing the whole angular js abstraction, which is a bit too much only to get nice templating working.
My question
Is there alternative to the libraries I've tried that match the desired features listed above? If not, can you think of a way to mash some libraries together and achieve such functionality?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I am looking for a suitable JavaScript charting library that will work well with being generated with data pulled from an API using Ajax/JSON. I'll be primarily using line, bar and pie charts.
Any library that is straightforward to use, has good documentation and will allow me to have animated graphs is also a plus.
What is my best option in this scenario?
Your question is a little vague - though from personal experience, I have found Chart.js and canvas.js (preferring the former) to be easy to use - they have detailed documentation, easy-to-use code formats and also available animations when the graphs are changed dynamically.
D3.JS
Have you seen D3.js?
As far as I know, it is the MOST flexible charting library.
Checkout the examples here: https://github.com/mbostock/d3/wiki/Gallery
Highcharts
The other one that I have used is Highcharts. Its not open source though and it is not free for commercial purposes. However, it is very easy to use.
Google Visualization / Google Charts
You may also use Google Visualization but it doesnt work offline (they dont allow you to download the library, sadly). But its easy to use.
All of the 3 libraries mentioned above provide line, bar and pie charts, with animation and very well documented.
Hope it helps :)
As said by #think123 I am also a fan of chart.js however it is limited in the sense of displaying actual data within the graphs themselves. Flot is also highly praised and does not have the limitations of chart.js - the hover effect is similar to Google Analytics
Why not go for D3.js?
D3 stands for Data-Driven Documents, but what it really means, is that it is a visualization library, that ultimately, like any other js visualization library, draw things on canvas.
Example: Some of the things that can be made using it are beautiful. Such as this
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am new to javascript (although I've developed a small nodejs API server before, but it is nothing interactive, animating, or fancy at all)
I'd like to develop a static, single page website that works on modern browser and mobiles. The intended design looks a lot like
http://global.tommy.com/int/en/Collections/runway/spring-women
which is quite common with
Static Title Bar that follows wherever user scroll
< li > on the left acting like quick jump control + navigation/position indicator
carousel
I'm totally at blank on how to achieve such impressive look and feel and animation and responsiveness. So far, I tried out several libraries such as Twitter's BootStrap, Google's AngularJS, and AmberJS but none is as impressive as my intended outcome. The closest I get into is the sample from http://www.portalapp.com/ but that's my best trial.
Would any of you recommend any good resources (technology/libraries, or getting started guide and tutorial) to get off the ground fast?
Thank you very much!
EDIT:
Do anyone has open source projects or sample on GitHub that uses any javascript/css libraries to achieve cross device, responsive, single page web app?
Please provide the breakdown of the libraries used as well., since javascript libraries are numerous
EmberJS has a nice guide from the official website. Their API documentation is also helpful. Moreover, you can take a look at the source which is heavily documented.
If you need help, there are community forums.
If you are into screencasts, here is one free and one paid.
A word of caution using resources from Internet: EmberJS is in a "stabilizing" phase as they work towards version 1.0. So, if you read an old resource, it might not work using the current version of EmberJS.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm looking for a tool with which I can annotate source code.
I have some 3rd party source code (JavaScript) I need to understand and I don't want to change it (add inline comments) so that
line numbers can stay intact (for communication with others),
I can avoid accidentally changing something and
my annotations stand out compared to the authors comments.
Normally I would print the whole thing out an scribble on it, but the code is too long for that and I need to share it per email. I would be great if one could do some like that including being able to create "links" between so places in the code, possibly even visually with a lines or arrows.
If you would usually print it (if it were shorter), why not print it to a PDF and then use a PDF viewer that supports comments, like Foxit Reader? :)
I would use email to comment and pastebin to host and highlight #h# lines with links in the email text.
OR
some code-review tool (like codestricker or reviewboard for example)
You can certainly do what you want to with LaTeX and its listings package. But if you are not already a LaTeX user you might think that a hard way to go.
start a github project and post the code there, github includes annotation abilities OOB.
You have difficult requirements. I don't know of such tool. Nevertheless as a more general purpose tool, I can recommend Yui Doc (download here).
I'd build a glamour browser for it. (If spending half a day building it wouldn't be too much).
[edit]
Glamour is a toolkit for building browsers on a model. The model would here consist of the various parts of the file(s) and the comments and attributes you'd like to add. This would allow you to easily navigate through the source and comments, to select only parts with (or without) certain attributes. There is a video and slides. Official page, Source
How about using google wave with syntaxy (http://wave-samples-gallery.appspot.com/about_app?app_id=14008) bot?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I need to generate many internal client-side (within the company only) graphs from streams of data, and since the data itself is "secret", I can't use a service like Google-Graphs for generating the graphs. So I was wondering if anyone has some recomendations for a javascript graph library that doesn't require a server.
Thanks
Have a look at flot a javascript plotting library.
EDIT
The official flot repo lives on github
Have a look at Raphael (github).
The data is likely going to be in plain text if you use a javascript library to render it client side... Even so, jQuery Sparklines can generate simple graphs client-side.
Found a library called PlotKit for Mochi, while looking at Nickf's canvasgraphjs link.
If you use a client-side library, your data is pretty much out in the open. If the data is secret, I think what you need is a library that generates the plot on the server side and outputs images. JFreechart is one library that does this in Java. I am sure there are others.
Check D3.js: JavaScript library for manipulating documents based on data.
I didn't try it myself yet, but it looks promising and interesting.