Last active
March 30, 2016 08:48
-
-
Save shkesar/c1bc639105b51a47f071a2ed9813f408 to your computer and use it in GitHub Desktop.
Gantt Chart
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Gantt chart</title> | |
| <style type="text/css"> | |
| .process { | |
| } | |
| #input { | |
| } | |
| #add-process-button { | |
| } | |
| canvas { | |
| border: 2px solid black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="input"> | |
| <ul id="process_list"> | |
| <div class='process'> | |
| <label>Process 0</label> | |
| <input class='process' | |
| type='number' /> | |
| </div> | |
| <hr> | |
| </ul> | |
| <input id="add-process-button" | |
| type="button" | |
| onclick="add_process()" | |
| value="Add" /> | |
| </div> | |
| <input id="generate_gantt_chart_button" | |
| type='button' | |
| value='Generate Gantt Chart' | |
| onclick='generate_gantt_chart()' /> | |
| <canvas id="gantt_chart_canvas" width='320' height'70'></canvas> | |
| <script type="text/javascript"> | |
| var process_node_innerHTML = " \ | |
| <label>Process 0</label> \ | |
| <input class='process' \ | |
| type='number' /> \ | |
| " | |
| var gen_id = 1 | |
| var process_list = document.querySelector('#process_list') | |
| var reference_node = document.querySelector('#process_list > hr') | |
| function add_process() { | |
| process_list.insertBefore(generate_process(), reference_node) | |
| } | |
| function to_string(n) { return n + '' } | |
| function generate_process() { | |
| var process_node_clone = document.createElement('div') | |
| process_node_clone.className = 'process' | |
| process_node_clone.innerHTML = process_node_innerHTML | |
| console.log(process_node_clone) | |
| //modify process number | |
| var label = process_node_clone.querySelector('label').innerText | |
| process_node_clone.querySelector('label').innerText = | |
| label.slice(0, label.length-1) + to_string(gen_id++) | |
| return process_node_clone; | |
| } | |
| function generate_gantt_chart() { | |
| var canvas = document.querySelector('#gantt_chart_canvas') | |
| var context = canvas.getContext('2d') | |
| context.fillStyle = 'rgb(200, 200, 200)' | |
| context.fillRect(10, 10, 300, 50) | |
| var process_count = process_list.childElementCount - 1 | |
| process_list | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment