HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <div id="point"> </div> <script> google.charts.load('current', {'packages':['gantt']}); google.charts.setOnLoadCallback(drawChart); function daysToMilliseconds(days) { return days * 24 * 60 * 60 * 1000; } function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('string', 'Resource'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent Complete'); data.addColumn('string', 'Dependencies'); data.addRows([ ['Study', 'Math', null, new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null], ['Chapter1', 'Ven diagram', 'write', null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Study,chapter4'], ['chapter2', 'Geometery', 'write', null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Study'], ['chapter3', 'Algebra', 'complete', null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'chapter2,Chapter1'], ['chapter4', 'Trigonometry', 'write', null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Study'] ]); var options = { height: 275, gantt: { criticalPathEnabled: true, criticalPathStyle: { stroke: '#e64a19', strokeWidth: 5 } } }; var chart = new google.visualization.Gantt(document.getElementById('point')); chart.draw(data, options); } </script> </body> </html>
OUTPUT
×

Save as Private