Google Charts - Google Charts tutorial - Top X Axis Scatter Chart - chart js - google graphs - google charts examples




What is Top X Axis Scatter Chart?

  • Top X Axis Scatter Chart is a chart which is done using X - Axis and Y - Axis coordinates to display values for X and Y Axes
  • Top X Axis Scatter Chart is similar to line graphs where they use X axes and Y axes to plot the axis points
  • Top X Axis Scatter Chart shows us how X axis variable is affected by Y axis and the relationship between X and Y axis is called simple correlation.
  • Top X Axis Scatter Chart is used when the top X Axis Scatter Chart is experiment which is done for axes.
  • Top X Axis Scatter Chart can suggest various kinds of correlations between top X axis and Y axis with a certain confidence level.

Configuration

  • The syntax which is given below gives us the configuration of Top X Axis Scatter Chart and we used axes.x configuration to show x-axis on top.

Syntax:

// Set chart options
var options = { 
   axes: {
      x: {
         0: {side: 'top'}
      }
   }
};
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
  • The sample code which is given below show us the full sample code of Top X Axis Scatter Chart

Sample code:

 Tryit<html>
<head>
<title>Wikitechy Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart','scatter']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('number', 'Age');
   data.addColumn('number', 'Weight');
   data.addRows([
      [ 18,      22],
      [ 14,      7.5],
      [ 15,     18],
      [ 11,      15],
      [ 13,      9.5],
      [ 8.5,    6]
   ]);
   
   // Set chart options
   var options = {'title':'Age vs Weight',
      'width':550,
      'height':400,
       axes: {
          x: {
             0: {side: 'top'}
          }
       }	  
   };

   // Instantiate and draw the chart.
   var chart = new google.charts.Scatter(document.getElementById('container'));
   chart.draw(data, google.charts.Scatter.convertOptions(options));
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html> 
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output:


Related Searches to Google Charts - Top X Axis Scatter Chart

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×