DotNet Stadium

Wednesday 11 May 2022

Google Geo Charts(Zoom into Countries)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Population'],
          ['INDIA', 600],
        ]);
        
        var options = {
                        region: 'IN',
                        domain:'IN',
                        colorAxis: {colors: ['green', 'blue']},
                       backgroundColor: '#81d4fa',
          
                      };

        var chart = new google.visualization.GeoChart(document.getElementById('India_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="India_div" style="width: 550px; height: 400px;"></div>
  </body>
</html>

Friday 6 May 2022

Google Geo Charts(Highlighting Countries)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Population'],
          ['United States', 300],
          ['INDIA', 600],
          ['Germany', 200]
        ]);
        
        var options = {
                        domain:'IN',
                       colorAxis: {colors: ['#fc9e97', '#f71707']},
                       backgroundColor: '#81d4fa',
          
                      };

        var chart = new google.visualization.GeoChart(document.getElementById('countries_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="countries_div" style="width: 550px; height: 400px;"></div>
  </body>
</html>

Google Visualization Gauge Refreshing the dial using Timer

 <html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['CPU', 80]
          
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:80, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
        
        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 1300);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 2000);
      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>