View Full Version : drawing application

12-27-2010, 06:22 PM
I need to create an application in javascript for drawing flowcharts can anybody help?

12-27-2010, 09:42 PM
Javascript can't create an "application" because it isn't possible to save anything-- there's no way to have an "export" function or save it to a database. If you involve a serverside language like PHP you could do this. If you just need the interface it's possible, but might become complex.
Someone may have some advice for you, but if you don't know where to start and want someone to create this for you, you will need to repost this as a paid request because this is a major project. We're happy to help for free, but doing an entire project is beyond that.

Also, please post more details. Flowcharts could be very simple or very complex, so what are your needs? Do you have an example? A website? Some code already?

12-28-2010, 05:16 AM
the application will be some what like this site http://www.lucidchart.com/documents/demo/4d19714e-5b40-4a2e-964b-17d60afcbe04

It will not contain all its features only some features like:

1.drag and drop
2. undo,redo,copy,cut,and paste
3. draw line
4.group and ungrouping
5.zoomin and zoomout

other functionalities I will disregard but don't know how I can achieve that need help.

12-28-2010, 08:07 PM
hello again I have achieved some of the functionalities need your help in the zoom part

<!doctype html>

<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");

<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />

<script type="text/javascript">


counter = 0;
//Make element draggable
containment: 'frame',

//When first dragged
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
objName = "#clonediv"+counter

//When an existiung object is dragged
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
//Make element droppable
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
var element=$(ui.draggable).clone();

//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1



function loadCanvas() {
var canvas = document.getElementById('canvas');
if(canvas.getContext) {
var context = canvas.getContext('2d');
for (var x = 0; x <= 500; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 550);
for (var y = 0; y <= 550; y += 10) {
context.moveTo(0, y);
context.lineTo(500, y);
context.strokeStyle = "#eee";

for (var x = 0; x <= 500; x += 50) {
context.moveTo(x, 0);
context.lineTo(x, 550);
for (var y = 0; y <= 550; y += 50) {
context.moveTo(0, y);
context.lineTo(500, y);

context.strokeStyle = "#e1e1e1";
} else {
document.getElementById('canvas').style.display = 'none';
document.getElementById('no-canvas').style.display = 'block';



<body onload="loadCanvas()">

<div id="wrapper">
<div id="options">
<div id="drag1" class="drag"></div> <!-- end of drag1 -->
<div id="drag2" class="drag"></div> <!-- end of drag2 -->
<div id="drag3" class="drag"></div> <!-- end of drag3 -->
<div id="drag4" class="drag"></div> <!-- end of drag4 -->

<div id="drag5" class="drag"></div> <!-- end of drag5 -->
<div id="drag6" class="drag"></div> <!-- end of drag6 -->
</div><!-- end of options -->
<div id="frame">
<canvas id="canvas" width="500" height="550"></canvas>

</div><!-- end of frame -->
</div><!-- end of wrapper -->