| <html> |
| <head> |
| <!--Load the AJAX API--> |
| <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> |
| <script type="text/javascript" src="https://www.google.com/jsapi"></script> |
| <!-- Defines the variables named foo_data --> |
| <script type="text/javascript" src="../../out/demo_viz_data.js"></script> |
| |
| <script type="text/javascript"> |
| |
| // Load the Visualization API and some packages. |
| google.charts.load('current', {'packages':['corechart', 'geochart', 'table']}); |
| |
| // Set a callback to run when the Google Visualization API is loaded. |
| google.charts.setOnLoadCallback(drawCharts); |
| |
| |
| // Callback that invokes the chart-drawing functions. |
| // NOTE: "_SC" refers to charts that represent data from the |
| // "Straight Counting" pipeline. |
| function drawCharts() { |
| drawUsageByHourColumnChart(); |
| }; |
| |
| function drawUsageByHourColumnChart() { |
| var title = 'Fuchsia usage by hour, estimates with 95% Confidence Intervals'; |
| |
| // Parse the data table. |
| var data = new google.visualization.DataTable(usage_by_hour_data); |
| var options = { |
| title: title, |
| 'width': 900, |
| 'height': 400, |
| intervals: { color: 'black', 'lineWidth':2, 'barWidth': 1.2}, |
| hAxis: { |
| title: 'Hour of Day', |
| gridlines: {count: 12}, |
| }, |
| vAxis: {viewWindow: {max: 1200}}, |
| }; |
| |
| // Instantiate and draw our chart. |
| var chart = new google.visualization.ColumnChart(document.getElementById('usage_by_hour_chart')); |
| chart.draw(data, options); |
| } |
| |
| function drawTable(data_var, element_id) { |
| // Parse the data table. |
| var data = new google.visualization.DataTable(data_var); |
| |
| // Instantiate and draw our table. |
| var table = new google.visualization.Table(document.getElementById(element_id)); |
| |
| table.draw(data, { |
| showRowNumber: false, |
| alternatingRowStyle: true, |
| sortAscending: false, |
| allowHtml: true, |
| cssClassNames: {headerRow: 'table_header'}, |
| width: 500, |
| frozenColumns: 1, |
| }); |
| } |
| |
| function drawPopularUrlsTables() { |
| drawTable(popular_urls_data_sc, 'popular_urls_table_sc') |
| drawTable(popular_urls_data, 'popular_urls_table') |
| } |
| |
| function drawPopularHelpQueriesTables() { |
| drawTable(popular_help_queries_data_sc, 'popular_help_queries_table_sc') |
| drawTable(popular_help_queries_data, 'popular_help_queries_table') |
| } |
| |
| </script> |
| </head> |
| |
| <style> |
| .table_header { |
| text-align: left; |
| } |
| </style> |
| |
| <body> |
| <table> |
| <tr> |
| <td> |
| <div id="usage_by_hour_chart"></div> |
| </td> |
| </tr> |
| </table> |
| |
| |
| </body> |
| </html> |
