Difference between revisions of "Web Element: Data"


 
(40 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{|
 +
| width=50% |
 
<html>
 
<html>
 
   <head>
 
   <head>
Line 12: Line 14:
 
         var data = google.visualization.arrayToDataTable([
 
         var data = google.visualization.arrayToDataTable([
 
           ['Day', 'Cumulative', 'Daily'],
 
           ['Day', 'Cumulative', 'Daily'],
// Day 1 = March 10, 2020
+
        // Day 1 = March 10, 2020
 
[1, 1, 1],
 
[1, 1, 1],
 
[2, 1, 0],
 
[2, 1, 0],
Line 31: Line 33:
 
[17, 3629, 1196],
 
[17, 3629, 1196],
 
[18, 5698, 2069],
 
[18, 5698, 2069],
[19, 7402, 1704]
+
[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],
 
]);
 
]);
  
Line 37: Line 65:
 
         var options = {
 
         var options = {
 
           title : 'COVID-19 Cases in Turkey',
 
           title : 'COVID-19 Cases in Turkey',
          vAxis: {
+
fontName: 'Old Standard TT',
 +
vAxis: {
 
           title: 'Cases',  
 
           title: 'Cases',  
//           maxValue: '20000'
+
//         maxValue: '20000',
 +
// scaleType: 'log',
 
             },
 
             },
 
           hAxis: {title: 'Day'},
 
           hAxis: {title: 'Day'},
 
           seriesType: 'bars',
 
           seriesType: 'bars',
 
           series:{
 
           series:{
           0: {type: 'line', color: '#982F00', lineWidth: 3},
+
           0: {type: 'line',
 +
            color: '#982F00',
 +
                lineWidth: 3,
 +
//              pointSize: 4,
 +
                },
 
          1: {type: 'bars', color: 'black'},},
 
          1: {type: 'bars', color: 'black'},},
          'width':600,
+
//        'width':300,
           'height':400,
+
           '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'));
+
         var chart = new google.visualization.ComboChart(document.getElementById('chart_div_1'));
 
         chart.draw(data, options);
 
         chart.draw(data, options);
 
       }
 
       }
Line 56: Line 92:
 
   </head>
 
   </head>
  
  <body>
+
<body>
    <!--Div that will hold the pie chart-->
+
<div id="chart_div_1"></div>
    <div id="chart_div"></div>
+
</body>
  </body>
 
 
</html>
 
</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>
 +
  </head>
 +
 +
<body>
 +
<div id="chart_div_2"></div>
 +
</body>
 +
</html>
 +
|}

Latest revision as of 12:34, 17 May 2020