Difference between revisions of "Web Element: Data"
(55 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | {| | ||
+ | | width=50% | | ||
<html> | <html> | ||
<head> | <head> | ||
Line 5: | Line 7: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
− | google.charts.load('current', {packages: ['corechart | + | google.charts.load('current', {'packages':['corechart']}); |
− | google.charts.setOnLoadCallback( | + | google.charts.setOnLoadCallback(drawVisualization); |
− | function | + | function drawVisualization() { |
− | + | // Some raw data (not necessarily accurate) | |
− | + | var data = google.visualization.arrayToDataTable([ | |
− | + | ['Day', 'Cumulative', 'Daily'], | |
+ | // Day 1 = March 10, 2020 | ||
+ | [1, 1, 1], | ||
+ | [2, 1, 0], | ||
+ | [3, 5, 4], | ||
+ | [4, 5, 0], | ||
+ | [5, 6, 1], | ||
+ | [6, 18, 12], | ||
+ | [7, 47, 29], | ||
+ | [8, 98, 51], | ||
+ | [9, 192, 94], | ||
+ | [10, 359, 167], | ||
+ | [11, 670, 311], | ||
+ | [12, 947, 277], | ||
+ | [13, 1236, 289], | ||
+ | [14, 1529, 293], | ||
+ | [15, 1872, 343], | ||
+ | [16, 2433, 561], | ||
+ | [17, 3629, 1196], | ||
+ | [18, 5698, 2069], | ||
+ | [19, 7402, 1704], | ||
+ | [20, 9217, 1815], | ||
+ | [21, 10827, 1410], | ||
+ | [22, 13531, 2904], | ||
+ | [23, 15679, 2148], | ||
+ | [24, 18135, 2456], | ||
+ | [25, 20921, 2786], | ||
+ | [26, 23934, 3013], | ||
+ | [27, 27069, 3135], | ||
+ | [28, 30217, 3148], | ||
+ | [29, 34109, 3892], | ||
+ | [30, 38226, 4117], | ||
+ | [31, 42282, 4056], | ||
+ | [32, 47029, 4747], | ||
+ | [33, 52167, 5138], | ||
+ | [34, 56956, 4789], | ||
+ | [35, 61049, 4093], | ||
+ | [36, 65111, 4062], | ||
+ | [37, 69392, 4281], | ||
+ | [38, 74193, 4801], | ||
+ | [39, 78546, 4353], | ||
+ | [40, 82329, 3783], | ||
+ | [41, 86306, 3977], | ||
+ | [42, 90980, 4674], | ||
+ | [43, 95591, 4611], | ||
+ | [44, 98674, 3083], | ||
+ | [45, 101790, 3116], | ||
+ | ]); | ||
− | + | // Set chart options | |
− | + | var options = { | |
− | + | title : 'COVID-19 Cases in Turkey', | |
+ | fontName: 'Old Standard TT', | ||
+ | vAxis: { | ||
+ | title: 'Cases', | ||
+ | // maxValue: '20000', | ||
+ | // scaleType: 'log', | ||
+ | }, | ||
+ | hAxis: {title: 'Day'}, | ||
+ | seriesType: 'bars', | ||
+ | series:{ | ||
+ | 0: {type: 'line', | ||
+ | color: '#982F00', | ||
+ | lineWidth: 3, | ||
+ | // pointSize: 4, | ||
+ | }, | ||
+ | 1: {type: 'bars', color: 'black'},}, | ||
+ | // 'width':300, | ||
+ | 'height':300, | ||
+ | // crosshair: { trigger: 'both', opacity: 0.5 }, | ||
+ | // trendlines: { 1: {} } // Draw a trendline for data series 1, | ||
+ | }; | ||
− | + | var chart = new google.visualization.ComboChart(document.getElementById('chart_div_1')); | |
− | + | chart.draw(data, options); | |
− | + | } | |
− | + | </script> | |
− | + | </head> | |
− | + | ||
− | + | <body> | |
− | + | <div id="chart_div_1"></div> | |
− | + | </body> | |
+ | </html> | ||
+ | | | ||
+ | |||
+ | <html> | ||
+ | <head> | ||
+ | <!--Load the AJAX API--> | ||
+ | <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | google.charts.load('current', {'packages':['corechart']}); | ||
+ | google.charts.setOnLoadCallback(drawChart); | ||
+ | |||
+ | function drawChart() { | ||
+ | var data = google.visualization.arrayToDataTable([ | ||
+ | ['Total cases', 'Daily cases'], | ||
+ | //[1, 1], | ||
+ | //[1, 0], | ||
+ | //[5, 4], | ||
+ | //[5, 0], | ||
+ | //[6, 1], | ||
+ | //[18, 12], | ||
+ | //[47, 29], | ||
+ | //[98, 51], | ||
+ | [192, 94], | ||
+ | [359, 167], | ||
+ | [670, 311], | ||
+ | [947, 277], | ||
+ | [1236, 289], | ||
+ | [ 1529, 293], | ||
+ | [ 1872, 343], | ||
+ | [ 2433, 561], | ||
+ | [ 3629, 1196], | ||
+ | [ 5698, 2069], | ||
+ | [ 7402, 1704], | ||
+ | [ 9217, 1815], | ||
+ | [ 10827, 1410], | ||
+ | [ 13531, 2904], | ||
+ | [ 15679, 2148], | ||
+ | [ 18135, 2456], | ||
+ | [ 20921, 2786], | ||
+ | [23934, 3013], | ||
+ | [27069, 3135], | ||
+ | [30217, 3148], | ||
+ | [34109, 3892], | ||
+ | [38226, 4117], | ||
+ | [42282, 4056], | ||
+ | [47029, 4747], | ||
+ | [52167, 5138], | ||
+ | [56956, 4789], | ||
+ | [61049, 4093], | ||
+ | [65111, 4062], | ||
+ | [69392, 4281], | ||
+ | [74193, 4801], | ||
+ | [78546, 4353], | ||
+ | [82329, 3783], | ||
+ | [86306, 3977], | ||
+ | [90980, 4674], | ||
+ | [95591, 4611], | ||
+ | [98674, 3083], | ||
+ | [101790, 3116], | ||
+ | ]); | ||
− | + | var options = { | |
+ | title: 'Total cases vs. Daily cases (log-log)', | ||
+ | fontName: 'Old Standard TT', | ||
+ | color: '#982F00', | ||
+ | series:{ | ||
+ | 0: { | ||
+ | color: '#982F00', | ||
+ | pointSize: 2, | ||
+ | },}, | ||
+ | hAxis: {title: 'Total cases', scaleType: 'log'}, | ||
+ | vAxis: {title: 'Daily cases', scaleType: 'log'}, | ||
+ | legend: 'none', | ||
+ | 'height':300, | ||
+ | }; | ||
− | + | var chart = new google.visualization.ScatterChart(document.getElementById('chart_div_2')); | |
− | |||
− | + | chart.draw(data, options); | |
+ | } | ||
</script> | </script> | ||
</head> | </head> | ||
− | + | <body> | |
− | + | <div id="chart_div_2"></div> | |
− | + | </body> | |
− | |||
</html> | </html> | ||
+ | |} |
|
|
hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
© 2020 H. K. Ilter