Best way of drawing a chart in a web page

Question

0.00/5 (No votes)

See more:

Hi guys,
I'm new in web programming and just want to ask for an opinion. I want to develop a web page and in the home page, I want to display a kind of chart. With nodes connected with arrows and the arrows will be hyperlinked. In a window based application, I understand there are tools like Visual Basic Power Tools in which you can drag and drop shapes like lines and oval or arrows and using there, it is fairly easy to make a chart.

But in a web application, I can't find any tools or anything that can help me draw a chart. Is there any recommendation on some kind of tools or something so that I can draw a chart in a web page? :)

Posted 29-Nov-13 7:12am

nizam15

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Debopam Pal · Accepted Answer · 2013-11-29T07:20:00

Solution 1

Try this

Posted 29-Nov-13 7:20am

Debopam Pal

Comments

nizam15 29-Nov-13 13:27pm

Thanks for the recommendation. But all of the charts in provided in the library is graph chart. What I have in mind is a really simple flow chart. Nodes connected by arrows. Just to display in my home page and there will be a hyperlink for each arrows.

Debopam Pal 29-Nov-13 13:35pm

Try the following link, I think it will fulfill your requirement: http://jsplumbtoolkit.com/demo/flowchart/jquery.html

ridoy 29-Nov-13 15:01pm

Include the link to your solution which will complete your answer.

Debopam Pal 29-Nov-13 15:18pm

Now see. Is it OK?

Sergey Alexandrovich Kryukov 29-Nov-13 16:29pm

You should have mentioned your goal in first place when asking a question.
—SA

Sergey Alexandrovich Kryukov 29-Nov-13 16:26pm

Interesting one, a 5.
—SA

nizam15 29-Nov-13 17:48pm

Thanks a lot @Debopam Pal. That is really an interesting tool. Will sure to try it out. :)

@SA : Sorry. I did mention my goal in my question but maybe I didn't write it clear enough. Sorry. :)

Sergey Alexandrovich Kryukov 29-Nov-13 18:22pm

No problem at all.
—SA

Debopam Pal 29-Nov-13 21:50pm

You are very welcome:-)

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-11-29T10:37:00

It looks like you want to have general-purpose graphics, not specifically the kind of charts visualizing mathematical functions, which is one of the most common understanding of the term "chart". In fact, this term is much wider that that, so you should have explained what exactly you need, or just mention more general term "graphics", "vector graphics" or the like.

First of all, I would recommend to use HTML5 Canvas feature: http://en.wikipedia.org/wiki/Canvas_element[^].

These days, I think, this is a base approach for the cases when you use just the server and the browser, without Java or Flash technologies, which are the separate topics.

Please see what one can do, this is pretty impressive: http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/[^].

But you can find something more specific to diagramming: http://bit.ly/18sK2WR[^].

—SA