Bio
B'log
Research
Teaching

Difference between revisions of "Web Element: Data"
 
(56 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', 'X');
+
        var data = google.visualization.arrayToDataTable([
−
      data.addColumn('number', 'Dogs');
+
          ['Day', 'Cumulative', 'Daily'],
−
      data.addColumn('number', 'Cats');
+
        // 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
−
         [0, 0, 0],    [1, 10, 5],  [2, 23, 15],  [3, 17, 9],  [4, 18, 10],  [5, 9, 5],
+
         var options = {
−
        [6, 11, 3],  [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
+
          title : 'COVID-19 Cases in Turkey',
−
        [12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
+
fontName: 'Old Standard TT',
−
        [18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
+
vAxis: {
−
        [24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
+
          title: 'Cases',  
−
        [30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
+
//          maxValue: '20000',
−
        [36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
+
// scaleType: 'log',
−
        [42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
+
            },
−
        [48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
+
          hAxis: {title: 'Day'},
−
        [54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
+
          seriesType: 'bars',
−
        [60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
+
          series:{
−
        [66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
+
          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: 'Popularity'
+
 
−
         },
+
<body>
−
        colors: ['#a52714', '#097138'],
+
<div id="chart_div_1"></div>
−
        crosshair: {
+
</body>
−
          color: '#000',
+
</html>
−
          trigger: 'selection'
+
|
−
         }
+
 
−
      };
+
<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