Bio
B'log
Research
Teaching

Difference between revisions of "Web Element: Data"
 
(46 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', 'line']});
+
      google.charts.load('current', {'packages':['corechart']});
−
google.charts.setOnLoadCallback(drawCrosshairs);
+
      google.charts.setOnLoadCallback(drawVisualization);
  
−
function drawCrosshairs() {
+
      function drawVisualization() {
−
      var data = new google.visualization.DataTable();
+
        // Some raw data (not necessarily accurate)
−
      data.addColumn('number', 'Time');
+
        var data = google.visualization.arrayToDataTable([
−
      data.addColumn('number', 'Confirmed');
+
          ['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],
 +
]);
  
−
      data.addRows([
+
// Set chart options
−
         [10, 1], [11, 1], [12, 5], [13, 5], [14, 6], [15, 18], [16, 47], [17, 98], [18, 192], [19, 359], [20, 670], [21, 947], [22, 1236], [23, 1529], [24, 1872], [25, 2433], [26, 3629], [27, 5698], [28, 7402]
+
         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 options = {
+
        var chart = new google.visualization.ComboChart(document.getElementById('chart_div_1'));
−
        hAxis: {
+
        chart.draw(data, options);
−
          title: 'Time'
+
      }
−
        },
+
    </script>
−
         vAxis: {
+
  </head>
−
           title: 'Population'
+
 
−
        },
+
<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 chart = new google.visualization.LineChart(document.getElementById('chart_div'));
+
        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,
 +
        };
  
−
      chart.draw(data, options);
+
        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div_2'));
−
      chart.setSelection([{row: 38, column: 1}]);
 
  
−
    }
+
        chart.draw(data, options);
 +
      }
 
     </script>
 
     </script>
 
   </head>
 
   </head>
  
−
  <body>
+
<body>
−
    <!--Div that will hold the pie chart-->
+
<div id="chart_div_2"></div>
−
    <div id="chart_div"></div>
+
</body>
−
  </body>
 
 
</html>
 
</html>
 +
|}

Latest revision as of 12:34, 17 May 2020

Retrieved from "https://hkilter.com/index.php?title=Web_Element:_Data&oldid=1997"

hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

© 2020 H. K. Ilter