Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | // GOOGLE CHARTS INIT |
| 2 | google.load('visualization', '1', { |
||
| 3 | packages: ['corechart', 'bar', 'line'] |
||
| 4 | }); |
||
| 5 | google.load("visualization", "1.1", { |
||
| 6 | packages: ["gantt"] |
||
| 7 | }); |
||
| 8 | |||
| 9 | google.setOnLoadCallback(drawChart); |
||
| 10 | |||
| 11 | // GOOGLE COLUMN CHART 1 |
||
| 12 | function drawChart() { |
||
| 13 | |||
| 14 | // COLUMN CHART |
||
| 15 | var data = new google.visualization.DataTable(); |
||
| 16 | data.addColumn('timeofday', 'Time of Day'); |
||
| 17 | data.addColumn('number', 'Motivation Level'); |
||
| 18 | data.addColumn('number', 'Energy Level'); |
||
| 19 | |||
| 20 | data.addRows([ |
||
| 21 | [{ |
||
| 22 | v: [8, 0, 0], |
||
| 23 | f: '8 am' |
||
| 24 | }, 1, .25], |
||
| 25 | [{ |
||
| 26 | v: [9, 0, 0], |
||
| 27 | f: '9 am' |
||
| 28 | }, 2, .5], |
||
| 29 | [{ |
||
| 30 | v: [10, 0, 0], |
||
| 31 | f: '10 am' |
||
| 32 | }, 3, 1], |
||
| 33 | [{ |
||
| 34 | v: [11, 0, 0], |
||
| 35 | f: '11 am' |
||
| 36 | }, 4, 2.25], |
||
| 37 | [{ |
||
| 38 | v: [12, 0, 0], |
||
| 39 | f: '12 pm' |
||
| 40 | }, 5, 2.25], |
||
| 41 | [{ |
||
| 42 | v: [13, 0, 0], |
||
| 43 | f: '1 pm' |
||
| 44 | }, 6, 3], |
||
| 45 | [{ |
||
| 46 | v: [14, 0, 0], |
||
| 47 | f: '2 pm' |
||
| 48 | }, 7, 4], |
||
| 49 | [{ |
||
| 50 | v: [15, 0, 0], |
||
| 51 | f: '3 pm' |
||
| 52 | }, 8, 5.25], |
||
| 53 | [{ |
||
| 54 | v: [16, 0, 0], |
||
| 55 | f: '4 pm' |
||
| 56 | }, 9, 7.5], |
||
| 57 | [{ |
||
| 58 | v: [17, 0, 0], |
||
| 59 | f: '5 pm' |
||
| 60 | }, 10, 10], |
||
| 61 | ]); |
||
| 62 | |||
| 63 | var options = { |
||
| 64 | title: 'Motivation and Energy Level Throughout the Day', |
||
| 65 | focusTarget: 'category', |
||
| 66 | hAxis: { |
||
| 67 | title: 'Time of Day', |
||
| 68 | format: 'h:mm a', |
||
| 69 | viewWindow: { |
||
| 70 | min: [7, 30, 0], |
||
| 71 | max: [17, 30, 0] |
||
| 72 | }, |
||
| 73 | }, |
||
| 74 | vAxis: { |
||
| 75 | title: 'Rating (scale of 1-10)' |
||
| 76 | } |
||
| 77 | }; |
||
| 78 | |||
| 79 | var chart = new google.visualization.ColumnChart(document.getElementById('gchart_col_1')); |
||
| 80 | chart.draw(data, options); |
||
| 81 | |||
| 82 | var chart = new google.visualization.ColumnChart(document.getElementById('gchart_col_2')); |
||
| 83 | chart.draw(data, options); |
||
| 84 | |||
| 85 | |||
| 86 | // LINE CHART |
||
| 87 | var data = new google.visualization.DataTable(); |
||
| 88 | data.addColumn('number', 'Day'); |
||
| 89 | data.addColumn('number', 'Guardians of the Galaxy'); |
||
| 90 | data.addColumn('number', 'The Avengers'); |
||
| 91 | data.addColumn('number', 'Transformers: Age of Extinction'); |
||
| 92 | |||
| 93 | data.addRows([ |
||
| 94 | [1, 37.8, 80.8, 41.8], |
||
| 95 | [2, 30.9, 69.5, 32.4], |
||
| 96 | [3, 25.4, 57, 25.7], |
||
| 97 | [4, 11.7, 18.8, 10.5], |
||
| 98 | [5, 11.9, 17.6, 10.4], |
||
| 99 | [6, 8.8, 13.6, 7.7], |
||
| 100 | [7, 7.6, 12.3, 9.6], |
||
| 101 | [8, 12.3, 29.2, 10.6], |
||
| 102 | [9, 16.9, 42.9, 14.8], |
||
| 103 | [10, 12.8, 30.9, 11.6], |
||
| 104 | [11, 5.3, 7.9, 4.7], |
||
| 105 | [12, 6.6, 8.4, 5.2], |
||
| 106 | [13, 4.8, 6.3, 3.6], |
||
| 107 | [14, 4.2, 6.2, 3.4] |
||
| 108 | ]); |
||
| 109 | |||
| 110 | var options = { |
||
| 111 | chart: { |
||
| 112 | title: 'Box Office Earnings in First Two Weeks of Opening', |
||
| 113 | subtitle: 'in millions of dollars (USD)' |
||
| 114 | } |
||
| 115 | }; |
||
| 116 | |||
| 117 | var chart = new google.charts.Line(document.getElementById('gchart_line_1')); |
||
| 118 | chart.draw(data, options); |
||
| 119 | |||
| 120 | // PIE CHART |
||
| 121 | var data = google.visualization.arrayToDataTable([ |
||
| 122 | ['Task', 'Hours per Day'], |
||
| 123 | ['Work', 11], |
||
| 124 | ['Eat', 2], |
||
| 125 | ['Commute', 2], |
||
| 126 | ['Watch TV', 2], |
||
| 127 | ['Sleep', 7] |
||
| 128 | ]); |
||
| 129 | |||
| 130 | var options = { |
||
| 131 | title: 'My Daily Activities' |
||
| 132 | }; |
||
| 133 | |||
| 134 | var chart = new google.visualization.PieChart(document.getElementById('gchart_pie_1')); |
||
| 135 | chart.draw(data, options); |
||
| 136 | |||
| 137 | var options = { |
||
| 138 | pieHole: 0.4 |
||
| 139 | }; |
||
| 140 | |||
| 141 | var chart = new google.visualization.PieChart(document.getElementById('gchart_pie_2')); |
||
| 142 | chart.draw(data, options); |
||
| 143 | |||
| 144 | // GANTT CHART |
||
| 145 | var data = new google.visualization.DataTable(); |
||
| 146 | data.addColumn('string', 'Task ID'); |
||
| 147 | data.addColumn('string', 'Task Name'); |
||
| 148 | data.addColumn('string', 'Resource'); |
||
| 149 | data.addColumn('date', 'Start Date'); |
||
| 150 | data.addColumn('date', 'End Date'); |
||
| 151 | data.addColumn('number', 'Duration'); |
||
| 152 | data.addColumn('number', 'Percent Complete'); |
||
| 153 | data.addColumn('string', 'Dependencies'); |
||
| 154 | |||
| 155 | data.addRows([ |
||
| 156 | ['2014Spring', 'Spring 2014', 'spring', |
||
| 157 | new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null |
||
| 158 | ], |
||
| 159 | ['2014Summer', 'Summer 2014', 'summer', |
||
| 160 | new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null |
||
| 161 | ], |
||
| 162 | ['2014Autumn', 'Autumn 2014', 'autumn', |
||
| 163 | new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null |
||
| 164 | ], |
||
| 165 | ['2014Winter', 'Winter 2014', 'winter', |
||
| 166 | new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null |
||
| 167 | ], |
||
| 168 | ['2015Spring', 'Spring 2015', 'spring', |
||
| 169 | new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null |
||
| 170 | ], |
||
| 171 | ['2015Summer', 'Summer 2015', 'summer', |
||
| 172 | new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null |
||
| 173 | ], |
||
| 174 | ['2015Autumn', 'Autumn 2015', 'autumn', |
||
| 175 | new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null |
||
| 176 | ], |
||
| 177 | ['2015Winter', 'Winter 2015', 'winter', |
||
| 178 | new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null |
||
| 179 | ], |
||
| 180 | ['Football', 'Football Season', 'sports', |
||
| 181 | new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null |
||
| 182 | ], |
||
| 183 | ['Baseball', 'Baseball Season', 'sports', |
||
| 184 | new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null |
||
| 185 | ], |
||
| 186 | ['Basketball', 'Basketball Season', 'sports', |
||
| 187 | new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null |
||
| 188 | ], |
||
| 189 | ['Hockey', 'Hockey Season', 'sports', |
||
| 190 | new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null |
||
| 191 | ] |
||
| 192 | ]); |
||
| 193 | |||
| 194 | var options = { |
||
| 195 | height: 400, |
||
| 196 | gantt: { |
||
| 197 | trackHeight: 30 |
||
| 198 | } |
||
| 199 | }; |
||
| 200 | |||
| 201 | var chart = new google.visualization.GanttChart(document.getElementById('gchart_gantt')); |
||
| 202 | |||
| 203 | chart.draw(data, options); |
||
| 204 | } |